1.4.3 Virtual DOM

既然React應用就是通過重復渲染來實現用戶交互，你可能會有一個疑慮：這樣的重復渲染會不會效率太低了呢？畢竟，在jQuery的實現方式中，我們可以清楚地看到每次只有需要變化的那一個DOM元素被修改了；可是，在React的實現方式中，看起來每次render函數被調用，都要把整個組件重新繪制一次，這樣看起來有點浪費。

事實并不是這樣，React利用Virtual DOM，讓每次渲染都只重新渲染最少的DOM元素。

要了解Virtual DOM，就要先了解DOM, DOM是結構化文本的抽象表達形式，特定于Web環境中，這個結構化文本就是HTML文本，HTML中的每個元素都對應DOM中某個節點，這樣，因為HTML元素的逐級包含關系，DOM節點自然就構成了一個樹形結構，稱為DOM樹。

瀏覽器為了渲染HTML格式的網頁，會先將HTML文本解析以構建DOM樹，然后根據DOM樹渲染出用戶看到的界面，當要改變界面內容的時候，就去改變DOM樹上的節點。

Web前端開發關于性能優化有一個原則：盡量減少DOM操作。雖然DOM操作也只是一些簡單的JavaScript語句，但是DOM操作會引起瀏覽器對網頁進行重新布局，重新繪制，這就是一個比JavaScript語句執行慢很多的過程。

如果使用mustache或者hogan這樣的模板工具，那就是生成HTML字符串塞到網頁中，瀏覽器又要做一次解析產生新的DOM節點，然后替換DOM樹上對應的子樹部分，這個過程肯定效率不高。雖然JSX看起來很像是一個模板，但是最終會被Babel解析為一條條創建React組件或者HTML元素的語句，神奇之處在于，React并不是通過這些語句直接構建DOM樹，而是首先構建Virtual DOM。

既然DOM樹是對HTML的抽象，那Virtual DOM就是對DOM樹的抽象。Virutal DOM不會觸及瀏覽器的部分，只是存在于JavaScript空間的樹形結構，每次自上而下渲染React組件時，會對比這一次產生的Virtual DOM和上一次渲染的Virtual DOM，對比就會發現差別，然后修改真正的DOM樹時就只需要觸及差別中的部分就行。

以ClickCounter為例，一開始點擊計數為0，用戶點擊按鈕讓點擊計數變成1，這一次重新渲染，React通過Virtual DOM的對比發現其實只是id為clickCount的span元素中內容從0變成了1而已：

<span id=”clickCount”>{this.state.count}</span>

React發現這次渲染要做的事情只是更換這個span元素的內容而已，其他DOM元素都不需要觸及，于是執行類似下面的語句，就完成了任務：

document.getElementById("clickCount").innerHTML = "1";

React對比Virtual DOM尋找差異的過程比較復雜，在第5章，我們會詳細介紹對比的過程。