如何在 React 中正确地使用 useCallback 来优化子组件的重新渲染？

如何在 React 中正确地使用 useCallback 来优化子组件的重新渲染？

回答：
在 React 中，useCallback 用于缓存函数引用，避免在每次父组件重新渲染时都生成新的函数实例，从而防止因 props 函数引用变化而导致子组件不必要的重新渲染（尤其是在子组件使用 React.memo 包裹的情况下）。

使用方式：

const handleClick = useCallback(() => {
  console.log('Clicked!');
}, []); // 依赖数组为空，表示该函数在整个组件生命周期内不会改变

如果函数依赖于某些状态或 props，则应将它们加入依赖数组中：

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

const handleIncrement = useCallback(() => {
  setCount(prev => prev + 1);
}, []); // setCount 是稳定引用，可省略，但更安全的做法是显式声明

// 或者依赖外部变量
const multiplier = 2;
const multiplyCount = useCallback(() => {
  return count * multiplier;
}, [count, multiplier]);

注意事项：

• 仅当子组件使用 React.memo 且接收该函数作为 prop 时，useCallback 才能带来性能收益。
• 不要盲目对所有函数使用 useCallback，因为创建函数的开销通常远小于不必要的子组件重渲染。
• 依赖数组必须完整，否则可能引起闭包陷阱（如使用过期状态）。

解析：
React 在每次组件渲染时都会重新创建内联函数（如 onClick={() => doSomething()}），这会导致传给子组件的函数引用发生变化。若子组件用 React.memo 优化，它会因 prop 引用变化而重新渲染，即使逻辑上函数行为未变。useCallback 缓存函数引用，确保只有依赖项变化时才生成新函数，从而避免这种不必要的渲染，提升性能。