react虛擬dom與diff演算法

標籤：行操作   分享圖片   vpd   inner   分享   alt   不同   reac   修改   

react擁有極速渲染的特點，這個特點依靠的就是react的虛擬dom和diff演算法

對比兩個圖就可以發現標準dom機制下，使用者在應用上的操作是直接對真實dom進行操作的，在react中我們操作的是虛擬dom，使用者的操作產生的資料改變或者state變數改變，都會儲存到虛擬dom上，之後再批量的對這些更改進行diff演算法計算，對比操作前後的虛擬dom樹，把更改後的變化再同步到真實dom上虛擬DOM的原理：React會在記憶體中維護一個虛擬DOM樹，對這個樹進行讀或寫，實際上是對虛擬DOM進行。當資料變化時，React會自動更新虛擬DOM，然後將新的虛擬DOM和舊的虛擬DOM進行對比，找到變更的部分，得出一個diff，然後將diff放到一個隊列裡，最終批次更新這些diff到DOM中。虛擬DOM的優點：最終表現在DOM上的修改只是變更的部分，可以保證非常高效的渲染。虛擬DOM：render 虛擬DOM + diff + 更新必要的 DOM 元素虛擬DOM的缺點：首次渲染大量DOM時，由於多了一層虛擬DOM的計算，會比innerHTML插入慢。DOM Diff演算法的原理圖

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

react虛擬dom與diff演算法