React diff 算法 & Virtual DOM

将Virtual DOM（虚拟Dom）树转换成Actual DOM（真实Dom）树的最少操作的过程，叫作调和。diff算法是调和的具体实现，将O(n^3)复杂度 转化为 O(n)复杂度。
diff算法原则：

• 分层同级比较，不跨层比较；
• 相同的组件生成的DOM结构类似；
• 分组内的同级节点通过唯一的id进行区分（key）

不同类型节点比较

逐层比较，不同类型节点直接替换，组件经历unmount，mount

同类型，不同属性节点比较

同类型节点一般会出现以下几种形式更新：

1. 插入新的同级节点
2. 删除同级节点
3. 同级节点交换位置
4. 更新节点属性

节点移动规则：index>lastIndex时，max(index,lastIndex)进行移动。index表示元素在旧树中的同级标记位置，lastIndex表示新树当前遍历元素。若在旧树种找不到节点，则直接插入；遍历完成后，查找新树中存在，且在旧树中不存在的节点进行删除。所以同级节点添加唯一的key进行区分至关重要，直接决定react组件的性能

diff算法需要改进的地方：列表尾部节点移动到列表首部时，需要移动元素(list.length-1)次。实际开发中，尽量避免列表尾部元素直接移动到首部的更新操作，在列表数据很庞大时，直接影响组件性能。