React的diff算法

React的diff算法主要是两个Tree的比较。

传统的Tree diff算法复杂度是O(n^3)，React是算法通过一些策略将复杂度将为O(n).

1. 优化策略

1. 网页中的DOM跨层级移动的特别少，可以忽略不计
2. 相同类型的组件生成相似的树形结构，不同类型的组件生成不同的树形结构
3. 同一层级的节点，可以通过唯一id来区分

2. 优化算法

基于以上的策略，React对diff算法进行了一下优化

1. tree diff

只对同一层级的节点进行比较，跨层级移动，直接销毁子树，在目的节点完全插入子树，这样只需对树进行一次遍历，便能完成整个DOM树的比较

2. component diff

1. 同一类型组件，按照tree diff进行同级比较，并且增加了shouldComponentUpdate钩子来判断组件是否发生变化，无变化，不比较，从而节省diff时间
2. 不同类型组件，将组件标记为dirty component，从而替换整个组件下的所有子节点

3. element diff

对于同一层级的element，通过唯一id，可以优化其新增，修改，删除操作

在开发React组件时，保持DOM结构的稳定有助于提示性能。

参考：https://segmentfault.com/a/1190000004913592
　　　https://segmentfault.com/a/1190000010686582