react diff算法浅析

diff算法做为Virtual DOM的加速器，其算法的改进优化是React整个界面渲染的基础和性能的保障，同时也是React源码中最神秘的，最难以想象的部分

1.传统diff算法
计算一棵树形结构转换为另外一棵树形结构须要最少步骤，若是使用传统的diff算法经过循环递归遍历节点进行对比，其复杂度要达到O(n^3)，其中n是节点总数，效率十分低下，假设咱们要展现1000个节点，那么咱们就要依次执行上十亿次的比较。

下面附上一则简单的传统diff算法：

let result = [];
// 比较叶子节点
const diffLeafs = function (beforeLeaf, afterLeaf) {
// 获取较大节点树的长度
let count = Math.max(beforeLeaf.children.length, afterLeaf.children.length);
// 循环遍历
for (let i = 0; i < count; i++) {
const beforeTag = beforeLeaf.children[i];
const afterTag = afterLeaf.children[i];
// 添加 afterTag 节点
if (beforeTag === undefined) {
result.push({ type: "add", element: afterTag });
// 删除 beforeTag 节点
} else if (afterTag === undefined) {
result.push({ type: "remove", element: beforeTag });
// 节点名改变时，删除 beforeTag 节点，添加 afterTag 节点
} else if (beforeTag.tagName !== afterTag.tagName) {
result.push({ type: "remove", element: beforeTag });
result.push({ type: "add", element: afterTag });
// 节点不变而内容改变时，改变节点
} else if (beforeTag.innerHTML !== afterTag.innerHTML) {
if (beforeTag.children.length === 0) {
result.push({
type: "changed",
beforeElement: beforeTag,
afterElement: afterTag,
html: afterTag.innerHTML
});
} else {
// 递归比较
diffLeafs(beforeTag, afterTag);
}
}
}
return result;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2.react diff算法
1. diff策略
下面介绍一下react diff算法的3个策略

Web UI 中DOM节点跨层级的移动操做特别少，能够忽略不计
拥有相同类的两个组件将会生成类似的树形结构，拥有不一样类的两个组件将会生成不一样的树形结构。
对于同一层级的一组子节点，它们能够经过惟一id进行区分。
对于以上三个策略，react分别对tree diff,component diff,element diff进行算法优化。

2.tree diff
基于策略一，WebUI中DOM节点跨层级的移动操做少的能够忽略不计，React对Virtual DOM树进行层级控制，只会对相同层级的DOM节点进行比较，即同一个父元素下的全部子节点，当发现节点已经不存在了，则会删除掉该节点下全部的子节点，不会再进行比较。这样只须要对DOM树进行一次遍历，就能够完成整个树的比较。复杂度变为O(n);

疑问：当咱们的DOM节点进行跨层级操做时，diff会有怎么样的表现呢？

以下图所示，A节点及其子节点被整个移动到D节点下面去，因为React只会简单的考虑同级节点的位置变换，而对于不一样层级的节点，只有建立和删除操做，因此当根节点发现A节点消失了，就会删除A节点及其子节点，当D发现多了一个子节点A，就会建立新的A做为其子节点。
此时，diff的执行状况是：

createA-->createB-->createC-->deleteA
1

由此能够发现，当出现节点跨层级移动时，并不会出现想象中的移动操做，而是会进行删除，从新建立的动做，这是一种很影响React性能的操做。所以官方也不建议进行DOM节点跨层级的操做。

3.componnet diff
React是基于组件构建应用的，对于组件间的比较所采用的策略也是很是简洁和高效的。

若是是同一个类型的组件，则按照原策略进行Virtual DOM比较。
若是不是同一类型的组件，则将其判断为dirty component，从而替换整个组价下的全部子节点。
若是是同一个类型的组件，有可能通过一轮Virtual DOM比较下来，并无发生变化。若是咱们可以提早确切知道这一点，那么就能够省下大量的diff运算时间。所以，React容许用户经过shouldComponentUpdate()来判断该组件是否须要进行diff算法分析。
以下图所示，当组件D变为组件G时，即便这两个组件结构类似，一旦React判断D和G是不用类型的组件，就不会比较二者的结构，而是直接删除组件D，从新建立组件G及其子节点。虽然当两个组件是不一样类型但结构类似时，进行diff算法分析会影响性能，可是毕竟不一样类型的组件存在类似DOM树的状况在实际开发过程当中不多出现，所以这种极端因素很难在实际开发过程当中形成重大影响。

4.element diff
当节点属于同一层级时，diff提供了3种节点操做，分别为INSERT_MARKUP(插入)，MOVE_EXISTING(移动),REMOVE_NODE(删除)。

INSERT_MARKUP:新的组件类型不在旧集合中，即全新的节点，须要对新节点进行插入操做。MOVE_EXISTING:旧集合中有新组件类型，且element是可更新的类型，这时候就须要作移动操做，能够复用之前的DOM节点。REMOVE_NODE:旧组件类型，在新集合里也有，但对应的element不一样则不能直接复用和更新，须要执行删除操做，或者旧组件不在新集合里的，也须要执行删除操做。