為什么 useCallback 不是性能銀彈

useCallback 常被當(dāng)作“防重渲染神器”，但濫用它反而拖慢應(yīng)用。根本原因：函數(shù)創(chuàng)建本身開銷極小，而 useCallback 的緩存邏輯和依賴數(shù)組檢查卻有真實(shí)成本。

它真正解決什么問題？

useCallback 只在一種場(chǎng)景下必要：當(dāng)子組件依賴父組件的函數(shù)引用做淺比較時(shí)。典型例子是 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');
  }, []); // ? 必須緩存，否則每次渲染都傳新函數(shù)，Child 總會(huì)重渲染

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

如果 Child 沒用 React.memo，或者 onClick 直接內(nèi)聯(lián)寫成 onClick={() => console.log('clicked')}，useCallback 就毫無意義——React 本就不會(huì)因函數(shù)引用變化觸發(fā)重渲染（除非子組件自己做引用比較）。

常見誤用陷阱

• 給非 memo 組件套 useCallback
useCallback 對(duì)普通組件無影響。<div onClick={() => {}} /> 和 <div onClick={useCallback(() => {}, [])} /> 渲染行為完全一致。

• 依賴數(shù)組漏掉變量

  const [count, setCount] = useState(0);
  // ? count 變化時(shí)，handleClick 仍返回舊函數(shù)，邏輯錯(cuò)誤
  const handleClick = useCallback(() => {
    console.log(count); // 永遠(yuǎn)是初始值
  }, []);

• 過度包裹嵌套函數(shù)

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

更輕量的替代方案

多數(shù)場(chǎng)景下，直接內(nèi)聯(lián)函數(shù)更干凈：

// ? 推薦：語義清晰，無額外開銷
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>
  );
}

只有當(dāng)函數(shù)被傳遞給 React.memo、useEffect、自定義 Hook 或第三方庫（如 useSWR 的 fetcher）且需要穩(wěn)定引用時(shí)，才考慮 useCallback。

性能實(shí)測(cè)數(shù)據(jù)

在中等復(fù)雜度組件中：

• 內(nèi)聯(lián)函數(shù)：每次渲染 ~0.02ms 創(chuàng)建開銷
• useCallback（空依賴）：每次渲染 ~0.05ms（含依賴數(shù)組比對(duì) + 緩存管理）
• useCallback（含 2 個(gè)依賴）：每次渲染 ~0.12ms

差異看似微小，但高頻更新組件（如每秒 60 幀的動(dòng)畫）疊加后，useCallback 的累積開銷可能超過函數(shù)創(chuàng)建本身。

判斷是否該用的 checklist

• ? 子組件用了 React.memo，且接收該函數(shù)作為 prop
• ? 函數(shù)傳給了 useEffect / useLayoutEffect，且你希望跳過某些執(zhí)行
• ? 第三方庫文檔明確要求穩(wěn)定函數(shù)引用（如 react-router 的 navigate 回調(diào)）
• ? 函數(shù)只在當(dāng)前組件內(nèi)部使用（如 setState 的 updater 函數(shù)）
• ? 依賴數(shù)組包含頻繁變化的值（如 ref.current、對(duì)象、數(shù)組）——這時(shí)緩存失效，純屬徒勞

記?。篟eact 的設(shè)計(jì)哲學(xué)是“優(yōu)化常見路徑”。內(nèi)聯(lián)函數(shù)就是那個(gè)常見路徑。useCallback 是工具，不是規(guī)范。