从工作原理入手理解React四：memo

什么是memo

memo 是React中优化渲染性能的一种机制，通过memo包裹的组件，可以在prop没有改变的前提下，跳过组件的重新渲染，从而达到优化渲染性能的目的。

为什么需要memo

为什么需要memo？在前文《React核心内容和基本使用》中提到触发组件更新流程的一种方式是父组件更新会触发子组件更新，即使子组件的prop没有发生变化也会更新，这里的“更新”是指重新render。当子组件的更新比较耗时时，这种更新机制会带来不必要的性能开销，导致性能问题。在这种情况下，我们希望某些性能开销比较大的组件在prop没有发生改变时，跳过组件的更新。这就是memo的使用场景和要解决的问题。

如何使用memo

memo是一个函数，接收一个函数组件和一个可选的比较函数，返回记忆化组件。判断函数接收新旧prop，React根据比较函数返回值判断使用记忆化组件还是重新渲染，通常情况下不需要自定义判断函数，React内部会通过Object.is来判断新旧prop。使用代码示例如下：

//创建记忆化组件
const MemoComponent = memo(({title}) => {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
});

function App() {
  return (
    <div>
      <MemoComponent title="hello"/>
    </div>
  );
}

注意事项

通常情况下子组件的重新render不会存在性能问题，应合理的使用memo进行性能优化，在使用memo前应确定影响性能的具体问题。过度使用memo缓存也会导致内存的占用过高。