javascript - useCallback 对当前组件做了什么？

Question

在我读过的 React 文档

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).

没关系，我们需要防止子组件不必要的渲染，但是对于使用 useCallback 的当前组件，useCallback 真正提供了什么？

据我所知 useCallback 是为了防止当前组件重新渲染一遍又一遍地创建相同的函数(如果我错了，请纠正我)，并且它将保留对只要依赖项数组包含相同的引用，就可以使用相同的函数(无需创建新函数)。

是吗？或者我们有更深层次的东西？

我检查过这个great answer但它谈论的是防止(子级)重新渲染，我正在寻找 useCallback 对于当前组件意味着什么。

Answer 1

useCallback 确实没有提高它所定义的组件的性能(事实上，它使它变得稍微更糟，因为有一点React 在每个渲染上要做更多的工作)。它对于组件重新渲染的频率没有任何影响。

在组件的每次渲染中，JS 每次仍然“创建”一个新函数。如果依赖项没有改变，useCallback 将简单地丢弃这个新函数，并返回前一个函数。

useCallback 在两种情况下很有用:

• 您将回调传递给使用 React.memo 的组件(以确保它仅在 props 更改时重新渲染)。如果没有 useCallback，子组件将在每次父组件渲染时重新渲染。

• 您(或子组件或自定义 Hook )希望在 useEffect 中使用回调，并且希望减少效果运行的次数。