React | 认识Virtual DOM

2018-02-26 本文已影响132人夏海峰

提起Virtual DOM，总是给人一种高深莫测的感觉，大家都知道它比DOM快。那么Virtual DOM到底是何方神圣呢？在深入理解Virtual DOM之前，先让我们回顾一下DOM。

一、什么DOM?

所谓DOM，就是HTML、XML、XHTML的一种抽象描述，它会把这些文档抽象成树类型的数据结构，即DOM tree。树的每一个节点，即一个DOM节点。浏览器提供了众多的DOM API，让它拥有了DOM操作的神奇魔力。

dom操作.png

二、Virtual DOM出现的背景

由于SPA类型项目的出现，DOM tree的结构变得越来越复杂，它的改变也变得越来越频繁，大量的DOM操作产生了，对DOM节点的增删改，还有许多的事件监听、事件回调、事件销毁需要处理。由于DOM tree结构的频繁变化，会导致大量的reflow从而影响性能。于是Virtual DOM就出现了。

三、什么是Virtual DOM？

DOM结构是一系列的属性和方法的集合。所谓Virtual DOM，就是用轻量级的JavaScript对象来代替庞杂的DOM结构。下面代码就展示了HTML结构和Virtual DOM之间的关系。

2-真实DOM结构.png

3-虚拟DOM.png

四、用JSX语法表示Virtual DOM

JSX是一种创建ReactElement的便捷写法。ReactElement是一种轻量级的、无状态的、不可改变的、DOM元素的虚拟表示。实际上也是用一个JavaScript对象来描述DOM结构。

4-jsx.png

五、render方法

在第四步中，我们看到使用render方法，可以把Virtual DOM渲染到真实的DOM中，那么render方法中到底做了什么呢？

5-render.png

六、Diff算法

通过以上步骤，我们大致理解了Virtual DOM和真实DOM之间的关系，以及render方法是如何把Virtual DOM渲染到真实的DOM中。所谓Virtual DOM只不过就是DOM结构的JavaScript对象描述而已。那么它为什么会比DOM更高效、速度更快呢？

有了Virtual DOM，当发生任何更新的时候，这些变更都会发生在Virtual DOM上，即发生在一种轻量级的JavaScript对象上。当任何变更发生后，就会生成一颗新的Virtual DOM树。Diff算法，即是对这新旧两颗Virtual DOM进行计算，从而计算出它们之间的差异。最后再把这些差异渲染到真实的DOM中。通过这种方式，大大地减少了真实DOM操作，所以更高效、速度更快。

现在用伪代码来总结一下整个流程。