1.7 React渲染机制

React框架之所以大受欢迎，其特有的渲染机制是非常重要的因素之一。既然提到React渲染机制，那么就说一说Diff算法，该算法是支撑React渲染机制的核心技术之一。

Diff算法博大精深、涉及的知识点很多，建议感兴趣的读者找专业的算法书籍作深入学习。这里，笔者就尝试用通俗的语言来描述一下，通过Diff算法实现React渲染机制的过程。

Diff算法的核心就是通过比较找到DOM Tree前后的差异。React渲染机制的基本原理就是：在DOM Tree的状态和属性发生改变后，构造出新的虚拟DOM Tree，然后通过Diff算法与原始的虚拟DOM Tree进行比较，计算出变化的节点并进行更新操作。该算法的优势就是减少了对DOM的频繁重复操作，从而提升页面的访问性能。

为了验证React渲染机制是针对DOM Tree中的局部节点进行更新操作，我们看一个具体的代码实例：

【代码1-6】（详见源代码目录ch01-react-dom-render.html文件）

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

●第13行代码通过<div id="id-div-react">标签元素定义了一个层，用于显示通过React框架渲染的文本内容。

●第18~27行代码定义了一个自定义方法updateTime()，用于实现通过React渲染更新元素，具体内容如下：

► 第19~22行代码通过const关键字定义了一个常量（renderDiv），描述了要引入的容器节点<div>，包括一个<h3>标签元素用于定义标题和一个<p>标签元素定义的标题内容；同时，在<p>标签元素内使用花括号定义了一个时间对象，用于获取当前时间。

► 第24行代码获取了页面中要渲染的元素节点<div id="id-div-react">，保存在变量（divReact）中。

► 第26行代码调用React DOM对象的render()方法，将虚拟DOM（renderDiv）渲染到<div>层元素（divReact）中。

●第29行代码使用setInterval()方法设置了一个计时器，通过调用updateTime()方法实现定时（1000ms）渲染更新元素。

下面使用Firefox浏览器运行测试该HTML网页，具体效果如图1.11所示。如图上的箭头和标识所示，页面效果显示通过React渲染方式，仅仅只更新时间元素节点。