useCallback

官方文档#

const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);

把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染（例如 shouldComponentUpdate）的子组件时，它将非常有用。

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

note

依赖项数组不会作为参数传给回调函数。虽然从概念上来说它表现为：所有回调函数中引用的值都应该出现在依赖项数组中。未来编译器会更加智能，届时自动创建数组将成为可能。 我们推荐启用 eslint-plugin-react-hooks 中的 exhaustive-deps 规则。此规则会在添加错误依赖时发出警告并给出修复建议。

说人话#

根据官网文档的介绍我们可理解：在 a 和 b 的变量值不变的情况下，memoizedCallback 的引用不变。即：useCallback 的第一个入参函数会被缓存，从而达到渲染性能优化的目的。

适用场景#

  • 性能优化：将句柄传入做了 memo 的子组件

举个例子#

下例中假设 NumberList 是个渲染成本非常高的组件，为了避免仅改变主题时亦导致重新渲染该组件，此时使用 useCallback 减少重新 render 的次数。

注意#

useCallback 不是 React 性能优化的银弹, 相反, 错误的用法反而会导致负优化.

Edit this page