1.5 React虛擬DOM

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，二者的顯示效果是完全相同的。