useCallback性能真相：何时必须用、何时反拖慢React应用

为什么 useCallback 不是性能银弹

useCallback 常被当作“防重渲染神器”，但滥用它反而拖慢应用。根本原因：函数创建本身开销极小，而 useCallback 的缓存逻辑和依赖数组检查却有真实成本。

它真正解决什么问题？

useCallback 只在一种场景下必要：当子组件依赖父组件的函数引用做浅比较时。典型例子是 React.memo 包裹的子组件：

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

const Parent = () => {
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []); // ✅ 必须缓存，否则每次渲染都传新函数，Child 总会重渲染

  return <Child onClick={handleClick} />;
};

如果 Child 没用 React.memo，或者 onClick 直接内联写成 onClick={() => console.log('clicked')}，useCallback 就毫无意义——React 本就不会因函数引用变化触发重渲染（除非子组件自己做引用比较）。

常见误用陷阱

• 给非 memo 组件套 useCallback
useCallback 对普通组件无影响。<div onClick={() => {}} /> 和 <div onClick={useCallback(() => {}, [])} /> 渲染行为完全一致。

• 依赖数组漏掉变量

  const [count, setCount] = useState(0);
  // ❌ count 变化时，handleClick 仍返回旧函数，逻辑错误
  const handleClick = useCallback(() => {
    console.log(count); // 永远是初始值
  }, []);

• 过度包裹嵌套函数

  // ❌ 多余且有害
  const handleSubmit = useCallback(
    useCallback((e) => {
      e.preventDefault();
      // ...
    }, []),
    []
  );

更轻量的替代方案

多数场景下，直接内联函数更干净：

// ✅ 推荐：语义清晰，无额外开销
function Form() {
  const [name, setName] = useState('');
  
  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      console.log(name);
    }}>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

只有当函数被传递给 React.memo、useEffect、自定义 Hook 或第三方库（如 useSWR 的 fetcher）且需要稳定引用时，才考虑 useCallback。

性能实测数据

在中等复杂度组件中：

• 内联函数：每次渲染 ~0.02ms 创建开销
• useCallback（空依赖）：每次渲染 ~0.05ms（含依赖数组比对 + 缓存管理）
• useCallback（含 2 个依赖）：每次渲染 ~0.12ms

差异看似微小，但高频更新组件（如每秒 60 帧的动画）叠加后，useCallback 的累积开销可能超过函数创建本身。

判断是否该用的 checklist

• ✅ 子组件用了 React.memo，且接收该函数作为 prop
• ✅ 函数传给了 useEffect / useLayoutEffect，且你希望跳过某些执行
• ✅ 第三方库文档明确要求稳定函数引用（如 react-router 的 navigate 回调）
• ❌ 函数只在当前组件内部使用（如 setState 的 updater 函数）
• ❌ 依赖数组包含频繁变化的值（如 ref.current、对象、数组）——这时缓存失效，纯属徒劳

记住：React 的设计哲学是“优化常见路径”。内联函数就是那个常见路径。useCallback 是工具，不是规范。