React Virtual DOM 理解

React Virtual DOM

1、概念

• 在react中，對於每一個DOM對象都有一個相應的「虛擬DOM對象」，至關於DOM對象的輕量級副本
• 因爲是Virtual DOM只是一個副本，具備與真實的DOM對象相同的屬性，可是沒法直接更改瀏覽器屏幕上內容的真實功能
• 當直接操做DOM時涉及到直接更改頁面，全部操做DOM會比較慢，正由於操做Virtual DOM不會直接改變真實的DOM，因此操做Virtual DOM速度會更快。

2、原理

每一個Virtual DOM都有兩個DOM Tree，一個是新的，一個是原來的。當Virtual DOM更新後，React會將Virtual DOM與更新前獲取的Virtual DOM進行比較（這個過程叫作「差別化」，是整個實現Virtual DOM更新的核心），但獲取到了變化的Virtual DOM對象以後，React就能夠直接在真實的DOM更新這些對象，而且只更新更改的對象。

3、實現過程

4、算法的理解與實現

• Virtual DOM本質上就是在JS和DOM之間作了一個緩存。JS只操做Virtual DOM，最後的時候把變動的內容寫入到DOM
• Virtual DOM算法包括幾個步驟：

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

• 記錄節點的類型、屬性和子節點，將其轉化成具備相同屬性（tagName=''、props={}、children=[]和key=''），而且對每一個節點進行標記
• 對於Element建立一個原型鏈render()方法，用於渲染oldTree

二、比較兩棵Virtual DOM的差別

• 記錄差別類型
• 經過採用深度優先遍從來標識每個節點，深度優先遍歷本質是經過循環遞歸建立棧
• 當替換當前節點或子節點或文本，新增、刪除子節點或文本以及對節點從新排序等，能夠經過定義幾種差別類型來對virtual DOM的差別進行判斷

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

三、將差別的應用到真正的DOM樹上

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

5、參考資料

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