useCallback 的技术细节

在 React 中，useCallback 是一个钩子，用于在组件重新渲染时保持函数的相同引用。这样做有两个主要好处： ^a71744

1. 性能优化：避免不必要的渲染，因为依赖项数组没有改变时，函数引用保持不变。
2. 避免副作用：在依赖特定引用的场景中，如 useEffect，useCallback 可以防止由于函数引用变化导致的无意中的副作用触发。

如何工作：

• useCallback(fn, deps) 接受一个函数 fn 和一个依赖项数组 deps。
• 当组件渲染时，如果 deps 中的任何依赖项发生变化，它将返回一个新的函数实例；否则，返回之前的函数实例。
• 当 useCallback 的依赖数组为空数组时，意味着该回调函数在组件的整个生命周期内将保持不变，只在组件首次渲染时创建一次。

想象你有一本食谱（函数）来做你最喜欢的菜。如果食材（依赖项）没有变，你不需要重新写一本食谱书；你只需使用上次的那本。

示例

假设我们有一个组件，其中包含一个按钮。每当点击按钮时，我们希望触发一个特定的动作（函数）。我们希望确保这个动作（函数）在组件重新渲染时不会改变其引用，除非依赖项发生变化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import React, { useCallback, useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  // 使用useCallback确保在count不变时，increment函数引用保持不变
  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, [count]); // 依赖项是count

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>增加</button>
    </div>
  );
};

export default MyComponent;

在这个例子中，每当 count 变化时，increment 函数将被重新创建。如果 count 保持不变，即使组件重新渲染，increment 函数的引用也保持不变。

思考

假设你有一个接收函数作为 props 的子组件。如果父组件在每次渲染时都传递一个新的函数实例，子组件将不必要地重新渲染，即使它的其他 props 没有变化。在这种情况下，useCallback 在父组件中非常有用，因为它可以保证只有在真正需要时，函数 props 才会变化。

在哪些情况下使用 useCallback 并不会带来明显的性能提升？
当一个组件不会频繁地重新渲染，或者重新渲染的成本相对较低时，使用 useCallback 并不会带来明显的性能提升。实际上，滥用 useCallback 可能会适得其反，因为它本身也有一定的性能开销。