資訊專欄INFORMATION COLUMN
摘要：二原理每個(gè)都有兩個(gè)，一個(gè)是新的，一個(gè)是原來(lái)的。三實(shí)現(xiàn)過(guò)程四算法的理解與實(shí)現(xiàn)本質(zhì)上就是在和之間做了一個(gè)緩存。將差異的應(yīng)用到真正的樹上對(duì)真實(shí)上的樹進(jìn)行深度優(yōu)先遍歷，在所有的差異列表中找出當(dāng)前遍歷的節(jié)點(diǎn)差異，然后根據(jù)不同進(jìn)行操作。
React Virtual DOM 一、概念
在react中，對(duì)于每個(gè)DOM對(duì)象都有一個(gè)相應(yīng)的“虛擬DOM對(duì)象”，相當(dāng)于DOM對(duì)象的輕量級(jí)副本
由于是Virtual DOM只是一個(gè)副本，具有與真實(shí)的DOM對(duì)象相同的屬性，但是無(wú)法直接更改瀏覽器屏幕上內(nèi)容的真實(shí)功能
當(dāng)直接操作DOM時(shí)涉及到直接更改頁(yè)面，所有操作DOM會(huì)比較慢，正因?yàn)椴僮鱒irtual DOM不會(huì)直接改變真實(shí)的DOM，所以操作Virtual DOM速度會(huì)更快。
二、原理每個(gè)Virtual DOM都有兩個(gè)DOM Tree，一個(gè)是新的，一個(gè)是原來(lái)的。當(dāng)Virtual DOM更新后，React會(huì)將Virtual DOM與更新前獲取的Virtual DOM進(jìn)行比較（這個(gè)過(guò)程叫做“差異化”，是整個(gè)實(shí)現(xiàn)Virtual DOM更新的核心），但獲取到了變化的Virtual DOM對(duì)象之后，React就可以直接在真實(shí)的DOM更新這些對(duì)象，并且只更新更改的對(duì)象。
三、實(shí)現(xiàn)過(guò)程 四、算法的理解與實(shí)現(xiàn)Virtual DOM本質(zhì)上就是在JS和DOM之間做了一個(gè)緩存。JS只操作Virtual DOM，最后的時(shí)候把變更的內(nèi)容寫入到DOM
Virtual DOM算法包括幾個(gè)步驟：
1、用JavaScript對(duì)象結(jié)構(gòu)表示DOM樹的結(jié)構(gòu)
記錄節(jié)點(diǎn)的類型、屬性和子節(jié)點(diǎn)，將其轉(zhuǎn)化成具有相同屬性（tagName=""、props={}、children=[]和key=""），并且對(duì)每個(gè)節(jié)點(diǎn)進(jìn)行標(biāo)記
對(duì)于Element創(chuàng)建一個(gè)原型鏈render()方法，用于渲染oldTree
2、比較兩棵Virtual DOM的差異
記錄差異類型
通過(guò)采用深度優(yōu)先遍歷來(lái)標(biāo)識(shí)每一個(gè)節(jié)點(diǎn)，深度優(yōu)先遍歷本質(zhì)是通過(guò)循環(huán)遞歸創(chuàng)建棧
當(dāng)替換當(dāng)前節(jié)點(diǎn)或子節(jié)點(diǎn)或文本，新增、刪除子節(jié)點(diǎn)或文本以及對(duì)節(jié)點(diǎn)重新排序等，可以通過(guò)定義幾種差異類型來(lái)對(duì)virtual DOM的差異進(jìn)行判斷
列表對(duì)比算法，當(dāng)知道了新舊tree的順序，這主要是要去解決字符串的最小編輯距離問(wèn)題，一般采用動(dòng)態(tài)規(guī)劃來(lái)求解。
3、將差異的應(yīng)用到真正的DOM樹上
對(duì)真實(shí)DOM上的樹進(jìn)行深度優(yōu)先遍歷，在所有的差異列表中找出當(dāng)前遍歷的節(jié)點(diǎn)差異，然后根據(jù)不同進(jìn)行操作。比如說(shuō)，如果其差異類型是替換節(jié)點(diǎn)，可通過(guò)DOM節(jié)點(diǎn)的parentNode.replaceChild()的方法進(jìn)行替換；如果是排序的話，通過(guò)動(dòng)態(tài)規(guī)劃的方法將其DOM上的元素進(jìn)行排列；如果有子節(jié)點(diǎn)的話，將其設(shè)置與真實(shí)DOM上相同的屬性，然后插入；如果是文本的話還需對(duì)瀏覽器做兼容處理，在IE瀏覽器上文本是放在node.nodeValue, 其他標(biāo)準(zhǔn)瀏覽器都是放在node.textContent
五、參考資料理解 Virtual DOM
深度剖析：如何實(shí)現(xiàn)一個(gè) Virtual DOM 算法
Virtual DOM實(shí)現(xiàn)代碼
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97295.html
摘要：具體而言，就是每次數(shù)據(jù)發(fā)生變化，就重新執(zhí)行一次整體渲染。而給出了解決方案，就是。由于只關(guān)注，通過(guò)閱讀兩個(gè)庫(kù)的源碼，對(duì)于的定位有了更深一步的理解。第二個(gè)而且，技術(shù)本身不是目的，能夠更好地解決問(wèn)題才是王道嘛。 前言 React 好像已經(jīng)火了很久很久，以致于我們對(duì)于 Virtual DOM 這個(gè)詞都已經(jīng)很熟悉了，網(wǎng)上也有非常多的介紹 React、Virtual DOM 的文章。但是直到前不久...
摘要：但是它與里大部分的概率是保持一致的。但是如何將轉(zhuǎn)換成函數(shù)的調(diào)用呢就是干這件事情的。好了，讓我們看看是如何工作的。下面的圖片在流程圖中高亮了一個(gè)組件是如何工作的最后希望這篇文章能幫助你理解是如何工作的至少在中 英文原文鏈接 Virtual DOM很神奇，同時(shí)也比較復(fù)雜，難以理解。react,preact和相似的js庫(kù)都使用了virtual dom。然而，我找不到任何好的文章或者文檔，可以...
摘要：它是輕量級(jí)的，與特定于瀏覽器的實(shí)現(xiàn)細(xì)節(jié)分離。由于本身已經(jīng)是抽象，因此虛擬實(shí)際上是抽象的抽象。它允許在這個(gè)抽象的世界中進(jìn)行計(jì)算，并跳過(guò)真正的那些緩慢的操作。 前言 目前主流的前端框架React和Vue中都用到了Virtual DOM這個(gè)技術(shù)，而Virtual DOM到底是什么，可能很多人和我一樣，概念上還是模糊。本文主要介紹DOM和Virtual DOM的基本概念及個(gè)人理解。 以下的D...
摘要：它是輕量級(jí)的，與特定于瀏覽器的實(shí)現(xiàn)細(xì)節(jié)分離。由于本身已經(jīng)是抽象，因此虛擬實(shí)際上是抽象的抽象。它允許在這個(gè)抽象的世界中進(jìn)行計(jì)算，并跳過(guò)真正的那些緩慢的操作。 前言 目前主流的前端框架React和Vue中都用到了Virtual DOM這個(gè)技術(shù)，而Virtual DOM到底是什么，可能很多人和我一樣，概念上還是模糊。本文主要介紹DOM和Virtual DOM的基本概念及個(gè)人理解。 以下的D...
閱讀 2484·2023-04-26 02:18
閱讀 1271·2021-10-14 09:43
閱讀 3841·2021-09-26 10:00
閱讀 6985·2021-09-22 15:28
閱讀 2550·2019-08-30 15:54
閱讀 2611·2019-08-30 15:52
閱讀 486·2019-08-29 11:30
閱讀 3475·2019-08-29 11:05
