react虛擬dom機(jī)制與diff算法

jzman 發(fā)布于2019-08-21 11:53 / 3341人閱讀

摘要：的一個突出特點(diǎn)是擁有極速地渲染性能。該功能依靠的就是研發(fā)團(tuán)隊弄出的虛擬機(jī)制以及其獨(dú)特的算法。在的算法下，在同一位置對比前后節(jié)點(diǎn)只要發(fā)現(xiàn)不同，就會刪除操作前的節(jié)點(diǎn)包括其子節(jié)點(diǎn)，替換為操作后的節(jié)點(diǎn)。

React的一個突出特點(diǎn)是擁有極速地渲染性能。該功能依靠的就是facebook研發(fā)團(tuán)隊弄出的虛擬dom機(jī)制以及其獨(dú)特的diff算法。下面簡單解釋一下react虛擬dom機(jī)制和diff算法的實(shí)現(xiàn)思想：

要講虛擬dom機(jī)制必須提到一個概念——虛擬dom樹，這是react在真實(shí)dom樹基礎(chǔ)上建立的一個抽象的樹，應(yīng)用、虛擬dom與真實(shí)dom的關(guān)系如下圖顯示：

而標(biāo)準(zhǔn)的dom機(jī)制如下圖所示：

對比兩個圖就可以發(fā)現(xiàn)標(biāo)準(zhǔn)dom機(jī)制下，用戶在應(yīng)用上的操作是直接對真實(shí)dom進(jìn)行操作的，而在react應(yīng)用中，用戶在應(yīng)用中對dom的操作其實(shí)是對虛擬dom的操作，用戶的操作產(chǎn)生的數(shù)據(jù)改變或者state變量改變（此處的改變具體的講就是事件函數(shù)對dom的操作）都會保存到虛擬dom上，之后再批量的對這些更改進(jìn)行diff算法計算，對比操作前后的虛擬dom樹，把更改后的變化再同步到真實(shí)dom上。舉個例子：
標(biāo)準(zhǔn)dom機(jī)制下對某一節(jié)點(diǎn)在事件函數(shù)中做如下操作：

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

如上所示，在標(biāo)準(zhǔn)dom機(jī)制下，會對A節(jié)點(diǎn)進(jìn)行三次的dom操作。
而在react應(yīng)用的事件函數(shù)中進(jìn)行如上操作時，同樣會在虛擬dom上進(jìn)行三次dom的操作，但在真實(shí)dom中，它只會執(zhí)行一次dom操作，即A.style.backgroundColor = "black";因?yàn)樵趓eact虛擬dom機(jī)制中，它會把所有的操作都會合并，只會對比剛開始的狀態(tài)和最后操作的狀態(tài)，兩者中找出不同再同步到真實(shí)dom中，這就大大減少了真實(shí)dom的操作，而眾所周知，dom操作是很耗性能的，這是react能做到極速渲染的原因之一。

另外一個原因就是react獨(dú)特的diff算法，同樣給出標(biāo)準(zhǔn)diff算法和react diff算法的描述，對比了就會明白了：
首先講一下diff算法的處理方法，對操作前后的dom樹同一層的節(jié)點(diǎn)進(jìn)行對比，一層一層對比，如下圖：

在標(biāo)準(zhǔn)dom機(jī)制下：在同一位置對比前后的dom節(jié)點(diǎn)，發(fā)現(xiàn)節(jié)點(diǎn)改變了，會繼續(xù)比較該節(jié)點(diǎn)的子節(jié)點(diǎn)，一層層對比，找到不同的節(jié)點(diǎn)，然后更新節(jié)點(diǎn)。

在react的diff算法下，在同一位置對比前后dom節(jié)點(diǎn),只要發(fā)現(xiàn)不同，就會刪除操作前的domm節(jié)點(diǎn)（包括其子節(jié)點(diǎn)），替換為操作后的dom節(jié)點(diǎn)。

對比兩種diff算法，大家可以發(fā)現(xiàn)，react的diff算法下，當(dāng)dom節(jié)點(diǎn)更改時，會大大減少dom樹的節(jié)點(diǎn)遍歷，這也是其另外一個可以實(shí)現(xiàn)極速渲染的一個原因。

歡迎朋友們交流！嗷嗚~