React框架的核心优势之一，就是支持创建虚拟DOM来提高页面性能。那么，什么是虚拟DOM呢？其实，虚拟DOM这个概念很早就被提出来了，是相对于实际DOM而言的。

设计人员在设计传统HTML网页的UI时，都会在页面中定义若干的DOM元素，这些DOM元素是所谓的实际DOM。通常，页面中的实际DOM负责承载着外观表现和数据变化，任何外观形式的改变或数据信息的更新都要反馈到UI上，都是需要通过操作实际DOM来实现的。

于是，问题也就自然出现了。对于复杂的页面UI而言，往往会定义大量的实际DOM。频繁地操作大量实际DOM，往往会带来访问性能的严重下降，用户体验也会随之变差，这些都是设计人员所不希望看到的。因此，React框架专门针对这个现象引入了虚拟DOM机制，以避免频繁的DOM操作带来的性能下降问题。

React DOM类似于一种将相关的实际DOM组合在一起的集合，是有区别于传统概念上的DOM元素的，如果将其理解为DOM组件应该更为贴切。因此，React框架将React DOM称为虚拟DOM。

为了更好地让读者理解虚拟DOM的概念，我们分别以两种DOM方式来实现效果相同的页面，通过实际代码的区别来进行对比。有趣的是，在HTML DOM和React DOM语法中均定义了一个createElement()方法用来创建元素。当然，HTML DOM语法中的createElement()方法创建的是一个实际DOM，而React DOM中的createElement()方法创建的却是一个虚拟DOM。

下面先看一个通过HTML DOM语法中的createElement()方法创建实际DOM的代码实例，具体如下：

【代码1-3】（详见源代码目录ch01-js-createElement.html文件）

关于【代码1-3】的说明：

• 第09行代码通过<div id='id-div-react'>标签元素定义了一个层，用于显示通过JavaScript创建实际DOM的容器。
• 第14~21行代码用于在层容器<div id='id-div-react'>中创建实际DOM节点，具体内容如下：

• ►　第14行代码调用Document对象的createElement()方法，创建了一个<span>元素节点。
• ►　第15~16行代码调用Document对象的createElement()方法，创建了一个<h3>元素节点，并定义了文本内容。
• ►　第17~18行代码再次调用Document对象的createElement()方法，创建了一个<p>元素节点，同样定义了文本内容。
• ►　第19~20行代码分别调用appendChild()方法，将<h3>和<p>元素节点填充进<span>元素节点内。
• ►　第21行代码再次调用appendChild()方法，将<span>元素节点填充进层容器<div id='id-div-react'>内，从而实现创建实际DOM的操作。

下面使用Firefox浏览器运行测试该HTML网页，具体效果如图1.8所示。

下面再看一个使用React DOM语法中的createElement()方法，以虚拟DOM方式实现的代码实例，具体如下：

【代码1-4】（详见源代码目录ch01-react-createElement.html文件）

关于【代码1-4】的说明：

• 第13行代码通过<div id='id-div-react'>标签元素定义了一个层，用于显示通过React创建虚拟DOM的容器。
• 第14~22行定义的脚本代码用于实现React虚拟DOM，具体内容如下：
  • ►　需要注意一点，第14行代码中的<script>标签元素内，type属性类型定义为"text/babel"，表示内部的脚本代码要使用React框架进行解析。
  • ►　第16行代码先获取了层<div id='id-div-react'>容器对象（divReact）。
  • ►　第18行和第19行代码调用React DOM对象的createElement()方法，分别创建了一个<h3>元素节点（reactH3）和一个<p>元素节点（reactP），并相应定义了文本内容。
  • ►　第20行代码调用React DOM对象的createElement()方法，创建了一个<span>元素节点（reactSpan），然后将刚刚创建的<h3>元素节点（reactH3）和<p>元素节点（reactP）填充进去。
  • ►　第21行代码调用React DOM对象的render()方法，将<span>元素节点（reactSpan）渲染到层<div id='id-div-react'>容器对象（divReact）中进行显示。

下面使用Firefox浏览器运行测试该HTML网页，具体效果如图1.9所示。

如图1.8和图1.9中的箭头和标识所示，通过HTML DOM创建的实际DOM与通过React DOM渲染出来的虚拟DOM，二者的显示效果是完全相同的。 0xiP1aSQGxo8J93xPbUknoFC187Z4CqBwTnnIQh5MnB/OJKS/A06geOauLTka1uV