💡我居然用错了useMemo和useCallback这么久？

文章首发公众号：萌萌哒草头将军，最近关注有🎁，欢迎关注！

我们知道，useMemo和useCallback主要作用是缓存中间状态，减少无意义的的render从而提高性能。但是最近我发现我对它们的使用一直有误解！

💡推荐阅读

• 🎉干货满满，React设计原理(一)：藏在源码里的紧箍咒，几个容易混淆的变量🎉
• 🎉干货满满，React设计原理(二)：藏在源码里的两个圈，关键的链表结构和双缓存技术🎉

💎 对useMemo的误解

请看下面的代码，即使用了useMemo，在isZero的没有变的情况下，第二个子组件还是重新渲染了！

import { useCallback, useMemo, useState } from "react";

const Child = ({ value, onClick }) => {
  return (
    <div
      style={{
        height: 100,
        background: `#${(~~(Math.random() * (1 << 24))).toString(16)}`
      }}
    >
      my value is {value.toString()}
    </div>
  );
};

export default function App() {

  const [count, setCount] = useState(0);

  const isZero = useMemo(() => !!(count % 3), [count]);

  const onClick = useCallback(() => setCount(count + 1), [count]);

  return (
    <div className="App">
      <button onClick={onClick}>click me</button>
      <Child value={count} />
      <Child value={isZero} />
    </div>
  );
}

💡相关阅读

🎉尤雨溪为什么要推出Vapor Mode🎉

其实原因在之前的文章中也提到过：

React每次当组件状态发生改变时，都会从当前组件开始一直到所有叶子节点组件重新渲染。

文中同时也提到了这个问题的解决方案：子组件使用memo函数包裹，组件就可以按预期渲染了。

但是，此时我们去掉useMemo，子组件依然是按期望渲染的。因为每次当count变化，useMemo都会被重新计算。

memo和useMemo类似，都是基于Object.is的浅比较，仅仅对非引用类型有效。

所以上面的示例中，使用useMemo是没有意义的。

💎 对useCallback的误解

然而，上面的示例中，即使onClick函数不使用useCallback，组件也会按预期渲染。这是因为不管onClick的回调函数的缓存是否发生改变，App组件注定都会被渲染。

所以，现在我们得到了一个合理的代码，如下：

import { memo, useCallback, useMemo, useState } from "react";

const Child = memo(({ value, onClick }) => {
  return (
    <div
      style={{
        height: 100,
        background: `#${(~~(Math.random() * (1 << 24))).toString(16)}`
      }}
    >
      my value is {value.toString()}
    </div>
  );
});

export default function App() {

  const [count, setCount] = useState(0);

  // const isZero = useMemo(() => !!(count % 3), [count]);
  const isZero = !!(count % 3);

  // const onClick = useCallback(() => setCount(count + 1), [count]);
  const onClick = () => setCount(count + 1);

  return (
    <div className="App">
      <button onClick={onClick}>click me</button>
      <Child value={count} />
      <Child value={isZero} />
    </div>
  );
}

那到底应该何时使用useCallback呢？

请看下面的例子。在上面的代码基础上添加如下代码：

  const onClickMethod = () => console.log("lll");

  return (
    <div className="App">
      <button onClick={onClick}>click me</button>
      <Child value={count} onClick={onClickMethod} />
      <Child value={isZero} onClick={onClickMethod} />
    </div>
  );

此时，发现组件无法按预期渲染了，不管isZero是否发生变化，第二个Child组件都会被重新渲染。

这是因为此时的onClickMethod方法被做为Child组件的onClick属性了。

如果现在将onClickMethod方法使用useCallback包裹起来，就又正常了。

const onClickMethod = useCallback(() => console.log("lll"), []);

这才是useCallback的正确用法！

💎 总结

我们在写组件时，应该遵循下面的规律，可以有效提高页面性能：

• 👉尽量多用memo方法包裹组件（减少渲染次数）

• 更正：如果组件的props变化不频繁，可以使用memo包裹组件（尽可能的减少渲染次数），props变化频繁，memo依然会频繁渲染组件，反而造成了额外的性能消耗。感谢大佬oncc指正

• 👉当组件的渲染代价比较大时，可以使用memo包裹组件（减少性能消耗）

• 👉当子组件的属性为非引用类型的中间状态时请用useMemo（减少渲染次数）

• 更正：当变量依赖一个可能会变的值，并且需要复杂的计算时，可以使用useMemo缓存计算结果（减少计算消耗）感谢吃山鬼的神仙大佬指正

• 👉当子组件的属性为函数时请用useCallback（减少渲染次数）

• 👉仅作用在当前组件范围内的属性，尽量不要使用useMemo和useCallback（减少调用）

好了今天的分享到这了，希望你也不要跟我一样再用错useMemo和useCallback了！