reactjs - react 钩子(Hook) : is `useCallback` not so needed usually?

Question

我最近正在使用 React Hooks 重构一个 Web 应用程序。我遇到了一个关于 useCallback 的问题.基于肯特的描述:https://kentcdodds.com/blog/usememo-and-usecallback , useCallback就是给子组件传入相同的函数引用，避免子组件的重新渲染，让性能更好。但是，它与 React.memo 一起使用。 .正如肯特所说:

MOST OF THE TIME YOU SHOULD NOT BOTHER OPTIMIZING UNNECESSARY RERENDERS. React is VERY fast and there are so many things I can think of for you to do with your time that would be better than optimizing things like this. In fact, the need to optimize stuff with what I'm about to show you is so rare that I've literally never needed to do it ...

所以，我的问题是:我是否有权声称我们不需要使用 useCallback通常？除非回调的创建成本很高，使用 useCallback避免为每个渲染重新创建回调。

比如说，对于 onClick或 onChange事件处理程序，2 行或更少，我们应该不使用 useCallback把它包起来？

Answer 1

我找到 useCallback()当我不希望函数引用改变时是必要的。例如，当我使用 React.memo在某些子组件上，由于其方法之一通过 props 的引用更改而不应重新渲染。
示例:
在下面的示例中 Child1如果 Parent 重新渲染，总是会重新渲染，因为 parentMethod1每次渲染都会获得新的引用。和Child2不会重新渲染，因为 parentMethod2将保留其跨渲染的引用(您可以传递一个依赖数组以使其更改并在新输入值出现时重新创建)。
注:假设 Child使用 React.memo() 存储组件

function Parent() {
  const parentMethod1 = () => DO SOMETHING;
  const parentMethod2 = useCallback(() => DO SOMETHING,[]);
  return(
    <React.Fragment>
    <Child1
      propA=parentMethod1
    />
    <Child2
      propA=parentMethod2
    />
    </React.Fragment>
  );
}

另一方面，如果 function运行起来很昂贵，你可以使用 useMemo 来内存它的结果。钩。然后你只会在新值出现时运行它，否则它会给你一个使用这些相同值的先前计算的内存结果。
https://reactjs.org/docs/hooks-reference.html#usecallback

useCallback

Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).

useMemo

Pass a “create” function and an array of dependencies. useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.