虛擬DOM與DIFF算法

前言：虛擬DOM（Virtual dom），也就是咱們常說的虛擬節點，它是經過JS的Object對象模擬DOM中的節點，而後再經過特定的render方法將其渲染成真實的DOM的節點。

例子：

// 建立虛擬節點
var temp = document.createDocumentFragment();

for( var i=0; i<100; i++ ){
    var li = document.createElement('li');
    // 將li放入虛擬節點中，這一步操做不會產生重繪迴流
    temp.appendChild(li);
    li.innerHTML = i;
}

// 真實節點的操做
ul1.appendChild(temp);

 

一：react 的虛擬dom是怎麼實現的

首先說說爲何要使用Virturl DOM，由於操做真實DOM的耗費的性能代價過高，因此react內部使用js實現了一套dom結構，
在每次操做在和真實dom以前，使用實現好的diff算法，對虛擬dom進行比較，遞歸找出有變化的dom節點，而後對其進行更新操做。
爲了實現虛擬DOM，咱們須要把每一種節點類型抽象成對象，每一種節點類型有本身的屬性，也就是prop，每次進行diff的時候，react會先比較該節點類型，
假如節點類型不同，那麼react會直接刪除該節點，而後直接建立新的節點插入到其中，假如節點類型同樣，那麼會比較prop是否有更新，假若有prop不同，
那麼react會斷定該節點有更新，那麼重渲染該節點，而後在對其子節點進行比較，一層一層往下，直到沒有子節點

 

二：爲何要使用虛擬節點？

頻繁的操做DOM，會大量的形成頁面的重繪和迴流，出於性能優化的考慮，咱們應該減小重繪和迴流的操做。

重繪：例如 div1.style.color='red' 這種代碼，只能改變顏色，並不會影響其餘元素的佈局，這種操做被稱爲重繪。

迴流：例如 div1.style.padding = '20px' 這種代碼，會影響到其餘元素的佈局，這種操做被稱爲迴流。

迴流必將引發重繪，而重繪不必定會引發迴流。好比：只有顏色改變的時候就只會發生重繪而不會引發迴流。

對虛擬節點的DOM操做，並不會觸發重繪和迴流，把處理後的虛擬節點映射到真實DOM上，只觸發一次重繪和迴流。

 

 二：diff算法

DIFF算法是DOM更新的一種算法，指頁面被更新時，程序用哪一種策略去作更新DOM

把樹形結構按照層級分解，只比較同級元素。
給列表結構的每一個單元添加惟一的key屬性，方便比較。
React 只會匹配相同 class 的 component（這裏面的class指的是組件的名字）
合併操做，調用 component 的 setState 方法的時候, React 將其標記爲 - dirty.到每個事件循環結束, React 檢查全部標記 dirty的 component從新繪製.
選擇性子樹渲染。開發人員能夠重寫shouldComponentUpdate提升diff的性能
#

三：react性能優化方案

重寫shouldComponentUpdate來避免沒必要要的dom操做
使用 production 版本的react.js
使用key來幫助React識別列表中全部子組件的最小變化