react虛擬dom機制與diff算法

React的一個突出特色是擁有極速地渲染性能。該功能依靠的就是facebook研發團隊弄出的虛擬dom機制以及其獨特的diff算法。下面簡單解釋一下react虛擬dom機制和diff算法的實現思想：

要講虛擬dom機制必須提到一個概念——虛擬dom樹，這是react在真實dom樹基礎上創建的一個抽象的樹，應用、虛擬dom與真實dom的關係以下圖顯示：

而標準的dom機制以下圖所示：

對比兩個圖就能夠發現標準dom機制下，用戶在應用上的操做是直接對真實dom進行操做的，而在react應用中，用戶在應用中對dom的操做實際上是對虛擬dom的操做，用戶的操做產生的數據改變或者state變量改變（此處的改變具體的講就是事件函數對dom的操做）都會保存到虛擬dom上，以後再批量的對這些更改進行diff算法計算，對比操做先後的虛擬dom樹，把更改後的變化再同步到真實dom上。舉個例子：
標準dom機制下對某一節點在事件函數中作以下操做：

var A=document.getElementById('test');
 A.style.backgroundColor = "black";
 A.style.backgroundColor = "red";
 A.style.backgroundColor = "black";

如上所示，在標準dom機制下，會對A節點進行三次的dom操做。
而在react應用的事件函數中進行如上操做時，一樣會在虛擬dom上進行三次dom的操做，但在真實dom中，它只會執行一次dom操做，即A.style.backgroundColor = "black";由於在react虛擬dom機制中，它會把全部的操做都會合並，只會對比剛開始的狀態和最後操做的狀態，二者中找出不一樣再同步到真實dom中，這就大大減小了真實dom的操做，而衆所周知，dom操做是很耗性能的，這是react能作到極速渲染的緣由之一。

另一個緣由就是react獨特的diff算法，一樣給出標準diff算法和react diff算法的描述，對比了就會明白了：
首先講一下diff算法的處理方法，對操做先後的dom樹同一層的節點進行對比，一層一層對比，以下圖：

在標準dom機制下：在同一位置對比先後的dom節點，發現節點改變了，會繼續比較該節點的子節點，一層層對比，找到不一樣的節點，而後更新節點。

在react的diff算法下，在同一位置對比先後dom節點,只要發現不一樣，就會刪除操做前的domm節點（包括其子節點），替換爲操做後的dom節點。

對比兩種diff算法，你們能夠發現，react的diff算法下，當dom節點更改時，會大大減小dom樹的節點遍歷，這也是其另一個能夠實現極速渲染的一個緣由。

歡迎朋友們交流！嗷嗚~