React diff算法
2017-08-12 本文已影响80人
07120665a058
传统的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 进行移动操作
