溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

react虛擬dom與diff算法

發布時間:2020-08-16 04:39:53 來源:網絡 閱讀:1115 作者:杏sunshine 欄目:web開發
react擁有極速渲染的特點,這個特點依靠的就是react的虛擬dom和diff算法

react虛擬dom與diff算法

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虛擬dom與diff算法

在react的diff算法下,在同一位置對比前后dom節點,只要發現不同,就會刪除操作前的dom節點(包括其子節點)
,替換為操作后的dom節點。
向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女