如何實現一個虛擬 DOM——virtual-dom 原始碼分析

摘要： 概述 本文通過對virtual-dom 的原始碼進行閱讀和分析，針對Virtual DOM的結構和相關的Diff演算法進行講解，讓讀者能夠對整個資料結構以及相關的Diff演算法有一定的瞭解。 Virtual DOM中Diff演算法得到的結果如何對映到真實DOM中，我們將在...

概述

本文通過對virtual-dom 的原始碼進行閱讀和分析，針對Virtual DOM的結構和相關的Diff演算法進行講解，讓讀者能夠對整個資料結構以及相關的Diff演算法有一定的瞭解。

Virtual DOM中Diff演算法得到的結果如何對映到真實DOM中，我們將在下一篇部落格揭曉。

本文的主要內容為：

• Virtual DOM的結構
• Virtual DOM的Diff演算法

注：這個Virtual DOM的實現並不是React Virtual DOM的原始碼，而是基於)這個庫。兩者在原理上類似，並且這個庫更加簡單容易理解。相較於這個庫，React對Virtual DOM做了進一步的優化和調整，我會在後續的部落格中進行分析。

Virtual DOM的結構

VirtualNode

作為Virtual DOM的元資料結構，VirtualNode位於vnode/vnode.js 檔案中。我們擷取一部分宣告程式碼來看下內部結構：

function VirtualNode(tagName, properties, children, key, namespace) {
this.tagName = tagName
this.properties = properties || noProperties //props物件，Object型別
this.children = children || noChildren //子節點，Array型別
this.key = key != null ? String(key) : undefined
this.namespace = (typeof namespace === "string") ? namespace : null

...

this.count = count + descendants
this.hasWidgets = hasWidgets
this.hasThunks = hasThunks
this.hooks = hooks
this.descendantHooks = descendantHooks
}

VirtualNode.prototype.version = version //VirtualNode版本號，isVnode()檢測標誌
VirtualNode.prototype.type = "VirtualNode" // VirtualNode型別，isVnode()檢測標誌

上面就是一個VirtualNode的完整結構，包含了特定的標籤名、屬性、子節點等。

VText

VText是一個純文字的節點，對應的是HTML中的純文字。因此，這個屬性也只有text 這一個欄位。

function VirtualText(text) {
this.text = String(text)
}

VirtualText.prototype.version = version
VirtualText.prototype.type = "VirtualText"

VPatch

VPatch是表示需要對Virtual DOM執行的操作記錄的資料結構。它位於vnode/vpatch.js 檔案中。我們來看下里面的具體程式碼：

// 定義了操作的常量，如Props變化，增加節點等
VirtualPatch.NONE = 0
VirtualPatch.VTEXT = 1
VirtualPatch.VNODE = 2
VirtualPatch.WIDGET = 3
VirtualPatch.PROPS = 4
VirtualPatch.ORDER = 5
VirtualPatch.INSERT = 6
VirtualPatch.REMOVE = 7
VirtualPatch.THUNK = 8

module.exports = VirtualPatch

function VirtualPatch(type, vNode, patch) {
this.type = Number(type) //操作型別
this.vNode = vNode //需要操作的節點
this.patch = patch //需要操作的內容
}

VirtualPatch.prototype.version = version
VirtualPatch.prototype.type = "VirtualPatch"

其中常量定義了對VNode節點的操作。例如：VTEXT就是增加一個VText節點，PROPS就是當前節點有Props屬性改變。

Virtual DOM的Diff演算法

瞭解了虛擬DOM中的三個結構，那我們下面來看下Virtual DOM的Diff演算法。

這個Diff演算法是Virtual DOM中最核心的一個演算法。通過輸入初始狀態A（VNode）和最終狀態B（VNode），這個演算法可以得到從A到B的變化步驟（VPatch），根據得到的這一連串步驟，我們就可以知道哪些節點需要新增，哪些節點需要刪除，哪些節點的屬性有了變化。在這個Diff演算法中，又分成了三部分：

• VNode的Diff演算法
• Props的Diff演算法
• Vnode children的Diff演算法

下面，我們就來一個一個介紹這些Diff演算法。

VNode的Diff演算法

該演算法是針對於單個VNode的比較演算法。它是用於兩個樹中單個節點比較的場景。具體演算法如下，如果不想直接閱讀原始碼的同學也可以翻到下面，會有相關程式碼流程說明供大家參考：

function walk(a, b, patch, index) {
if (a === b) {
return
}

var apply = patch[index]
var applyClear = false

if (isThunk(a) || isThunk(b)) {
thunks(a, b, patch, index)
} else if (b == null) {

// If a is a widget we will add a remove patch for it
// Otherwise any child widgets/hooks must be destroyed.
// This prevents adding two remove patches for a widget.
if (!isWidget(a)) {
clearState(a, patch, index)
apply = patch[index]
}

apply = appendPatch(apply, new VPatch(VPatch.REMOVE, a, b))
} else if (isVNode(b)) {
if (isVNode(a)) {
if (a.tagName === b.tagName &&
a.namespace === b.namespace &&
a.key === b.key) {
var propsPatch = diffProps(a.properties, b.properties)
if (propsPatch) {
apply = appendPatch(apply,
new VPatch(VPatch.PROPS, a, propsPatch))
}
apply = diffChildren(a, b, patch, apply, index)
} else {
apply = appendPatch(apply, new VPatch(VPatch.VNODE, a, b))
applyClear = true
}
} else {
apply = appendPatch(apply, new VPatch(VPatch.VNODE, a, b))
applyClear = true
}
} else if (isVText(b)) {
if (!isVText(a)) {
apply = appendPatch(apply, new VPatch(VPatch.VTEXT, a, b))
applyClear = true
} else if (a.text !== b.text) {
apply = appendPatch(apply, new VPatch(VPatch.VTEXT, a, b))
}
} else if (isWidget(b)) {
if (!isWidget(a)) {
applyClear = true
}

apply = appendPatch(apply, new VPatch(VPatch.WIDGET, a, b))
}

if (apply) {
patch[index] = apply
}

if (applyClear) {
clearState(a, patch, index)
}
}

程式碼具體邏輯如下：

1. 如果a 和b 這兩個VNode全等，則認為沒有修改，直接返回。
2. 如果其中有一個是thunk，則使用thunk的比較方法thunks 。
3. 如果a 是widget且b 為空，那麼通過遞迴將a 和它的子節點的remove 操作新增到patch中。

4. 如果b 是VNode的話，

   1. 如果a 也是VNode，那麼比較tagName 、namespace 、key ，如果相同則比較兩個VNode的Props（用下面提到的diffProps演算法），同時比較兩個VNode的children（用下面提到的diffChildren演算法）；如果不同則直接將b 節點的insert 操作新增到patch中，同時將標記位置為true。
   2. 如果a 不是VNode，那麼直接將b 節點的insert 操作新增到patch中，同時將標記位置為true。
5. 如果b 是VText的話，看a 的型別是否為VText，如果不是，則將VText 操作新增到patch中，並且將標誌位設定為true；如果是且文字內容不同，則將VText 操作新增到patch中。
6. 如果b 是Widget的話，看a 的型別是否為widget，如果是，將標誌位設定為true。不論a 型別為什麼，都將Widget 操作新增到patch中。
7. 檢查標誌位，如果標識為為true，那麼通過遞迴將a 和它的子節點的remove 操作新增到patch中。

這就是單個VNode節點的diff演算法全過程。這個演算法是整個diff演算法的入口，兩棵樹的比較就是從這個演算法開始的。

Prpps的Diff演算法

看完了單個VNode節點的diff演算法，我們來看下上面提到的diffProps 演算法。

該演算法是針對於兩個比較的VNode節點的Props比較演算法。它是用於兩個場景中key值和標籤名都相同的情況。具體演算法如下，如果不想直接閱讀原始碼的同學也可以翻到下面，會有相關程式碼流程說明供大家參考：

function diffProps(a, b) {
var diff

for (var aKey in a) {
if (!(aKey in b)) {
diff = diff || {}
diff[aKey] = undefined
}

var aValue = a[aKey]
var bValue = b[aKey]

if (aValue === bValue) {
continue
} else if (isObject(aValue) && isObject(bValue)) {
if (getPrototype(bValue) !== getPrototype(aValue)) {
diff = diff || {}
diff[aKey] = bValue
} else if (isHook(bValue)) {
diff = diff || {}
diff[aKey] = bValue
} else {
var objectDiff = diffProps(aValue, bValue)
if (objectDiff) {
diff = diff || {}
diff[aKey] = objectDiff
}
}
} else {
diff = diff || {}
diff[aKey] = bValue
}
}

for (var bKey in b) {
if (!(bKey in a)) {
diff = diff || {}
diff[bKey] = b[bKey]
}
}

return diff
}

程式碼具體邏輯如下：

1. 遍歷a 物件。

   1. 當key值不存在於b ，則將此值儲存下來，value賦值為undefined 。
   2. 當此key對應的兩個屬性都相同時，繼續終止此次迴圈，進行下次迴圈。
   3. 當key值對應的value不同且key值對應的兩個value都是物件時，判斷Prototype值，如果不同則記錄key對應的b 物件的值；如果b 對應的value是hook 的話，記錄b的值。
   4. 上面條件判斷都不同且都是物件時，則繼續比較key值對應的兩個物件（遞迴）。
   5. 當有一個不是物件時，直接將b 對應的value進行記錄。
2. 遍歷b 物件，將所有a 物件中不存在的key值對應的物件都記錄下來。

整個演算法的大致流程如下，因為比較簡單，就不畫相關流程圖了。如果邏輯有些繞的話，可以配合程式碼食用，效果更佳。

Vnode children的Diff演算法

下面讓我們來看下最後一個演算法，就是關於兩個VNode節點的children屬性的diffChildren 演算法。這個個diff演算法分為兩個部分，第一部分是將變化後的結果b 的children進行順序調整的演算法，保證能夠快速的和a 的children進行比較；第二部分就是將a 的children與重新排序調整後的b 的children進行比較，得到相關的patch。下面，讓我們一個一個演算法來看。

reorder演算法

該演算法的作用是將b 節點的children陣列進行調整重新排序，讓a 和b 兩個children之間的diff演算法更加節約時間。具體程式碼如下：

function reorder(aChildren, bChildren) {
// O(M) time, O(M) memory
var bChildIndex = keyIndex(bChildren)
var bKeys = bChildIndex.keys// have "key" prop，object
var bFree = bChildIndex.free//don't have "key" prop，array

// all children of b don't have "key"
if (bFree.length === bChildren.length) {
return {
children: bChildren,
moves: null
}
}

// O(N) time, O(N) memory
var aChildIndex = keyIndex(aChildren)
var aKeys = aChildIndex.keys
var aFree = aChildIndex.free

// all children of a don't have "key"
if (aFree.length === aChildren.length) {
return {
children: bChildren,
moves: null
}
}

// O(MAX(N, M)) memory
var newChildren = []

var freeIndex = 0
var freeCount = bFree.length
var deletedItems = 0

// Iterate through a and match a node in b
// O(N) time,
for (var i = 0 ; i < aChildren.length; i++) {
var aItem = aChildren[i]
var itemIndex

if (aItem.key) {
if (bKeys.hasOwnProperty(aItem.key)) {
// Match up the old keys
itemIndex = bKeys[aItem.key]
newChildren.push(bChildren[itemIndex])

} else {
// Remove old keyed items
itemIndex = i - deletedItems++
newChildren.push(null)
}
} else {
// Match the item in a with the next free item in b
if (freeIndex < freeCount) {
itemIndex = bFree[freeIndex++]
newChildren.push(bChildren[itemIndex])
} else {
// There are no free items in b to match with
// the free items in a, so the extra free nodes
// are deleted.
itemIndex = i - deletedItems++
newChildren.push(null)
}
}
}

var lastFreeIndex = freeIndex >= bFree.length ?
bChildren.length :
bFree[freeIndex]

// Iterate through b and append any new keys
// O(M) time
for (var j = 0; j < bChildren.length; j++) {
var newItem = bChildren[j]

if (newItem.key) {
if (!aKeys.hasOwnProperty(newItem.key)) {
// Add any new keyed items
// We are adding new items to the end and then sorting them
// in place. In future we should insert new items in place.
newChildren.push(newItem)
}
} else if (j >= lastFreeIndex) {
// Add any leftover non-keyed items
newChildren.push(newItem)
}
}

var simulate = newChildren.slice()
var simulateIndex = 0
var removes = []
var inserts = []
var simulateItem

for (var k = 0; k < bChildren.length;) {
var wantedItem = bChildren[k]
simulateItem = simulate[simulateIndex]

// remove items
while (simulateItem === null && simulate.length) {
removes.push(remove(simulate, simulateIndex, null))
simulateItem = simulate[simulateIndex]
}

if (!simulateItem || simulateItem.key !== wantedItem.key) {
// if we need a key in this position...
if (wantedItem.key) {
if (simulateItem && simulateItem.key) {
// if an insert doesn't put this key in place, it needs to move
if (bKeys[simulateItem.key] !== k + 1) {
removes.push(remove(simulate, simulateIndex, simulateItem.key))
simulateItem = simulate[simulateIndex]
// if the remove didn't put the wanted item in place, we need to insert it
if (!simulateItem || simulateItem.key !== wantedItem.key) {
inserts.push({key: wantedItem.key, to: k})
}
// items are matching, so skip ahead
else {
simulateIndex++
}
}
else {
inserts.push({key: wantedItem.key, to: k})
}
}
else {
inserts.push({key: wantedItem.key, to: k})
}
k++
}
// a key in simulate has no matching wanted key, remove it
else if (simulateItem && simulateItem.key) {
removes.push(remove(simulate, simulateIndex, simulateItem.key))
}
}
else {
simulateIndex++
k++
}
}

// remove all the remaining nodes from simulate
while(simulateIndex < simulate.length) {
simulateItem = simulate[simulateIndex]
removes.push(remove(simulate, simulateIndex, simulateItem && simulateItem.key))
}

// If the only moves we have are deletes then we can just
// let the delete patch remove these items.
if (removes.length === deletedItems && !inserts.length) {
return {
children: newChildren,
moves: null
}
}

return {
children: newChildren,
moves: {
removes: removes,
inserts: inserts
}
}
}

下面，我們來簡單介紹下這個排序演算法：

1. 檢查a 和b 中的children是否擁有key欄位，如果沒有，直接返回b 的children陣列。

2. 如果存在，初始化一個數組newChildren，遍歷a 的children元素。

   1. 如果aChildren存在key值，則去bChildren中找對應key值，如果bChildren存在則放入新陣列中，不存在則放入一個null值。
   2. 如果aChildren不存在key值，則從bChildren中不存在key值的第一個元素開始取，放入新陣列中。
3. 遍歷bChildren，將所有achildren中沒有的key值對應的value或者沒有key，並且沒有放入新陣列的子節點放入新陣列中。
4. 將bChildren和新陣列逐個比較，得到從新陣列轉換到bChildren陣列的move 操作patch（即remove +insert ）。
5. 返回新陣列和move 操作列表。

通過上面這個排序演算法，我們可以得到一個新的b 的children陣列。在使用這個陣列來進行比較厚，我們可以將兩個children陣列之間比較的時間複雜度從o(n^2)轉換成o(n)。具體的方法和效果我們可以看下面的DiffChildren演算法。

DiffChildren演算法

function diffChildren(a, b, patch, apply, index) {
var aChildren = a.children
var orderedSet = reorder(aChildren, b.children)
var bChildren = orderedSet.children

var aLen = aChildren.length
var bLen = bChildren.length
var len = aLen > bLen ? aLen : bLen

for (var i = 0; i < len; i++) {
var leftNode = aChildren[i]
var rightNode = bChildren[i]
index += 1

if (!leftNode) {
if (rightNode) {
// Excess nodes in b need to be added
apply = appendPatch(apply,
new VPatch(VPatch.INSERT, null, rightNode))
}
} else {
walk(leftNode, rightNode, patch, index)
}

if (isVNode(leftNode) && leftNode.count) {
index += leftNode.count
}
}

if (orderedSet.moves) {
// Reorder nodes last
apply = appendPatch(apply, new VPatch(
VPatch.ORDER,
a,
orderedSet.moves
))
}

return apply
}

通過上面的重新排序演算法整理了以後，兩個children比較就只需在相同下標的情況下比較了，即aChildren的第N個元素和bChildren的第N個元素進行比較。然後較長的那個元素做insert 操作（bChildren）或者remove 操作（aChildren）即可。最後，我們將move操作再增加到patch中，就能夠抵消我們在reorder時對整個陣列的操作。這樣只需要一次便利就得到了最終的patch值。

總結

整個Virtual DOM的diff演算法設計的非常精巧，通過三個不同的分部演算法來實現了VNode、Props和Children的diff演算法，將整個Virtual DOM的的diff操作分成了三類。同時三個演算法又互相遞迴呼叫，對兩個Virtual DOM數做了一次（偽）深度優先的遞迴比較。

下面一片部落格，我會介紹如何將得到的VPatch操作應用到真實的DOM中，從而導致HTML樹的變化。