REACT的DIFF算法与虚拟DOM
1、什么是虚拟DOM
VDOM就是js数据结构，用js对象构建一棵虚拟DOM树，VDOM和真实DOM结构之前有一个映射关系
2、原生DOM慢的原因
浏览器收到一个DOM操作，就会走一遍完整的渲染流程，像计算元素坐标的操作就会浪费掉，因为下次DOM操作可能会改变之前计算的坐标
3、VDOM渲染方式
利用batching把所有的DOM操作收集起来，一次性提交给真实的DOM，diff算法通过对比新旧虚拟DOM,记录之间的差异
中心思想：在一个不在render tree的元素统一统计所有操作，再把节点加到render tree上，这样复杂的DOM操作最后就只进行一次layout
4、虚拟DOM的基本步骤
1、用js对象构建一个虚拟DOM树，然后用虚拟树构建一个真实的DOM树，然后插入到文档中
2、当状态变更时，重新构建一个新的对象树(还是虚拟DOM树)，和旧的对比，记录差异
3、把差异应用到构建的真实DOM树上，视图更新
5、diff算法（基本粒度：标签）
1、传统算法
对比该节点的前后两个节点，若该节点改变，会继续比较该节点的子节点，一层一层对比，循环进行，复杂度就到了n的3次方
2、react算法
只比较同层次的节点（同一个父节点下的所有子节点，分层次），如果发现节点不存在了，就完全删除该节点及其子节点，不进行比较，，只需要对树进行一次遍历，就能把整个DOM树比较。复杂度为n
3、跨层级操作
react不会判断出是移动，而是直接销毁，重新创建。再挂在目标的DOM树上，官方也不推荐我们做出跨层级的骚操作
4、组件之间的比较
同一类型组件，按照VDOM原策略比较（会update）
不是同一类型，判断其为脏组件销毁掉，直接替换整个组件下的所有子节点
5、同一层级根据key在老集合查找是有相同元素，找到后比较进行类型比较，类型不同直接销毁创建，类型相同更新部分内容
原文：https://www.cnblogs.com/lijinxiao/p/15151429.html