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

Question

所以我只是掌握了 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;

这是我的 child ，尽管“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);

Here is the Sandbox.

请让我知道我做错了什么以及这种情况的解决方案是什么？

Answer 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>
  );
};

现在内存将在每隔一次点击时重新计算。