react虛擬dom機制與diff算法

jzman 發布于2019-08-21 11:53 / 3329人閱讀

摘要：的一個突出特點是擁有極速地渲染性能。該功能依靠的就是研發團隊弄出的虛擬機制以及其獨特的算法。在的算法下，在同一位置對比前后節點只要發現不同，就會刪除操作前的節點包括其子節點，替換為操作后的節點。

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樹的節點遍歷，這也是其另外一個可以實現極速渲染的一個原因。

歡迎朋友們交流！嗷嗚~

GPU云服務器云服務器 react dom cdn react-dom 虛擬機機制 diff

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87236.html

去哪兒網迷你React的研發心得

摘要：市面上竟然擁有多個虛擬庫。虛擬庫，就是出來后的一種新式庫，以虛擬與算法為核心，屏蔽操作，操作數據即操作視圖。及其他虛擬庫已經將虛擬的生成交由與處理了，因此不同點是，虛擬的結構與算法。因此虛擬庫是分為兩大派系算法派與擬態派。去哪兒網迷你React是年初立項的新作品，在這前，去哪兒網已經深耕多年，擁有QRN（react-native的公司制定版），HY（基于React的hybird方案）...

pekonchan 2019-08-22 11:10 評論0 收藏0
淺談React Fiber

摘要：因為版本將真正廢棄這三生命周期到目前為止，的渲染機制遵循同步渲染首次渲染，更新時更新時卸載時期間每個周期函數各司其職，輸入輸出都是可預測，一路下來很順暢。通過進一步觀察可以發現，預廢棄的三個生命周期函數都發生在虛擬的構建期間，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景前段時間準備前端招聘事項...

izhuhaodev 2019-08-26 10:43 評論0 收藏0
幫你讀懂preact的源碼（一）

摘要：是一個最小的庫，但由于其對尺寸的追求，它的很多代碼可讀性比較差，市面上也很少有全面且詳細介紹的文章，本篇文章希望能幫助你學習的源碼。建議與源碼一起閱讀本文。作為一名前端，我們需要深入學習react的運行機制，但是react源碼量已經相當龐大，從學習的角度，性價比不高，所以學習一個react mini庫是一個深入學習react的一個不錯的方法。 preact是一個最小的react mi...

XboxYan 2019-08-22 17:24 評論0 收藏0
談談React中Diff算法的策略及實現

摘要：并且處理特殊屬性，比如事件綁定。之后根據差異對象操作元素位置變動，刪除，添加等。當節點數過大或者頁面更新次數過多時，頁面卡頓的現象會比較明顯。基于注意使用來減少組件不必要的更新。 1、什么是Diff算法傳統Diff：diff算法即差異查找算法；對于Html DOM結構即為tree的差異查找算法；而對于計算兩顆樹的差異時間復雜度為O（n^3）,顯然成本太高，React不可能采用這種...

Scliang 2019-08-23 12:09 評論0 收藏0
談談React中Diff算法的策略及實現

摘要：并且處理特殊屬性，比如事件綁定。之后根據差異對象操作元素位置變動，刪除，添加等。當節點數過大或者頁面更新次數過多時，頁面卡頓的現象會比較明顯。基于注意使用來減少組件不必要的更新。 1、什么是Diff算法傳統Diff：diff算法即差異查找算法；對于Html DOM結構即為tree的差異查找算法；而對于計算兩顆樹的差異時間復雜度為O（n^3）,顯然成本太高，React不可能采用這種...

HmyBmny 2019-08-02 11:35 評論0 收藏0