React.memo()在什么时机对组件的props进行比较？

• 先澄清一个常见误解：默认情况下，父组件触发重渲染时，不管子组件的props有没有变化，子组件都会先重新评估——比如函数组件会完整执行一遍，类组件会调用render方法生成新的虚拟DOM。之后React会通过diff算法对比新旧虚拟DOM，若完全一致，就不会更新真实DOM（也就是跳过“提交渲染”步骤），但组件本身已经完成了重新评估。

• React.memo()的核心作用，是把props对比的时机提前到组件重新评估之前：

  • 它会缓存子组件上一次接收的props，当父组件试图触发子组件更新时，先对比新旧props（默认是浅比较，也可以传入自定义的比较函数）
  • 若props没有变化，直接复用之前的虚拟DOM，完全跳过组件的重新评估环节，省去了执行组件代码、生成新虚拟DOM的开销
  • 若props发生变化，才会进入组件重新评估流程，之后再走虚拟DOM对比、真实DOM更新的常规步骤

简单来说，默认流程是「先评估组件→再对比虚拟DOM→决定是否更新真实DOM」；而React.memo()的流程是「先对比props→决定是否要评估组件→后续流程按需执行」。

内容的提问来源于stack exchange，提问作者Naing Linn Khant