前端-Virtual Dom

這篇具有很好參考價值的文章主要介紹了前端-Virtual Dom。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

為什么需要 Virtual Dom

眾所周知，操作 DOM 是很耗費性能的?件事情，既然如此，我們可以考慮通過 JS 對象來模擬 DOM 對象，畢竟操作 JS 對象?操作
DOM 省時的多

// 假設這?模擬?個 ul，其中包含了 5 個 li
[1, 2, 3, 4, 5]
// 這?替換上?的 li
[1, 2, 5, 4]

 從上述例?中，我們?眼就可以看出先前的 ul 中的第三個 li 被移除了，四五替換了位置。

如果以上操作對應到 DOM 中，那么就是以下代碼


// 刪除第三個 li
ul.childNodes[2].remove()
// 將第四個 li 和第五個交換位置
let fromNode = ul.childNodes[4]
let toNode = node.childNodes[3]
let cloneFromNode = fromNode.cloneNode(true)
let cloenToNode = toNode.cloneNode(true)
ul.replaceChild(cloneFromNode, toNode)
ul.replaceChild(cloenToNode, fromNode)

當然在實際操作中，我們還需要給每個節(jié)點?個標識，作為判斷是同?個節(jié)點的依據(jù)。所以這也是 Vue 和 React 中官?推薦列表?的節(jié)點使?唯?的key 來保證性能。
那么既然 DOM 對象可以通過 JS 對象來模擬，反之也可以通過 JS 對象來渲染出對應的 DOM
以下是?個 JS 對象模擬 DOM 對象的簡單實現(xiàn)


export default class Element {
/**
* @param {String} tag 'div'
* @param {Object} props { class: 'item' }
* @param {Array} children [ Element1, 'text']
* @param {String} key option
*/
constructor(tag, props, children, key) {
this.tag = tag
this.props = props
if (Array.isArray(children)) {

this.children = children
} else if (isString(children)) {
this.key = children
this.children = null
}
if (key) this.key = key
}
// 渲染
render() {
let root = this._createElement(
this.tag,
this.props,
this.children,
this.key
)
document.body.appendChild(root)
return root
}
create() {
return this._createElement(this.tag, this.props, this.children, this.ke
}
// 創(chuàng)建節(jié)點
_createElement(tag, props, child, key) {
// 通過 tag 創(chuàng)建節(jié)點
let el = document.createElement(tag)
// 設置節(jié)點屬性
for (const key in props) {
if (props.hasOwnProperty(key)) {
const value = props[key]
el.setAttribute(key, value)
}
}
if (key) {
el.setAttribute('key', key)
	}
// 遞歸添加?節(jié)點
if (child) {
		child.forEach(element => {
			let child
			if (element instanceof Element) {
			child = this._createElement(
					element.tag,
					element.props,
					element.children,
					element.key
				)
			} else {
				child = document.createTextNode(element)
			}
			el.appendChild(child)
		})
  }
	return el
	}
}

Virtual Dom 算法簡述

既然我們已經(jīng)通過 JS 來模擬實現(xiàn)了 DOM ，那么接下來的難點就在于如何判斷舊的對象和新的對象之間的差異。
DOM 是多叉樹的結(jié)構(gòu)，如果需要完整的對?兩顆樹的差異，那么需要的時間復雜度會是O(n ^ 3) ，這個復雜度肯定是不能接受的。于是 React 團隊優(yōu)化了算法，實現(xiàn)了O(n) 的復雜度來對?差異。
實現(xiàn) O(n) 復雜度的關鍵就是只對?同層的節(jié)點，?不是跨層對?，這也是考慮到在實際業(yè)務中很少會去跨層的移動 DOM 元素
```
所以判斷差異的算法就分為了兩步
```
?先從上?下，從左往右遍歷對象，也就是樹的深度遍歷，這?步中會給每個節(jié)點添加索引，便于最后渲染差異
?旦節(jié)點有?元素，就去判斷?元素是否有不同文章來源地址http://www.zghlxwxcb.cn/news/detail-629529.html

Virtual Dom 算法實現(xiàn)

樹的遞歸

?先我們來實現(xiàn)樹的遞歸算法，在實現(xiàn)該算法前，先來考慮下兩個節(jié)點對?會有?種情況
新的節(jié)點的 tagName 或者 key 和舊的不同，這種情況代表需要替換舊的節(jié)點，并且也不再需要遍歷新舊節(jié)點的?元素了，因為整個舊節(jié)點都被刪掉了
新的節(jié)點的 tagName 和 key （可能都沒有）和舊的相同，開始遍歷?樹
沒有新的節(jié)點，那么什么都不?做

import { StateEnums, isString, move } from './util'
import Element from './element'
export default function diff(oldDomTree, newDomTree) {
// ?于記錄差異
let pathchs = {}
// ?開始的索引為 0
dfs(oldDomTree, newDomTree, 0, pathchs)
return pathchs
}
function dfs(oldNode, newNode, index, patches) {
// ?于保存?樹的更改
let curPatches = []
// 需要判斷三種情況
// 1.沒有新的節(jié)點，那么什么都不?做
// 2.新的節(jié)點的 tagName 和 `key` 和舊的不同，就替換
// 3.新的節(jié)點的 tagName 和 key（可能都沒有） 和舊的相同，開始遍歷?樹
if (!newNode) {
} else if (newNode.tag === oldNode.tag && newNode.key === oldNode.key) {
// 判斷屬性是否變更
let props = diffProps(oldNode.props, newNode.props)
if (props.length) curPatches.push({ type: StateEnums.ChangeProps, props
// 遍歷?樹
diffChildren(oldNode.children, newNode.children, index, patches)
} else {
// 節(jié)點不同，需要替換
curPatches.push({ type: StateEnums.Replace, node: newNode })
}
if (curPatches.length) {
if (patches[index]) {
patches[index] = patches[index].concat(curPatches)
} else {
patches[index] = curPatches
}
}
}

判斷屬性的更改

判斷屬性的更改也分三個步驟

遍歷舊的屬性列表，查看每個屬性是否還存在于新的屬性列表中
遍歷新的屬性列表，判斷兩個列表中都存在的屬性的值是否有變化
在第?步中同時查看是否有屬性不存在與舊的屬性列列表中

function diffProps(oldProps, newProps) {
// 判斷 Props 分以下三步驟
// 先遍歷 oldProps 查看是否存在刪除的屬性
// 然后遍歷 newProps 查看是否有屬性值被修改
// 最后查看是否有屬性新增
let change = []
for (const key in oldProps) {
if (oldProps.hasOwnProperty(key) && !newProps[key]) {
change.push({
prop: key
})
}
}
for (const key in newProps) {
if (newProps.hasOwnProperty(key)) {
const prop = newProps[key]
if (oldProps[key] && oldProps[key] !== newProps[key]) {
change.push({
prop: key,
value: newProps[key]
})
} else if (!oldProps[key]) {
change.push({
prop: key,
value: newProps[key]
})
}
}
}
return change
}

判斷列表差異算法實現(xiàn)

這個算法是整個 Virtual Dom 中最核?的算法，且讓我??為你道來。這?的主要步驟其實和判斷屬性差異是類似的，也是分為三步
遍歷舊的節(jié)點列表，查看每個節(jié)點是否還存在于新的節(jié)點列表中
遍歷新的節(jié)點列表，判斷是否有新的節(jié)點
在第?步中同時判斷節(jié)點是否有移動
PS：該算法只對有 key 的節(jié)點做處理

function listDiff(oldList, newList, index, patches) {
// 為了遍歷?便，先取出兩個 list 的所有 keys
let oldKeys = getKeys(oldList)
let newKeys = getKeys(newList)
let changes = []
// ?于保存變更后的節(jié)點數(shù)據(jù)
// 使?該數(shù)組保存有以下好處
// 1.可以正確獲得被刪除節(jié)點索引
// 2.交換節(jié)點位置只需要操作?遍 DOM
// 3.?于 `diffChildren` 函數(shù)中的判斷，只需要遍歷
// 兩個樹中都存在的節(jié)點，?對于新增或者刪除的節(jié)點來說，完全沒必要
// 再去判斷?遍
let list = []
oldList &&
oldList.forEach(item => {
let key = item.key
if (isString(item)) {
key = item
}
// 尋找新的 children 中是否含有當前節(jié)點
// 沒有的話需要刪除
let index = newKeys.indexOf(key)
if (index === -1) {
list.push(null)
} else list.push(key)
})
// 遍歷變更后的數(shù)組
let length = list.length
// 因為刪除數(shù)組元素是會更改索引的
// 所有從后往前刪可以保證索引不變
for (let i = length - 1; i >= 0; i--) {
// 判斷當前元素是否為空，為空表示需要刪除
if (!list[i]) {
list.splice(i, 1)
changes.push({
type: StateEnums.Remove,
index: i
})
}
}
// 遍歷新的 list，判斷是否有節(jié)點新增或移動
// 同時也對 `list` 做節(jié)點新增和移動節(jié)點的操作
newList &&
newList.forEach((item, i) => {
let key = item.key


if (isString(item)) {
key = item
}
// 尋找舊的 children 中是否含有當前節(jié)點
let index = list.indexOf(key)
// 沒找到代表新節(jié)點，需要插?
if (index === -1 || key == null) {
changes.push({
type: StateEnums.Insert,
node: item,
index: i
})
list.splice(i, 0, key)
} else {
// 找到了，需要判斷是否需要移動
if (index !== i) {
changes.push({
type: StateEnums.Move,
from: index,
to: i
})
move(list, index, i)
}
}
})
return { changes, list }
}
function getKeys(list) {
let keys = []
let text
list &&
list.forEach(item => {
let key
if (isString(item)) {
key = [item]
} else if (item instanceof Element) {
key = item.key
}
keys.push(key)
})
return keys
}

遍歷?元素打標識

對于這個函數(shù)來說，主要功能就兩個
判斷兩個列表差異
- 給節(jié)點打上標記
- 總體來說，該函數(shù)實現(xiàn)的功能很簡單

function diffChildren(oldChild, newChild, index, patches) {
let { changes, list } = listDiff(oldChild, newChild, index, patches)
if (changes.length) {
if (patches[index]) {
patches[index] = patches[index].concat(changes)
} else {
patches[index] = changes
}
}
// 記錄上?個遍歷過的節(jié)點
let last = null
oldChild &&
oldChild.forEach((item, i) => {
let child = item && item.children
if (child) {
index =
last && last.children ? index + last.children.length + 1 : index
let keyIndex = list.indexOf(item.key)
let node = newChild[keyIndex]
// 只遍歷新舊中都存在的節(jié)點，其他新增或者刪除的沒必要遍歷
if (node) {
dfs(item, node, index, patches)
}
} else index += 1
last = item
})
}

渲染差異

通過之前的算法，我們已經(jīng)可以得出兩個樹的差異了。既然知道了差異，就需要局部去更新 DOM 了，下?就讓我們來看看 Virtual 
Dom 算法的最后?步驟

這個函數(shù)主要兩個功能

深度遍歷樹，將需要做變更操作的取出來
局部更新 DOM

let index = 0
export default function patch(node, patchs) {
let changes = patchs[index]
let childNodes = node && node.childNodes
// 這?的深度遍歷和 diff 中是?樣的
if (!childNodes) index += 1
if (changes && changes.length && patchs[index]) {
changeDom(node, changes)
}
let last = null
if (childNodes && childNodes.length) {
childNodes.forEach((item, i) => {
index =
last && last.children ? index + last.children.length + 1 : index +
patch(item, patchs)
last = item
})
}
}
function changeDom(node, changes, noChild) {
changes &&
changes.forEach(change => {
let { type } = change
switch (type) {
case StateEnums.ChangeProps:
let { props } = change
props.forEach(item => {
if (item.value) {
node.setAttribute(item.prop, item.value)
} else {
node.removeAttribute(item.prop)
}
})
break
case StateEnums.Remove:
node.childNodes[change.index].remove()
break
case StateEnums.Insert:
let dom
if (isString(change.node)) {
dom = document.createTextNode(change.node)
} else if (change.node instanceof Element) {
dom = change.node.create()
}
node.insertBefore(dom, node.childNodes[change.index])
break
case StateEnums.Replace:
node.parentNode.replaceChild(change.node.create(), node)
break
case StateEnums.Move:
let fromNode = node.childNodes[change.from]
let toNode = node.childNodes[change.to]
let cloneFromNode = fromNode.cloneNode(true)
let cloenToNode = toNode.cloneNode(true)
node.replaceChild(cloneFromNode, toNode)
node.replaceChild(cloenToNode, fromNode)
break
default:
break
}
})
}

Virtual Dom 算法的實現(xiàn)也就是以下三步

通過 JS 來模擬創(chuàng)建 DOM 對象
判斷兩個對象的差異
渲染差異

let test4 = new Element('div', { class: 'my-div' }, ['test4'])
let test5 = new Element('ul', { class: 'my-div' }, ['test5'])
let test1 = new Element('div', { class: 'my-div' }, [test4])
let test2 = new Element('div', { id: '11' }, [test5, test4])
let root = test1.render()
let pathchs = diff(test1, test2)
console.log(pathchs)
setTimeout(() => {
console.log('開始更新')
patch(root, pathchs)
console.log('結(jié)束更新')
}, 1000)