React Hooks：在组件中声明函数包装器答案

【问题标题】：React Hooks: Declaring function wrappers in componentReact Hooks：在组件中声明函数包装器
【发布时间】：2019-02-13 15:17:31
【问题描述】：

我对 react 没有那么丰富的经验。想知道每个人对在非类组件中声明函数包装器的想法。我已阅读该函数将在每次重新渲染时重新声明，这可能会导致性能问题。使用 React Hooks “useCallback”可以克服这个问题，通过存储一个“缓存”回调，它会停止重新声明包装函数吗？

例如

function myComponent(props){
    const callBack = () => {// do something};
    return <SomeComponent callback={callBack} />;
}

function myComponent(props){
    const callBack = useCallback(() => 
      {// do something}, [// dependencies]);
    return <SomeComponent callback={callBack} />;
}

【问题讨论】：

是的，“useCallback 将返回回调的记忆版本，只有在其中一个输入发生变化时才会改变” - 它将被重新声明，但具有相同的记忆 fn

标签： reactjs

【解决方案1】：

不要太担心在每次渲染上创建函数，这很少会成为 React 应用程序的性能瓶颈（这实际上取决于您的项目）。

您可以查看此链接到 React 文档以供参考：https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render

如果真的需要，您可以将此函数从渲染中取出，并执行以下操作：

function doStuff(a) { ... }

function MyComponent(props) {
  return (
    // call doStuff(props.a) somewhere
  );
}

使用这种方法，您的函数只会被创建一次，但同样，不要太担心这一点。在某些情况下，这更难做到，例如，在呈现项目列表时，您仍然需要为每个项目创建一个函数：

function doStuff(item) { ... }

function MyComponent(props) {
  return (
    <div>
    {
      props.items.map(function(item, index) {
        return (
          <OtherComponent
            key={index}
            data={item}
            onClick={() => doStuff(item)}
          />
        );
      })
    }
    </div>
  );
}

即使 doStuff 函数只创建一次，您仍然需要为每个项目 onClick 属性创建一个函数。这完全没问题，再说一遍，这很少会成为 React 应用程序的性能瓶颈。

注意：即使使用useCallback，您仍然会在每次渲染时创建一个新的箭头函数，但useCallback 会提高性能，因为它会返回相同的引用，从而减少重新渲染组件树。

【讨论】：