資訊專欄INFORMATION COLUMN
摘要：的一個(gè)突出特點(diǎn)是擁有極速地渲染性能。該功能依靠的就是研發(fā)團(tuán)隊(duì)弄出的虛擬機(jī)制以及其獨(dú)特的算法。在的算法下，在同一位置對(duì)比前后節(jié)點(diǎn)只要發(fā)現(xiàn)不同，就會(huì)刪除操作前的節(jié)點(diǎn)包括其子節(jié)點(diǎn)，替換為操作后的節(jié)點(diǎn)。
React的一個(gè)突出特點(diǎn)是擁有極速地渲染性能。該功能依靠的就是facebook研發(fā)團(tuán)隊(duì)弄出的虛擬dom機(jī)制以及其獨(dú)特的diff算法。下面簡(jiǎn)單解釋一下react虛擬dom機(jī)制和diff算法的實(shí)現(xiàn)思想：
要講虛擬dom機(jī)制必須提到一個(gè)概念——虛擬dom樹(shù)，這是react在真實(shí)dom樹(shù)基礎(chǔ)上建立的一個(gè)抽象的樹(shù)，應(yīng)用、虛擬dom與真實(shí)dom的關(guān)系如下圖顯示：
而標(biāo)準(zhǔn)的dom機(jī)制如下圖所示：
對(duì)比兩個(gè)圖就可以發(fā)現(xiàn)標(biāo)準(zhǔn)dom機(jī)制下，用戶在應(yīng)用上的操作是直接對(duì)真實(shí)dom進(jìn)行操作的，而在react應(yīng)用中，用戶在應(yīng)用中對(duì)dom的操作其實(shí)是對(duì)虛擬dom的操作，用戶的操作產(chǎn)生的數(shù)據(jù)改變或者state變量改變（此處的改變具體的講就是事件函數(shù)對(duì)dom的操作）都會(huì)保存到虛擬dom上，之后再批量的對(duì)這些更改進(jìn)行diff算法計(jì)算，對(duì)比操作前后的虛擬dom樹(shù)，把更改后的變化再同步到真實(shí)dom上。舉個(gè)例子：
標(biāo)準(zhǔn)dom機(jī)制下對(duì)某一節(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ī)制下，會(huì)對(duì)A節(jié)點(diǎn)進(jìn)行三次的dom操作。
而在react應(yīng)用的事件函數(shù)中進(jìn)行如上操作時(shí)，同樣會(huì)在虛擬dom上進(jìn)行三次dom的操作，但在真實(shí)dom中，它只會(huì)執(zhí)行一次dom操作，即A.style.backgroundColor = "black";因?yàn)樵趓eact虛擬dom機(jī)制中，它會(huì)把所有的操作都會(huì)合并，只會(huì)對(duì)比剛開(kāi)始的狀態(tài)和最后操作的狀態(tài)，兩者中找出不同再同步到真實(shí)dom中，這就大大減少了真實(shí)dom的操作，而眾所周知，dom操作是很耗性能的，這是react能做到極速渲染的原因之一。
另外一個(gè)原因就是react獨(dú)特的diff算法，同樣給出標(biāo)準(zhǔn)diff算法和react diff算法的描述，對(duì)比了就會(huì)明白了：
首先講一下diff算法的處理方法，對(duì)操作前后的dom樹(shù)同一層的節(jié)點(diǎn)進(jìn)行對(duì)比，一層一層對(duì)比，如下圖：
在標(biāo)準(zhǔn)dom機(jī)制下：在同一位置對(duì)比前后的dom節(jié)點(diǎn)，發(fā)現(xiàn)節(jié)點(diǎn)改變了，會(huì)繼續(xù)比較該節(jié)點(diǎn)的子節(jié)點(diǎn)，一層層對(duì)比，找到不同的節(jié)點(diǎn)，然后更新節(jié)點(diǎn)。
在react的diff算法下，在同一位置對(duì)比前后dom節(jié)點(diǎn),只要發(fā)現(xiàn)不同，就會(huì)刪除操作前的domm節(jié)點(diǎn)（包括其子節(jié)點(diǎn)），替換為操作后的dom節(jié)點(diǎn)。
對(duì)比兩種diff算法，大家可以發(fā)現(xiàn)，react的diff算法下，當(dāng)dom節(jié)點(diǎn)更改時(shí)，會(huì)大大減少dom樹(shù)的節(jié)點(diǎn)遍歷，這也是其另外一個(gè)可以實(shí)現(xiàn)極速渲染的一個(gè)原因。
歡迎朋友們交流！嗷嗚~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87236.html
摘要：市面上竟然擁有多個(gè)虛擬庫(kù)。虛擬庫(kù)，就是出來(lái)后的一種新式庫(kù)，以虛擬與算法為核心，屏蔽操作，操作數(shù)據(jù)即操作視圖。及其他虛擬庫(kù)已經(jīng)將虛擬的生成交由與處理了，因此不同點(diǎn)是，虛擬的結(jié)構(gòu)與算法。因此虛擬庫(kù)是分為兩大派系算法派與擬態(tài)派。 去哪兒網(wǎng)迷你React是年初立項(xiàng)的新作品，在這前，去哪兒網(wǎng)已經(jīng)深耕多年，擁有QRN（react-native的公司制定版），HY（基于React的hybird方案）...
摘要：因?yàn)榘姹緦⒄嬲龔U棄這三生命周期到目前為止，的渲染機(jī)制遵循同步渲染首次渲染，更新時(shí)更新時(shí)卸載時(shí)期間每個(gè)周期函數(shù)各司其職，輸入輸出都是可預(yù)測(cè)，一路下來(lái)很順暢。通過(guò)進(jìn)一步觀察可以發(fā)現(xiàn)，預(yù)廢棄的三個(gè)生命周期函數(shù)都發(fā)生在虛擬的構(gòu)建期間，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景 前段時(shí)間準(zhǔn)備前端招聘事項(xiàng)...
摘要：是一個(gè)最小的庫(kù)，但由于其對(duì)尺寸的追求，它的很多代碼可讀性比較差，市面上也很少有全面且詳細(xì)介紹的文章，本篇文章希望能幫助你學(xué)習(xí)的源碼。建議與源碼一起閱讀本文。 作為一名前端，我們需要深入學(xué)習(xí)react的運(yùn)行機(jī)制，但是react源碼量已經(jīng)相當(dāng)龐大，從學(xué)習(xí)的角度，性價(jià)比不高，所以學(xué)習(xí)一個(gè)react mini庫(kù)是一個(gè)深入學(xué)習(xí)react的一個(gè)不錯(cuò)的方法。 preact是一個(gè)最小的react mi...
摘要：并且處理特殊屬性，比如事件綁定。之后根據(jù)差異對(duì)象操作元素位置變動(dòng)，刪除，添加等。當(dāng)節(jié)點(diǎn)數(shù)過(guò)大或者頁(yè)面更新次數(shù)過(guò)多時(shí)，頁(yè)面卡頓的現(xiàn)象會(huì)比較明顯?；谧⒁馐褂脕?lái)減少組件不必要的更新。 1、什么是Diff算法 傳統(tǒng)Diff：diff算法即差異查找算法；對(duì)于Html DOM結(jié)構(gòu)即為tree的差異查找算法；而對(duì)于計(jì)算兩顆樹(shù)的差異時(shí)間復(fù)雜度為O（n^3）,顯然成本太高，React不可能采用這種...
摘要：并且處理特殊屬性，比如事件綁定。之后根據(jù)差異對(duì)象操作元素位置變動(dòng)，刪除，添加等。當(dāng)節(jié)點(diǎn)數(shù)過(guò)大或者頁(yè)面更新次數(shù)過(guò)多時(shí)，頁(yè)面卡頓的現(xiàn)象會(huì)比較明顯?；谧⒁馐褂脕?lái)減少組件不必要的更新。 1、什么是Diff算法 傳統(tǒng)Diff：diff算法即差異查找算法；對(duì)于Html DOM結(jié)構(gòu)即為tree的差異查找算法；而對(duì)于計(jì)算兩顆樹(shù)的差異時(shí)間復(fù)雜度為O（n^3）,顯然成本太高，React不可能采用這種...
閱讀 2881·2021-11-16 11:55
閱讀 2630·2021-09-29 09:34
閱讀 3449·2021-09-01 14:21
閱讀 3785·2019-08-29 12:36
閱讀 709·2019-08-26 10:55
閱讀 4004·2019-08-26 10:20
閱讀 1040·2019-08-23 18:19
閱讀 1209·2019-08-23 17:56
