Question

我最近正在使用React Hooks重构Web应用程序。我遇到关于useCallback的问题。根据对Kent的描述：https://kentcdodds.com/blog/usememo-and-usecallback，useCallback将相同的函数引用传递给子组件，以避免子组件重新呈现，从而使性能更好。但是，它与React.memo一起使用。正如肯特所说：

您不应该在没有必要的情况下优化不必要的竞争对手。 React非常快，我可以想到很多事情来做，这比优化这样的事情要好得多。实际上，用我要向您展示的内容来优化内容的需求非常罕见，以至于我从不需要做...

因此，我的问题是：我是否可以声称我们通常不需要使用useCallback？除非创建回调的开销很大，否则使用useCallback可以避免为每个渲染重新创建回调。

对于一个onClick或onChange事件处理程序（少于2行），我们是否不应该使用useCallback来包装它？

Answer 1

当我不想更改函数引用时，我发现useCallback()是必要的。例如，当我在某个子组件上使用React.memo时，由于通过props引用的一种方法中的引用更改，该子组件不应重新呈现。

示例：

在下面的示例中，如果父级重新渲染，Child1将始终重新渲染，因为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

传递内联回调和一系列依赖项。 useCallback将返回回调的记忆版本，仅在其中一个依赖项已更改时才更改。将回调传递给依赖于引用相等性的优化子组件以防止不必要的呈现时（例如shouldComponentUpdate），这很有用。

useMemo

传递“创建”函数和一系列依赖项。仅当其中一个依赖项已更改时，useMemo才会重新计算记忆的值。这种优化有助于避免对每个渲染进行昂贵的计算。

React钩子：通常不需要`useCallback`吗？

1 个答案: