深入理解React虚拟DOM

一、什么是虚拟DOM

虚拟DOM可以看做一棵模拟了DOM树的JavaScript对象树。比如：

 1 var element = {
 2     element: ‘ul‘,3     props: {
 4         id:"ulist"
 5     },6     children: [
 7     { element: ‘li‘,props: { id:"first" },children: [‘这是第一个List元素‘] },8     { element: ‘li‘,props: { id:"second" },children: [‘这是第二个List元素‘] }
 9     ]
10 }

二、为什么使用虚拟DOM

在传统的 Web 应用中，我们往往会把数据的变化实时地更新到用户界面中，于是每次数据的微小变动都会引起 DOM 树的重新渲染。

虚拟DOM的目的是将所有操作累加起来，统计计算出所有的变化后，统一更新一次DOM。

三、虚拟DOM的原理

当Node节点的更新，虚拟DOM会比较两棵DOM树的区别，保证最小化的DOM操作，使得执行效率得到保证。

计算两棵树的常规算法是O(n^3)级别，所以需要优化深度遍历的算法。React diff算法的时间复杂度为O(n)。

React diff 算法

?

React 分别对?tree diff、component diff?以及?element diff?进行算法优化。

1、tree diff

DOM 节点跨层级的移动操作少到可以忽略不计，针对这一现象，

React 通过 updateDepth 对 Virtual DOM 树进行层级控制，

只会对相同颜色方框内的 DOM 节点进行比较，即同一个父节点下的所有子节点。

当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。

这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。

2、component diff

• 如果是同一类型的组件，按照原策略继续比较 virtual DOM tree。

• 如果不是，则将该组件判断为 dirty component，从而替换整个组件下的所有子节点。

• 对于同一类型的组件，有可能其 Virtual DOM 没有任何变化，如果能够确切的知道这点那可以节省大量的 diff 运算时间，因此 React 允许用户通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。

?

当 component D 改变为 component G 时，即使这两个 component 结构相似，

一旦 React 判断 D 和 G 是不同类型的组件，就不会比较二者的结构，

而是直接删除 component D，重新创建 component G 以及其子节点。

3、element diff

节点处于同一层级时，React diff 提供了三种节点操作，分别为：INSERT_MARKUP（插入）、MOVE_EXISTING（移动）和?REMOVE_NODE（删除）。

新老集合所包含的节点，如下图所示，新老集合进行 diff 差异化对比，

通过 key 发现新老集合中的节点都是相同的节点，因此无需进行节点删除和创建，

只需要将老集合中节点的位置进行移动，更新为新集合中节点的位置，

此时 React 给出的 diff 结果为：B、D 不做任何操作，A、C 进行移动操作，即可。

总结

• React 通过制定大胆的 diff 策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题；

• React 通过分层求异的策略，对 tree diff 进行算法优化；

• React 通过相同类生成相似树形结构，不同类生成不同树形结构的策略，对 component diff 进行算法优化；

• React 通过设置唯一 key的策略，对 element diff 进行算法优化；