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渲染方式，僅僅只更新時間元素節點。