从工作原理入手理解React五：useMemo

什么是useMemo

useMemo 是一种创建缓存的机制，在每次重新渲染的时候能够缓存计算的结果。通常通过useMemo缓存耗时计算的结果或者结合memo来实现记忆化组件。

为什么需要useMemo

为什么需要useMemo？我们从他的使用场景来分析，在上面我们提到了两个使用场景：

1. 缓存耗时的计算结果。在 《React核心内容和基本使用》 中介绍到React组件在更新时会重新渲染（执行渲染函数），有时候我们的渲染函数中会存在一些耗时的计算任务，这意味着在组件的每一次更新时都需要执行这个耗时任务来计算结果，导致应用性能下降。我们希望将计算结果缓存下来，通过条件来判断是否需要重新执行计算任务，如果不需要重新计，就直接使用缓存的计算结果，这样会显著提升渲染性能。
2. 结合memo实现记忆化组件。在《从工作原理入手理解React四：memo》中介绍到记忆化组件的实现机制和更新原理，我们在很多场景下都会将父组件中定义的数据（对象）通过prop传递给子组件，由于这些数据（对象）在父组件的每一次渲染时创建新的对象，导致记忆化组件失效（每次都是不同的prop）。在这样的场景中可以通过useMemo缓存父组件中的对象，让子组件实现记忆化。同样的原理，我们可以将useMemo使用到任何需要缓存数据的地方，如Effect的依赖数组等。

useMemo的基本使用

useMemo接受一个要缓存计算值的函数和依赖数组，返回计算值或者缓存值。在第一次渲染或者依赖项发生变化时，会调用缓存计算值的函数，并返回计算结果。更新时，若依赖项未发生改变，则返回缓存值。 useMemo的使用方式如下：

const MemoComponent = memo(({title}) => {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
});

function App() {
  const memoData = useMemo(() => {
    return {
      title: "hello",
    }
  }, []);
  return (
    <div>
      <MemoComponent title={memoData.title}/>
    </div>
  );
}