React Hooks useCallback 简单示例的问题

Question

我正在尝试制作一个简单的示例，该示例遵循第 https://reactjs.org/docs/hooks-reference.html#usecallback

页文档中的 React Hooks 示例

如果没有 useCallback，代码将按照本例中的原样运行：

import React, { useCallback } from "react";

function Test(props) {
  function doSomething(a, b) {
    console.log("doSomething called");
    return a + b;
  }

  return (
    <div>
      {Array.from({ length: 3 }).map(() => (
        <div>{doSomething('aaa','bbb')}</div>
      ))}
    </div>
  );
}

export default Test;

但是，当我如下添加我认为 useCallback 的正确代码时，出现错误（a 未定义）

import React, { useCallback } from "react";

function Test(props) {
  function doSomething(a, b) {
    console.log("doSomething called");
    return a + b;
  }

  const memoizedCallback = useCallback(
    () => {
      doSomething(a, b);
    },
    [a, b]
  );

  return (
    <div>
      {Array.from({ length: 3 }).map(() => (
        <div>{memoizedCallback("aaa", "bbb")}</div>
      ))}
    </div>
  );
}

export default Test;

问题代码在这里：

https://stackblitz.com/edit/react-usememo2?file=Hello.js

Answer 1

useCallback 的目的是能够利用当前范围内的道具或状态，这些道具或状态可能会在 re-render 上发生变化。 dependency-array 然后告诉 React 何时需要新版本的回调。如果你想记住一个昂贵的计算，你需要使用 useMemo 来代替。

下面的示例演示了 useCallback 和 useMemo 之间的区别以及不使用它们的后果。在这个例子中，我使用 React.memo 来防止 Child 从 re-rendering 除非它的道具或状态发生变化。这允许看到 useCallback 的好处。现在，如果 Child 收到一个新的 onClick 道具，它将导致 re-render.

Child 1 正在接收 non-memoized onClick 回调，因此每当 parent 组件 re-renders，Child 1 总是接收一个新的 onClick 函数，因此它被强制为 re-render.

Child 2 使用从 useCallback 返回的记忆 onClick 回调，而 Child 3 使用等效的 useMemo 来演示

useCallback(fn, inputs) is equivalent to useMemo(() => fn, inputs)

对于 Child 2 和 3，每次单击 Child 2 或 3 时回调仍会执行，useCallback 只是确保相同版本的 onClick 函数在依赖关系没有改变时被传递。

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

nonMemoizedCallback === memoizedCallback: false|true

另外，我正在显示 somethingExpensiveBasedOnA 和使用 useMemo 的记忆版本。出于演示目的，我使用了一个不正确的依赖项数组（我故意遗漏了 b），以便您可以看到当 b 更改时记忆版本不会更改，但当 a 变化。每当 a 或 b 更改时，non-memoized 版本也会更改。

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 简单示例的问题

Trouble with simple example of React Hooks useCallback

reactjs

react-hooks