這次帶給大家怎樣使用React虛擬DOM，使用React虛擬DOM的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

在Web開發(fā)中，需要將資料的變化即時(shí)反映到UI上，這時(shí)就需要對(duì)DOM進(jìn)行操作，但是複雜或頻繁的DOM操作通常是效能瓶頸產(chǎn)生的原因，為此，React引入了虛擬DOM（Virtual DOM）的機(jī)制。

一、什麼是虛擬DOM？

在React中，render執(zhí)行的結(jié)果得到的並不是真正的DOM節(jié)點(diǎn)，結(jié)果只是輕量級(jí)的JavaScript物件，我們稱之為virtual DOM。

虛擬DOM是React的一大亮點(diǎn)，具有batching(批次)和高效的Diff演算法。這讓我們可以無需擔(dān)心效能問題而」毫無顧忌」的隨時(shí)「刷新」整個(gè)頁面，由虛擬 DOM來確保只對(duì)介面上真正變化的部分進(jìn)行實(shí)際的DOM操作。在實(shí)際開發(fā)中基本上不需要關(guān)心虛擬DOM是如何運(yùn)作的，但是理解其運(yùn)行機(jī)制不僅有助於更好的理解React組件的生命週期，而且對(duì)於進(jìn)一步優(yōu)化React程式也會(huì)有很大幫助。

二、虛擬DOM VS 直接操作原生DOM？

如果沒有 Virtual DOM，簡單來說就是直接重置 innerHTML。這樣操作，在一個(gè)大型列表所有資料都變了的情況下，還算是合理，但是，當(dāng)只有一行資料發(fā)生變化時(shí)，它也需要重置整個(gè) innerHTML，這時(shí)候顯然就造成了大量浪費(fèi)。

比較innerHTML 和Virtual DOM 的重繪過程如下：

innerHTML: render html string 重新建立所有DOM 元素

Virtual DOM: render Virtual DOM diff 必要的DOM 更新

和DOM 運(yùn)算比起來，js 計(jì)算是非常便宜的。 Virtual DOM render diff 顯然比渲染 html 字串慢，但是，它依然是純 js 層面的計(jì)算，比起後面的 DOM 操作來說，依然便宜了太多。當(dāng)然，曾有人做過驗(yàn)證說React的性能不如直接操作真實(shí)DOM，程式碼如下：

function?Raw()?{
??var?data?=?_buildData(),
????html?=?"";
??...
??for(var?i=0;?i<data.length; i++) {
    var render = template;
    render = render.replace("{{className}}", "");
    render = render.replace("{{label}}", data[i].label);
    html += render;
  }
  ...
  container.innerHTML = html;
  ...
}

該測(cè)試用例中雖然建構(gòu)了一個(gè)包含1000個(gè)Tag的String，並把它加到DOM樹中，但是只做了一次DOM操作。然而，在實(shí)際開發(fā)過程中，這1000個(gè)元素更新可能分佈在20個(gè)邏輯塊中，每個(gè)邏輯塊中包含50個(gè)元素，當(dāng)頁面需要更新時(shí)，都會(huì)引起DOM樹的更新，上述程式碼就近似變成瞭如下格式：

function Raw() {
  var data = _buildData(), 
    html = ""; 
  ... 
  for(var i=0; i<data.length; i++) { 
    var render = template; 
    render = render.replace("{{className}}", ""); 
    render = render.replace("{{label}}", data[i].label); 
    html += render; 
    if(!(i % 50)) {
      container.innerHTML = html;
    }
  } 
  ... 
}

這樣來看，React的效能就遠(yuǎn)勝於原生DOM操作了。

而且，DOM 完全不屬於Javascript (也不在Javascript 引擎中存在).。 Javascript 其實(shí)是一個(gè)很獨(dú)立的引擎，DOM其實(shí)是瀏覽器引出的一組讓Javascript操作HTML文件的API而已。在即時(shí)編譯的時(shí)代，呼叫DOM的開銷是很大的。而Virtual DOM的執(zhí)行完全都在Javascript 引擎中，完全不會(huì)有這個(gè)開銷。

React.js 相對(duì)於直接操作原生DOM有很大的效能優(yōu)勢(shì)， 很大程度上都要?dú)w功於virtual DOM的batching 和diff。 batching把所有的DOM操作蒐集起來，一次提交給真實(shí)的DOM。 diff演算法時(shí)間複雜度也從標(biāo)準(zhǔn)的Diff演算法的O(n^3)降到了O(n)。這裡留到下次部落格單獨(dú)講。

三、虛擬DOM VS MVVM？

相比起React，其他MVVM 系框架例如Angular, Knockout 以及Vue、Avalon 採用的都是資料綁定：透過Directive/Binding 對(duì)象，觀察資料變化並保留對(duì)實(shí)際DOM 元素的引用，當(dāng)有資料變化時(shí)進(jìn)行對(duì)應(yīng)的操作。 MVVM 的變化檢查是資料層面的，而 React 的檢查是 DOM 結(jié)構(gòu)層面的。 MVVM 的效能也根據(jù)變動(dòng)偵測(cè)的實(shí)作原理有所不同：Angular 的髒檢查使得任何變動(dòng)都有固定的O(watcher count) 的代價(jià)；Knockout/Vue/Avalon 都採用了依賴收集，在js 和DOM 層面都是O(change)：

1. 髒檢查：scope digest 必要DOM 更新

2. 依賴收集：重新收集依賴必要DOM 更新

可以看到，Angular 最不效率的地方在於任何小變動(dòng)都有的和 watcher 數(shù)量相關(guān)的效能代價(jià)。但是！當(dāng)所有數(shù)據(jù)都改變了的時(shí)候，Angular 其實(shí)並不吃虧。依賴收集在初始化和資料變化的時(shí)候都需要重新收集依賴，這個(gè)代價(jià)在小量更新的時(shí)候幾乎可以忽略，但在資料量龐大的時(shí)候也會(huì)產(chǎn)生一定的消耗。

MVVM 渲染清單的時(shí)候，由於每一行都有自己的資料作用域，所以通常都是每一行都有一個(gè)對(duì)應(yīng)的ViewModel 實(shí)例，或者是一個(gè)稍微輕量一些的利用原型繼承的"scope " 對(duì)象，但也有一定的代價(jià)。所以，MVVM 清單渲染的初始化幾乎一定比 React 慢，因?yàn)榻?ViewModel / scope 實(shí)例比起 Virtual DOM 來說要昂貴很多。這裡所有 MVVM 實(shí)作的一個(gè)共同問題就是在清單渲染的資料來源變動(dòng)時(shí)，尤其是當(dāng)資料是全新的物件時(shí)，如何有效地重複使用已建立的 ViewModel 實(shí)例和 DOM 元素。假如沒有任何復(fù)用方面的最佳化，由於資料是 「全新」 的，MVVM 實(shí)際上需要銷毀之前的所有實(shí)例，重新建立所有實(shí)例，最後再進(jìn)行一次渲染！這就是為什麼題目裡連結(jié)的 angular/knockout 實(shí)作都相對(duì)比較慢。相較之下，React 的變動(dòng)檢查由於是 DOM 結(jié)構(gòu)層面的，即使是全新的數(shù)據(jù)，只要最後渲染結(jié)果沒變，那麼就不需要做無用功。

Angular 和 Vue 都提供了清單重繪的最佳化機(jī)制，也就是 「提示」 框架如何有效地重複使用實(shí)例和 DOM 元素。例如資料庫裡的同一個(gè)對(duì)象，在兩次前端 API 呼叫裡面會(huì)成為不同的對(duì)象，但是它們還是有一樣的 uid。這時(shí)候你就可以提示 track by uid 來讓 Angular 知道，這兩個(gè)物件其實(shí)是同一份資料。那麼原來這份資料對(duì)應(yīng)的實(shí)例和 DOM 元素都可以重複使用，只需要更新變動(dòng)了的部分?；蛘?，你也可以直接 track by $index 來進(jìn)行 “原地復(fù)用”：直接根據(jù)在數(shù)組裡的位置進(jìn)行複用。在題目所舉的例子裡，如果 angular 實(shí)作加上 track by $index 的話，後續(xù)重繪是不會(huì)比 React 慢多少的。甚至在dbmonster 測(cè)試中，Angular 和Vue 用了track by $index 以後都比React 快: dbmon (注意Angular 預(yù)設(shè)版本無優(yōu)化，優(yōu)化過的在下面）

#在比較效能的時(shí)候，要分清楚初始渲染、小量資料更新、大量資料更新這些不同的場(chǎng)合。 Virtual DOM、髒檢查 MVVM、資料收集 MVVM 在不同場(chǎng)合各有不同的表現(xiàn)和不同的最佳化需求。 Virtual DOM 為了提升小量資料更新時(shí)的效能，也需要針對(duì)性的最佳化，例如 shouldComponentUpdate 或是 immutable data。

1. 初始渲染：Virtual DOM > 髒檢查>= 依賴收集

2. 小量資料更新：依賴收集>> Virtual DOM 優(yōu)化> 髒檢查（無法優(yōu)化） > Virtual DOM 無優(yōu)化

3. 大量資料更新：髒檢查優(yōu)化>= 依賴收集優(yōu)化> Virtual DOM（無法/無需優(yōu)化)>> MVVM 無最佳化

4. （該段落借鑒了知乎的相關(guān)答案）

## 四、對(duì)React虛擬DOM的誤解？

React 從來沒有說過 「React 比原生操作 DOM 快」。 React給我們的保證是，在不需要手動(dòng)優(yōu)化的情況下，它依然可以提供我們過得去的效能。
React掩蓋了底層的 DOM 操作，可以用更宣告式的方式來描述我們目的，讓程式碼更容易維護(hù)。以下也藉鑒了知乎上的回答：沒有任何框架可以比純手動(dòng)的優(yōu)化 DOM 操作更快，因?yàn)榭蚣艿?DOM 操作層需要應(yīng)對(duì)任何上層 API 可能產(chǎn)生的操作，它的實(shí)作必須是普適的。針對(duì)任何一個(gè) benchmark，我都可以寫出比任何框架更快的手動(dòng)優(yōu)化，但是那有什麼意義呢？在建立一個(gè)實(shí)際應(yīng)用的時(shí)候，你難道為每個(gè)地方都去做手動(dòng)優(yōu)化嗎？出於可維護(hù)性的考慮，這顯然不可能。
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
推薦閱讀：

微信小程式內(nèi)實(shí)作上傳圖片附後端程式碼


微信小程式上傳圖片實(shí)戰(zhàn)案例解析


以上是怎麼使用React虛擬DOM的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！