的目的useCallback是能够利用当前范围内的props或状态，并且可能会在重新渲染时发生变化。当你需要新版本的回调函数时，dependency-array 会告诉 React。如果你想记住一个昂贵的计算，你需要useMemo改用。

下面的例子演示之间的差异useCallback和useMemo不使用它们的后果。在这个例子中，我React.memo用来防止Child重新渲染，除非它的props或状态发生变化。这允许看到useCallback. 现在，如果Child收到一个新onClickprops，它将导致重新渲染。

子 1 正在接收非记忆onClick回调，因此每当父组件重新渲染时，子 1 总是会收到一个新onClick函数，因此它会被迫重新渲染。

孩子 2 正在使用onClick从返回的记忆回调，useCallback而孩子 3 正在使用等效的 viauseMemo来演示

useCallback(fn,inputs) 等价于 useMemo(() => fn,inputs)

对于 Child 2 和 3，每次单击 Child 2 或 3 时，回调仍会执行，useCallback只需确保onClick在依赖项未更改时传递相同版本的函数。

显示的以下部分有助于指出正在发生的事情：

nonMemoizedCallback === memoizedCallback: false|true

另外，我somethingExpensiveBasedOnA使用useMemo. 出于演示目的，我使用了不正确的依赖项数组（我故意省略了b），以便您可以看到记忆版本在更改时不会b更改，但会在更改时a更改。非记忆版本随时更改a或b更改。

import ReactDOM from "react-dom";

import React, {
  useRef,
  useMemo,
  useEffect,
  useState,
  useCallback
} from "react";

const Child = React.memo(({ onClick, suffix }) => {
  const numRendersRef = useRef(1);
  useEffect(() => {
    numRendersRef.current++;
  });

  return (
    <div onClick={() => onClick(suffix)}>
      Click Me to log a and {suffix} and change b. Number of Renders:{" "}
      {numRendersRef.current}
    </div>
  );
});
function App(props) {
  const [a, setA] = useState("aaa");
  const [b, setB] = useState("bbb");

  const computeSomethingExpensiveBasedOnA = () => {
    console.log("recomputing expensive thing", a);
    return a + b;
  };
  const somethingExpensiveBasedOnA = computeSomethingExpensiveBasedOnA();
  const memoizedSomethingExpensiveBasedOnA = useMemo(
    () => computeSomethingExpensiveBasedOnA(),
    [a]
  );
  const nonMemoizedCallback = suffix => {
    console.log(a + suffix);
    setB(prev => prev + "b");
  };
  const memoizedCallback = useCallback(nonMemoizedCallback, [a]);
  const memoizedCallbackUsingMemo = useMemo(() => nonMemoizedCallback, [a]);
  return (
    <div>
      A: {a}
      <br />
      B: {b}
      <br />
      nonMemoizedCallback === memoizedCallback:{" "}
      {String(nonMemoizedCallback === memoizedCallback)}
      <br />
      somethingExpensiveBasedOnA: {somethingExpensiveBasedOnA}
      <br />
      memoizedSomethingExpensiveBasedOnA: {memoizedSomethingExpensiveBasedOnA}
      <br />
      <br />
      <div onClick={() => setA(a + "a")}>Click Me to change a</div>
      <br />
      <Child onClick={nonMemoizedCallback} suffix="1" />
      <Child onClick={memoizedCallback} suffix="2" />
      <Child onClick={memoizedCallbackUsingMemo} suffix="3" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是一个相关的答案：React Hooks useCallback 导致孩子重新渲染