React.js 中的 useMemo 钩子也可以记忆对象引用吗？

Question

这是 React.js 中关于 useMemo hook 的常见解释

\n

useMemo(compute, dependencies) invokes compute, memoizes the calculation result, and returns it to the component.\n\nIf during next renderings the dependencies don\xe2\x80\x99t change, then useMemo() doesn\xe2\x80\x99t invoke compute but returns the memoized value.\n\n- Dmitri Pavlutin\n

\n

但是，我看到 useMemo 挂钩的示例返回如下所示的数组。

\n

React.useMemo(() => [1, 2, 3], []);\n

\n

如您所见，useMemo 返回一个数组，该数组在 Javascript 中被视为对象。

\n

这很令人困惑。我认为 useMemo 钩子的用法是为了记忆计算值。

\n

所以我做了一些测试来弄清楚 useMemo 与对象是如何工作的

\n

const Child = React.memo(({ obj }) => {\n\n  console.log('this is child component')\n\n  return <div>Child Component</div>\n})\n\nconst App = () => {\n  const [toggle, setToggle] = React.useState(false)\n\n  const memoObj = React.useMemo(() => { return { bar: 'foo' } }, [])\n\n  return (\n    <div>\n      <button onClick={() => setToggle(!toggle)}>test</button>\n      <Child obj={memoObj} />\n    </div>\n  );\n}\n

\n

当memoObj没有被 useMemo 包装时，每当我单击测试按钮时，我都可以在控制台中看到来自子组件的消息。

\n

另一方面，当memoObj被钩子包裹时，只有当子组件第一次渲染时才会显示该消息。

\n

这是否意味着useMemo不仅可以存储计算值，还可以存储对象的引用？

\n

Answer 1

这是否意味着 useMemo 不仅可以存储计算值，还可以存储对象的引用？

当然是的，并且不会重新渲染记忆的组件，直到有必要重新渲染它（就像某些东西发生了变化）。

但你必须记住：

默认情况下，它只会浅层比较 props 对象中的复杂对象。

所以

如果您想控制比较，还可以提供自定义比较函数作为第二个参数。

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

这就是React所说的。

Answer 2

确实如此，useMemo将始终保留上次渲染中对对象的引用，同时useCallback保留上次渲染中函数（也是对象）的引用

您的示例也是了解 useMemo 如何工作的好方法！

您还可以为 useCallback 创建相同的示例，这将给出相同的行为

const Child = React.memo(({ obj }) => {
   console.log('this is child component');

   return <div>Child Component</div>;
});

const App = () => {
   const [toggle, setToggle] = React.useState(false);

   const useCallbackObj = React.useCallback(() => {
      console.log('callback is called!');
   }, []);

   return (
      <div>
         <button onClick={() => setToggle(!toggle)}>test</button>
         <Child obj={useCallbackObj} />
      </div>
   );
};