React hooks：通常不需要`useCallback`吗？

Question

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

大多数时候你不应该去优化不必要的渲染。React 非常快，我能想到很多比优化这样的事情更好的事情。事实上，用我将要展示的东西来优化东西的需要是如此罕见，以至于我真的从来不需要这样做......

所以，我的问题是：我声称我们useCallback通常不需要使用是否正确？除非回调创建起来很昂贵，使用useCallback避免为每个渲染重新创建回调。

比如说，对于2 行或更少行的onClickoronChange事件处理程序，我们不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 将返回回调的记忆版本，该版本仅在依赖项之一发生更改时才会更改。这在将回调传递给依赖引用相等性的优化子组件时很有用，以防止不必要的渲染（例如shouldComponentUpdate）。

使用备忘录

传递“创建”函数和依赖项数组。useMemo 只会在依赖项之一发生变化时重新计算记忆值。这种优化有助于避免每次渲染时进行昂贵的计算。