react 中的 useCallback 用法

在 React 中，useCallback 是一个用于优化性能的钩子函数，主要作用是缓存函数引用，避免在组件重新渲染时创建不必要的新函数实例。

基本用法

jsx

const memoizedCallback = useCallback(
  () => {
    // 函数逻辑
    doSomething(a, b);
  },
  [a, b], // 依赖数组
);

• 参数 1：需要缓存的函数
• 参数 2：依赖数组，当数组中的值发生变化时，才会重新创建函数
• 返回值：缓存的函数引用

主要应用场景

1. 传递给子组件的回调函数
   当父组件向子组件传递回调函数时，如果子组件是用 React.memo 包裹的纯组件，useCallback 可以避免因函数引用变化导致的不必要重渲染：
   
   
   
   
   
   

const Parent = () => {
  const [count, setCount] = useState(0);
  
  // 缓存回调函数，只有当 count 变化时才重新创建
  const handleClick = useCallback(() => {
    console.log('Clicked with count:', count);
  }, [count]);
  
  return <Child onClick={handleClick} />;
};

// 子组件使用 React.memo 优化
const Child = React.memo(({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
});

1. 作为 useEffect 的依赖
   当 useEffect 依赖某个函数时，使用 useCallback 可以避免因函数重新创建导致的 useEffect 不必要执行：
   
   
   
   
   

const Component = () => {
  const fetchData = useCallback(async () => {
    // 数据请求逻辑
  }, [apiUrl]); // 只有 apiUrl 变化时才重新创建函数
  
  useEffect(() => {
    fetchData();
  }, [fetchData]); // 依赖缓存的函数
  
  return <div>...</div>;
};

注意事项

• 不要过度使用：useCallback 本身也有性能开销，只在需要优化的场景使用
• 正确设置依赖：依赖数组必须包含函数内部使用的所有外部变量，否则可能导致闭包陷阱
• 与 React.memo 配合使用：单独使用 useCallback 意义不大，通常与 React.memo 配合优化子组件渲染