React diff算法

传统的diff算法复杂度是O(n*3)，而React diff算法改进了传统的diff算法，将算法复杂度降低到了O(n)

diff 策略

• DOM节点跨层级少
• 不同组件生成不同DOM树
• 同一层级子节点，通过id区分

基于以上三个前提策略，React 分别对tree diff、component diff 、element diff 进行了算法优化

详解

tree diff

• 只会对同一层级（同一颜色）的节点进行比较，如果不同，则这个节点下的所有子节点都会被删除

  
  

• 如下图，如果将A节点的所有子节点都移动到D节点下面，对比的时候发现A节点不见了，就会删除A节点和所有子节点，然后在D节点下重新创建A节点

  
  

• 注意：在开发组件时，保持稳定的 DOM 结构会有助于性能的提升。例如，可以通过 CSS 隐藏或显示节点，而不是真的移除或添加 DOM 节点

component diff

• 比较组件的类型，如果是同一类型，则继续比较它们的element，如果是不同类型，则直接删除原有节点，增加新节点

• 如下图，当D节点改变为G节点时，尽管这两个组件结构相似，但是D和G是不同类型的组件，所以不会继续比较，而是直接删除D，重新创建G以及其子节点

  
  

element diff

• 遍历原有集合和新集合中节点的ID，进行移位操作，再进行修改

• 如下图，两个集合进行通过key进行对比，发现两个集合中的节点都是相同的节点，因此无需进行节点删除和创建，只需要将老集合中节点的位置进行移动，更新为新集合中节点的位置即可，此时React diff的结果是：B、D 不做任何操作，A、C 进行移动操作
  

  

一张图概括

• 

参考文章推荐
react精髓之一---diff算法
React 源码剖析系列 － 不可思议的 react diff