useCallback 对当前组件做了什么？

Question

在我读过的反应文档中

传递内联回调和依赖项数组。useCallback 将返回回调的记忆版本，仅当依赖项之一发生更改时该版本才会更改。当将回调传递给依赖引用相等性来防止不必要的渲染的优化子组件时（例如，shouldComponentUpdate），这非常有用。

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

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

这样对吗？或者我们有更深层次的东西？

我已经检查了这个很好的答案，但它谈论的是防止（子级）重新渲染，我正在寻找useCallback当前组件的含义。

Answer 1

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

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

useCallback在两种情况下很有用：

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

• 您（或子组件，或自定义挂钩）希望在 a 中使用回调，useEffect并且希望减少效果运行的次数。