在沒有 React.memo 的組件中使用 useCallback 有什么意義？

Question

考慮示例：

const Child = () => {
  console.log("I did re-render!");
  return null;
};

const App = () => {
  const [_, setValue] = useState();
  const fn = useCallback(() => {
    // do something
  }, []);

  return (
    <div>
      <button onClick={() => setValue(Math.random)}>click</button>
      <Child fn={fn} />
    </div>
  );
};

隨着App中的每個 state 更改（單擊按鈕）， Child組件會重新渲染，即使傳遞的道具fn用useCallback包裝。 但是，如果我用React.memo包裝Child ，它就會開始正常工作 - 當父級重新渲染時它不會重新渲染。

我的問題：在沒有React.memo的情況下使用useCallbacks有什么意義？ 如果我不希望組件在其父組件重新渲染時始終重新渲染，我是否應該始終使用React.memo ？

useCallbacks是否應該始終與React.memo一起使用？ 因為如果沒有React.memo ，它們似乎毫無意義和無用。

操場： https://codesandbox.io/s/peaceful-khorana-nrojpb?file=/src/App.js

Answer 1

我的問題：在沒有 React.memo 的情況下使用 useCallbacks 有什么意義？

除非你告訴 React 根據參考進行比較，否則沒有。

如果我不希望組件在其父組件重新渲染時始終重新渲染，我是否應該始終使用 React.memo？

是的，或者類似的東西。

useCallbacks 是否應該始終與 React.memo 一起使用？ 因為如果沒有 React.memo，它們似乎毫無意義和無用。

是的，除非你做同樣的事情。

---

只是為了詳細說明 - 除了React.memo ，您始終可以使用useMemo包裝子渲染：

const App = () => {
  const [_, setValue] = useState();
  const fn = useCallback(() => {
    // do something
  }, []);

  const child = useMemo(() => <Child fn={fn} />, [fn]);
  return (
    <div>
      <button onClick={() => setValue(Math.random)}>click</button>
      {child}
    </div>
  );
};

或者使用 useRef+useEffect “自己動手”，或者使用 class 組件並覆蓋shouldComponentUpdate或從React.PureComponent繼承。