在React中最讓人稱道的就是它的虛擬DOM和獨特的Diff演算法了，它極大的提高了我們渲染頁面的效能。在實際專案中我們不需要去關心虛擬DOM的執行原理，只需關注我們的資料即可，因為Diff演算法會幫助我們去計算和分析虛擬DOM中變化的部分，從而去重新渲染該部分，從而實現了效能的提升，也簡化了我們的操作。 原文地址：Liang的部落格

虛擬DOM原理

虛擬DOM是由state資料和JSX模板結合生成的，它的本質是一個JS物件，用它來描述真實的DOM。react會把這個虛擬DOM抽象成一個DOM樹，當stat資料改變，state資料和JSX模板 會生成新的虛擬DOM，通過Diff演算法來對比新舊兩個虛擬DOM，找到其中的不同，進而改變真實的DOM結構，來渲染頁面的。

// 真實dom
<div id="text">
    <span>hello word</sapn>
</div>

//虛擬dom
['div',{'id':'abc'},['span',{},'hello word']]


//在render函式中
redder(){
    return <div>Hello Word</div>
    //等同於
    return React.createElement('div',{},'item');
}

虛擬DOM中的Diff演算法

傳統 Diff 演算法通過迴圈遞迴對節點進行依次對比，效率低下 ,自然達不到我們追求的效能高效的效果，react對Diff重新演算法進行了優化。

react的Diff演算法是將擁有相同類的兩個元件生成相似的樹形結構，然後對DOM樹進行逐層的節點比較，並且是隻會比較同一層次的節點。如圖所示，它只會對相同顏色的節點經行比對。如果某一個節點發生了改變，那麼它和它的子節點都會被刪除，重新生成新的DOM樹節點。

其中，對於同一層級的一組子節點，通過唯一id進行區分，也就是我們經常用到的key，新舊兩個虛擬DOM通過這唯一的標識進行匹配對比。所以在專案中，我們儘量不要去用index去作為key值，因為在進行一些增加和刪除操作中，index會隨之變化，不是唯一的標識，這就給Diff演算法帶來了不便，不但在效能上增加了損耗，還可能帶來一些bug。

總結

• react重新優化Diff演算法，更加高效
• 分層求異，對tree diff進行演算法優化
• react通過相同類生成相似的樹形結構，不同類生成不同樹形結構，對component diff進行優化優化
• 通過設定唯一標識，對element diff進行演算法優化