react 虚拟 DOM Diff 算法

​ React 中最吸引开发人员的就是虚拟 DOM和高效的 Diff 算法，优化了因为多次刷新页面带来的性能问题，开发人员也无需频繁操作DOM，从性能角度来说有很大的提升。

• 什么是虚拟 DOM Diff 算法？

  ​ 在react中render执行的结果并不是真正的DOM节点，而是虚拟DOM，当页面发生变化时，需要通过Diff算法对比变化前后的虚拟DOM，从而更新视图。

  ​ 虚拟DOM Diff算法逐层进行节点对比，且仅对比同级节点；同一层次的一组子节点通过唯一Id进行区分；两个相同组件差生类似的DOM结构，不同的组件产生不同的DOM结构。

  

• 虚拟 DOM Diff 算法分析

  • 不同类型节点

    对比同一父节点下的所有子节点时，发现节点不存在，直接删除该节点，该节点下的子节点也会被删除；发现又增加的新节点，会创建并添加新节点至相应位置。

    例：如下图所示，我们需要作出这样的转换

  

  转换过程如下：

  D will unmount
  D is created
  C is updated
  A is updated
  D did mount
  B is updated
  R is updated
  

  • 相同类型节点

    • 类型相同，属性不同，直接重设属性

    • 列表节点的比较

      如下图所示，我们需要作出这样的转换

      

      没有设置唯一的key值，转换过程如下：

      C will unmount
      D will unmount
      D is created
      C is created
      D did mount
      C did mount
      A is updated
      R is updated
      

      已设置唯一的key值，转换过程如下：

      D is updated
      C is updated
      A is updated
      R is updated