diff算法

diff策略

1. 忽略web ui中的DOM节点跨层级移动
2. 相同类型的组件产生的DOM结构也是相似的，不同类型的两个组件产生的DOM结构不同
3. 同一层级的一组子节点，通过分配唯一的id（key值）进行区分

优化

1. tree diff

   基于策略1，react将DOM Tree分层级，对于两个DOM Tree只比较同一个层次的节点，忽略跨层级移动操作，只比较同一个父节点下面的所有子节点。如果发现父节点不存在，则改父节点下面所有的子节点将会被删除，不做进一步的比较。这样只对DOM Tree进行一次遍历就能完成两棵Tree的比较。如果DOM节点出现了跨层级操作。diff只有创建节点和删除节点的操作。

2. component diff

   同一类型应用遵从tree diff比较

   不同类型组件，先将组件归类为脏组件，替换整个组件下的所有节点

   同一类型的v-dom没有变化，可使用shouldComponentUpdate来判断组件是否进行diff。比如组件A变成了组件B，但是在转换过程中，v-dom没有改变，可以优化。

3. element diff

   对于同一个层级的element节点，diff提供3种节点操作

   插入节点：

   组件C不在集合（A,B）中，需要插入

   移动节点：

   组件D在集合（A，B，C，D）中，而且集合更新了。D没有发生改变，只是在集合中的位置变化了，比如（A，D，B，C），D在第二个，如果没有key值，将会进行diff，进行集合间的比较，删除第二个位置的B，并在这个位置上插入D，如果是添加了key值，则只是移动就可以了。

   删除节点：

   组件D在（A，B，D）中，但是D发生了更改，不能复用和更新，删除D

   组件D在（A，B，D）中，但是集合发生了改变，（A，B），删除D

不足

假如将最后一个节点移到最前面来，那么将会导致，前面的节点一个一个移到后面去，很耗性能。

[参考]

小进进不将就--React之diff算法