react diff

传统diff

通过循环递归对节点的依次对比，复杂度是O(n3)

react diff

react对传统diff进行了优化，将复杂度降为O(n)

react基于这几个前提对diff进行了优化：

• 忽略跨层级操作，因为DOM节点跨层级操作很少。
• 不同类的组件，则会生成不同的树形结构，相同类的组件，会生成相似的树形结构。
• 对同一层级的一组子节点，可以通过唯一key进行区分。

1 tree diff

只会对相同层级的DOM节点进行比较，只需要一次遍历，便可以完成整棵树的遍历。如果节点不存在，则该节点及其子节点都会被删掉，对于不同层级的节点，只有创建和删除操作。

2 component diff

• 针对同类型组件，按照tree diff策略对比。如果开发人员确切知道virtual DOM没有变化，react提供的shouldComponentUpdate()方法可以直接省去tree diff。
• 针对不同类型组件，则直接判断该组件为dirty component，从而替换整个组件下的所有子节点。

3 element diff

当节点处于同一层级，可能除夕只需要对这些节点进行移动，不需要每次都删除创建，react剔除添加唯一key来区分。react通过判断key是否存在相同节点，如果存在，再进行判断进行移动操作。不存在再进行相应的创建删除。

与vue的diff区别

• 判断2个节点是否相同：vue认为className不一样，就不同，react则认为相同，只是属性不同，只需要更新其属性。
• 同一层级对比：Vue从两端至中间对比，react从左至右对比。react策略存在短板，如果一个集合只吧最后一个移到第一个，react会移动前面所有节点，vue只移动最后一个节点到最前面。