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

Question

因此，我只是不停地使用useMemo和useCallback并四处逛逛，看看事情如何进行。在这种情况下，我要做的就是不要在父级发送相同对象时渲染Child。

这是我的父母部分：

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

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

现在，每单击一次便会重新计算一次便笺。