React中虚拟dom与diff算法的讲解（附代码）
本篇文章给大家带来的内容是关于React中虚拟dom与diff算法的讲解（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
虚拟dom
Jsx 表面写的是html，其实内部执行的是一段js
createElement
React.createElement( type, [props], [...children] )
createElement把这个树形结构，存在内存里面
Jsx最终以这样的一个个对象递归的存在内存中，执行diff算法。
多层结构
简单的createElement实现
reactElement - 生成的是一个对象来描述这个节点
react diff
与传统树的diff的区别
计算一棵树形结构转换成另一棵树形结构的最少操作，是一个复杂且值得研究的问题。传统 diff 算法通过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n^3)
react diff策略
Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。
拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。
对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。
tree diff
基于策略一，对树进行分层比较，两棵树只会对同一层次的节点进行比较。
React 通过 updateDepth 对 Virtual DOM 树进行层级控制，同一个父节点下的所有子节点。
什么是 DOM 节点跨层级的移动操作？
A 节点（包括其子节点）整个被移动到 D 节点下
如果出现了 DOM 节点跨层级的移动操作，React diff 会有怎样的表现呢？
React 只会简单的考虑同层级节点的位置变换，而对于不同层级的节点，只有创建和删除操作。
当根节点发现子节点中 A 消失了，就会直接销毁 A；当 D 发现多了一个子节点 A，则会创建新的 A（包括子节点）作为其子节点。此时，React diff 的执行情况：create A -> create B -> create C -> delete A。
注意：
在开发组件时，保持稳定的 DOM 结构会有助于性能的提升。例如，可以通过 CSS 隐藏或显示节点，而不是真的移除或添加 DOM 节点。
component diff
依据策略二
如果是同一类型的组件，按照原策略继续比较 virtual DOM tree。
如果不是，则将该组件判断为 dirty component，从而替换整个组件下的所有子节点。
对于同一类型的组件，有可能其 Virtual DOM 没有任何变化，如果能够确切的知道这点那可以节省大量的 diff 运算时间，因此 React 允许用户通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。
React 判断 D 和 G 是不同类型的组件，就不会比较二者的结构，而是直接删除 component D，重新创建 component G 以及其子节点，即使D 和 G的结构很相似
element diff
当节点处于同一层级时，React diff 提供了三种节点操作，分别为：INSERT_MARKUP（插入）、MOVE_EXISTING（移动）和 REMOVE_NODE（删除）。
INSERT_MARKUP，新的 component 类型不在老集合里， 即是全新的节点，需要对新节点执行插入操作。
MOVE_EXISTING，在老集合有新 component 类型，且 element 是可更新的类型，generateComponentChildren 已调用 receiveComponent，这种情况下 prevChild=nextChild，就需要做移动操作，可以复用以前的 DOM 节点。
REMOVE_NODE，老 component 类型，在新集合里也有，但对应的 element 不同则不能直接复用和更新，需要执行删除操作，或者老 component 不在新集合里的，也需要执行删除操作。
eg: 新老集合进行 diff 差异化对比，发现 B != A，则创建并插入 B 至新集合，删除老集合 A；以此类推，创建并插入 A、D 和 C，删除 B、C 和 D。
带来的问题：都是相同的节点，但由于位置发生变化，导致需要进行繁杂低效的删除、创建操作，其实只要对这些节点进行位置移动即可
react优化策略：允许开发者对同一层级的同组子节点，添加唯一 key 进行区分
优化后diff实现：
对新集合的节点进行循环遍历，通过唯一 key 可以判断新老集合中是否存在相同的节点
如果存在相同节点，则进行移动操作，但在移动前需要将当前节点在老集合中的位置child._mountIndex与lastIndex(访问过的节点在老集合中最右的位置即最大的位置)进行比较，if (child._mountIndex < lastIndex)，则进行节点移动操作
分析：
element _mountIndex lastIndex nextIndex enqueueMove B 1 0 0 false A 0 1 1 true D 3 1 2 false C 2 3 3 true
