React Virtual DOM 理解

smallStone 發布于2019-08-23 11:40 / 2843人閱讀

摘要：二原理每個都有兩個，一個是新的，一個是原來的。三實現過程四算法的理解與實現本質上就是在和之間做了一個緩存。將差異的應用到真正的樹上對真實上的樹進行深度優先遍歷，在所有的差異列表中找出當前遍歷的節點差異，然后根據不同進行操作。

React Virtual DOM 一、概念

在react中，對于每個DOM對象都有一個相應的“虛擬DOM對象”，相當于DOM對象的輕量級副本

由于是Virtual DOM只是一個副本，具有與真實的DOM對象相同的屬性，但是無法直接更改瀏覽器屏幕上內容的真實功能

當直接操作DOM時涉及到直接更改頁面，所有操作DOM會比較慢，正因為操作Virtual DOM不會直接改變真實的DOM，所以操作Virtual DOM速度會更快。

二、原理

每個Virtual DOM都有兩個DOM Tree，一個是新的，一個是原來的。當Virtual DOM更新后，React會將Virtual DOM與更新前獲取的Virtual DOM進行比較（這個過程叫做“差異化”，是整個實現Virtual DOM更新的核心），但獲取到了變化的Virtual DOM對象之后，React就可以直接在真實的DOM更新這些對象，并且只更新更改的對象。

三、實現過程

四、算法的理解與實現

Virtual DOM本質上就是在JS和DOM之間做了一個緩存。JS只操作Virtual DOM，最后的時候把變更的內容寫入到DOM

Virtual DOM算法包括幾個步驟：

1、用JavaScript對象結構表示DOM樹的結構

記錄節點的類型、屬性和子節點，將其轉化成具有相同屬性（tagName=""、props={}、children=[]和key=""），并且對每個節點進行標記

對于Element創建一個原型鏈render()方法，用于渲染oldTree

2、比較兩棵Virtual DOM的差異

記錄差異類型

通過采用深度優先遍歷來標識每一個節點，深度優先遍歷本質是通過循環遞歸創建棧

當替換當前節點或子節點或文本，新增、刪除子節點或文本以及對節點重新排序等，可以通過定義幾種差異類型來對virtual DOM的差異進行判斷

列表對比算法，當知道了新舊tree的順序，這主要是要去解決字符串的最小編輯距離問題，一般采用動態規劃來求解。

3、將差異的應用到真正的DOM樹上

對真實DOM上的樹進行深度優先遍歷，在所有的差異列表中找出當前遍歷的節點差異，然后根據不同進行操作。比如說，如果其差異類型是替換節點，可通過DOM節點的parentNode.replaceChild()的方法進行替換；如果是排序的話，通過動態規劃的方法將其DOM上的元素進行排列；如果有子節點的話，將其設置與真實DOM上相同的屬性，然后插入；如果是文本的話還需對瀏覽器做兼容處理，在IE瀏覽器上文本是放在node.nodeValue, 其他標準瀏覽器都是放在node.textContent

五、參考資料

理解 Virtual DOM
深度剖析：如何實現一個 Virtual DOM 算法
Virtual DOM實現代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97295.html

一起理解 Virtual DOM

摘要：具體而言，就是每次數據發生變化，就重新執行一次整體渲染。而給出了解決方案，就是。由于只關注，通過閱讀兩個庫的源碼，對于的定位有了更深一步的理解。第二個而且，技術本身不是目的，能夠更好地解決問題才是王道嘛。前言 React 好像已經火了很久很久，以致于我們對于 Virtual DOM 這個詞都已經很熟悉了，網上也有非常多的介紹 React、Virtual DOM 的文章。但是直到前不久...

Tangpj 2019-08-22 10:46 評論0 收藏0
虛擬DOM內部是如何工作的

摘要：但是它與里大部分的概率是保持一致的。但是如何將轉換成函數的調用呢就是干這件事情的。好了，讓我們看看是如何工作的。下面的圖片在流程圖中高亮了一個組件是如何工作的最后希望這篇文章能幫助你理解是如何工作的至少在中英文原文鏈接 Virtual DOM很神奇，同時也比較復雜，難以理解。react,preact和相似的js庫都使用了virtual dom。然而，我找不到任何好的文章或者文檔，可以...

hiYoHoo 2019-08-21 11:46 評論0 收藏0
前端抽象世界之DOM與Virtual DOM

摘要：它是輕量級的，與特定于瀏覽器的實現細節分離。由于本身已經是抽象，因此虛擬實際上是抽象的抽象。它允許在這個抽象的世界中進行計算，并跳過真正的那些緩慢的操作。前言目前主流的前端框架React和Vue中都用到了Virtual DOM這個技術，而Virtual DOM到底是什么，可能很多人和我一樣，概念上還是模糊。本文主要介紹DOM和Virtual DOM的基本概念及個人理解。以下的D...

plokmju88 2019-08-02 12:00 評論0 收藏0
前端抽象世界之DOM與Virtual DOM

摘要：它是輕量級的，與特定于瀏覽器的實現細節分離。由于本身已經是抽象，因此虛擬實際上是抽象的抽象。它允許在這個抽象的世界中進行計算，并跳過真正的那些緩慢的操作。前言目前主流的前端框架React和Vue中都用到了Virtual DOM這個技術，而Virtual DOM到底是什么，可能很多人和我一樣，概念上還是模糊。本文主要介紹DOM和Virtual DOM的基本概念及個人理解。以下的D...

joy968 2019-08-26 12:23 評論0 收藏0