时间戳

首页 > 解决方案 > 为什么 useMemo 不起作用？我用错了吗？

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

这里是沙盒。

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

标签： javascriptreactjsreact-hooks

解决方案

依赖数组控制着记忆中断的时间。如果该数组中的任何内容发生了变化，那么 memoization 将再次运行。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>
  );
};

现在，每隔一次点击就会重新计算记忆。

推荐阅读