javascript - React - 无状态组件，组件内部或外部功能

Question

我想问一下。我应该在 React 无状态组件中的什么地方定义函数？

例如:

我想准备函数以使用一些参数调用它，但我想避免在重新渲染后创建新的函数。

伪代码:

    const example = (params) => {...}

    const statelessComponent = () => {
        return(
             <button onClick={example(params)}
        )
    }

或

    const statelessComponent = () => {
        const example = (params) => {...}

        return(
             <button onClick={example(params)}
        )
    }

但我也想避免:

• 渲染时调用函数
• 我不想使用“useCallback” Hook 来阻止创建新的引用。

如果只有一种解决方案是在 Parent 组件中创建函数并通过 props 将其发送到 Children 组件，然后调用此函数？

谁能给我解释一下，如何在没有 useCallback 或 useMemo Hook 的情况下以最佳性能做到这一点？

谢谢。

Answer 1

---

2021 年编辑:

---

实现 React Hooks 后，问题不再相关 - 您可以根据需要在功能组件内部声明函数。但是，如果您想避免子项重新渲染，您可以使用 useCallback Hook 包装您的函数，以便函数实例保留在渲染之间。

const handleChange = useCallback(() => /* do stuff */, []);

https://reactjs.org/docs/hooks-reference.html#usecallback

---

旧答案:

---

我建议尽可能将您的函数保留在无状态组件之外。

考虑以下示例。您的父组件会重新渲染，因此 SFC 子组件会重新渲染(仅供引用:每次父组件重新渲染时 SFC 都会重新渲染，它没有任何内置的浅层 Prop 比较逻辑)。

如果您在 SFC 中声明函数，它将在每次重新渲染时创建一个全新的实例。

如果在 SFC 之外声明函数，它将被使用 n 次，但函数本身将保持同一个实例。

StackBlitz 的工作示例:https://stackblitz.com/edit/react-1m2hds

如何测试 - 在 input 中写一些东西，然后点击 child 。 parent 将重新渲染，所以 child 会这样做。外框函数 fn1 被推送到窗口变量 test1，内框函数 fn2 进入 test2 .现在重复这个过程。如果您比较 test1 中的函数 -> test1[0] === test1[1] 将返回 true，因为这两个函数都是同一个实例。

如果您比较 test2[0] === test2[1]，它将返回 false，因为已创建函数的新实例。

注意:使用内置的 StackBlitz 控制台进行测试。

最后说明:不管上面说了什么，性能差异基本上是不明显的。

window.test1 = [];
window.test2 = [];

class App extends Component {
  state = {
    name: 'React'
  };

  handleChange = (e) => this.setState({ name: e.target.value });

  render() {
    return (
      <div>
        <Child name={this.state.name} />
      </div>
    );
  }
}

const fn1 = () => {};

const Child = ({ name }) => {
  const fn2 = () => {};
  const checkout = () => {
    window.test1.push(fn1);
    window.test2.push(fn2);
  }

  return (
    <div onClick={checkout}>{name}</div>
  );
}