溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

react虛擬dom與diff算法

發(fā)布時(shí)間：2020-08-16 04:39:53 來源：網(wǎng)絡(luò) 閱讀：1108 作者：杏sunshine 欄目：web開發(fā) 
react擁有極速渲染的特點(diǎn)，這個(gè)特點(diǎn)依靠的就是react的虛擬dom和diff算法

react虛擬dom與diff算法

react虛擬dom與diff算法

對(duì)比兩個(gè)圖就可以發(fā)現(xiàn)標(biāo)準(zhǔn)dom機(jī)制下，用戶在應(yīng)用上的操作是直接對(duì)真實(shí)dom進(jìn)行操作的，在react中我們操作
的是虛擬dom，用戶的操作產(chǎn)生的數(shù)據(jù)改變或者state變量改變，都會(huì)保存到虛擬dom上，之后再批量的對(duì)這些更
改進(jìn)行diff算法計(jì)算，對(duì)比操作前后的虛擬dom樹，把更改后的變化再同步到真實(shí)dom上
虛擬DOM的原理：
React會(huì)在內(nèi)存中維護(hù)一個(gè)虛擬DOM樹，對(duì)這個(gè)樹進(jìn)行讀或?qū)懀瑢?shí)際上是對(duì)虛擬DOM進(jìn)行。當(dāng)數(shù)據(jù)變化時(shí)，
React會(huì)自動(dòng)更新虛擬DOM，然后將新的虛擬DOM和舊的虛擬DOM進(jìn)行對(duì)比，找到變更的部分，得出一個(gè)diff，
然后將diff放到一個(gè)隊(duì)列里，最終批量更新這些diff到DOM中。
虛擬DOM的優(yōu)點(diǎn)：最終表現(xiàn)在DOM上的修改只是變更的部分，可以保證非常高效的渲染。
虛擬DOM：render 虛擬DOM + diff + 更新必要的 DOM 元素
虛擬DOM的缺點(diǎn)：首次渲染大量DOM時(shí)，由于多了一層虛擬DOM的計(jì)算，會(huì)比innerHTML插入慢。

DOM Diff算法的原理圖

react虛擬dom與diff算法

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手