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

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

答：在 React 中，useCallback 用于缓存函数引用，避免在每次父组件重新渲染时都创建新的函数实例，从而防止因函数引用变化导致子组件不必要的重新渲染。

解析： 当父组件中的函数作为 props 传递给子组件（尤其是使用 React.memo 包裹的子组件）时，如果该函数未被缓存，每次父组件重新渲染都会生成一个新函数，即使函数逻辑未变，其引用也会不同。这会使得 React.memo 失效，子组件仍会重新渲染。

正确使用方式如下：

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

const Child = React.memo(({ onClick }) => {
  console.log('Child rendered');
  return <button onClick={onClick}>Click me</button>;
});

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

  // 使用 useCallback 缓存函数
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []); // 依赖项为空数组，表示函数永不更新

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <Child onClick={handleClick} />
    </div>
  );
};

注意事项：

1. 仅当函数作为 prop 传递给 React.memo 包装的子组件，或作为 useEffect/useMemo 的依赖项时，才需要使用 useCallback。
2. 不要盲目对所有函数使用 useCallback，这会增加代码复杂度并可能带来性能开销（如依赖项数组的比较）。
3. 如果函数依赖于状态或 props，需将其添加到依赖数组中，否则可能造成闭包陷阱（引用过期状态）。可结合 useReducer 或 useRef 等策略避免频繁更新。