javascript - 为什么 useMemo 不起作用？我是用错了吗？

所以我刚刚开始掌握 useMemo 和 useCallback，并在尝试了解事情是如何运作的。我在这种情况下想要做的是，当父组件传递相同的对象时，不去渲染子组件。

这是我的父组件：

const Parent = () => {
  const [value, setValue] = useState(0);
  const handleOnClick = e => {
    setValue(value + 1);
  };

  const myObject = useMemo(() => {
    return { value: value - value };
  }, [value]);

  return (
    <div>
      <h1>I am a parent</h1>
      <button onClick={handleOnClick}>
        Click on Me
      </button>
      <Child object={myObject} />
    </div>
  );
};

export default Parent;

这是我的子组件，它在每次点击时都会重新渲染，尽管“myObject”的内容是相同的。（我知道每次引用都会改变，但我的理解是 useMemo 就是用来解决这个问题的）

const Child = ({ object }) => {
  return (
    <div>
      <h1>I am child</h1>
      <p>Object is {JSON.stringify(object)}</p>
    </div>
  );
};

export default React.memo(Child);

这里是沙箱。

请告诉我我哪里做错了，以及这个情况的解决方案是什么？

答案＃1

依赖数组决定了缓存什么时候失效。如果数组中的任何内容发生了变化，那么缓存就会重新运行。然而，React 只检查那个数组，而不是最终的结果。

现在你告诉它每当 value 变化时重新计算。如果 value 不是你想要的，你可以给数组提供其他内容。你给出的 value - value 的例子没有多大意义，因为它永远不会变化，所以让我来替换它，这样它会有一半时间发生变化：

const Parent = () => {
  const [value, setValue] = useState(0);
  const handleOnClick = e => {
    setValue(value + 1);
  };

  const halfValue = Math.round(value / 2);
  const myObject = useMemo(() => {
    return { halfValue: halfValue };
  }, [halfValue]);

  return (
    <div>
      <h1>I am a parent</h1>
      <button onClick={handleOnClick}>
        Click on Me
      </button>
      <Child object={myObject} />
    </div>
  );
};