在没有 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继承。