【總結(jié)】1135- 圖解虛擬 DOM 之 DIff 算法
原文: https://juejin.cn/post/7000266544181674014
1. 目錄
1. 相關(guān)知識(shí)點(diǎn):2. 虛擬DOM(Virtual DOM)2.1. 什么是虛擬DOM2.2. 為什么要使用虛擬DOM2.3. 虛擬dom庫(kù)3. Diff算法4. snabbdom的核心4.1. init函數(shù)4.2. h函數(shù)4.3. patch函數(shù)(核心)4.4. patchVnode4.5. 題外話:diff算法簡(jiǎn)介4.6. updateChildren(核中核:判斷子節(jié)點(diǎn)的差異)5. 最后
面試官:"你了解虛擬DOM(Virtual DOM)跟Diff算法嗎,請(qǐng)描述一下它們";
我:"額,...鵝,那個(gè)",完了??,突然智商不在線,沒組織好語(yǔ)言沒答好或者壓根就答不出來;
所以這次我總結(jié)一下相關(guān)的知識(shí)點(diǎn),讓你可以有一個(gè)清晰的認(rèn)知之余也會(huì)讓你在今后遇到這種情況可以「坦然自若,應(yīng)付自如,游刃有余」:
2. 相關(guān)知識(shí)點(diǎn):
虛擬DOM(Virtual DOM):
「什么是虛擬dom」
「為什么要使用虛擬dom」
虛擬DOM庫(kù)
DIFF算法:
init函數(shù)
h函數(shù)
「patch函數(shù)」
「patchVnode函數(shù)」
「updateChildren函數(shù)」
snabbDom源碼
3. 虛擬DOM(Virtual DOM)
3.1. 什么是虛擬DOM
一句話總結(jié)虛擬DOM就是一個(gè)用來描述真實(shí)DOM的「javaScript對(duì)象」,這樣說可能不夠形象,那我們來舉個(gè)??:分別用代碼來描述真實(shí)DOM以及虛擬DOM
真實(shí)DOM:
<ul class="list">
<li>ali>
<li>bli>
<li>cli>
ul>
對(duì)應(yīng)的虛擬DOM:
let vnode = h('ul.list', [
h('li','a'),
h('li','b'),
h('li','c'),
])
console.log(vnode)
3.1.1 控制臺(tái)打印出來的「Vnode」:
3.1.2 h函數(shù)生成的虛擬DOM這個(gè)JS對(duì)象(Vnode)的源碼:
export interface VNodeData {
props?: Props
attrs?: Attrs
class?: Classes
style?: VNodeStyle
dataset?: Dataset
on?: On
hero?: Hero
attachData?: AttachData
hook?: Hooks
key?: Key
ns?: string // for SVGs
fn?: () => VNode // for thunks
args?: any[] // for thunks
[key: string]: any // for any other 3rd party module
}
export type Key = string | number
const interface VNode = {
sel: string | undefined, // 選擇器
data: VNodeData | undefined, // VNodeData上面定義的VNodeData
children: Arraystring> | undefined, //子節(jié)點(diǎn),與text互斥
text: string | undefined, // 標(biāo)簽中間的文本內(nèi)容
elm: Node | undefined, // 轉(zhuǎn)換而成的真實(shí)DOM
key: Key | undefined // 字符串或者數(shù)字
}
3.1.2 補(bǔ)充:
上面的h函數(shù)大家可能有點(diǎn)熟悉的感覺但是一時(shí)間也沒想起來,沒關(guān)系我來幫大伙回憶;開發(fā)中常見的現(xiàn)實(shí)場(chǎng)景,render函數(shù)渲染:
// 案例1 vue項(xiàng)目中的main.js的創(chuàng)建vue實(shí)例
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
//案例2 列表中使用render渲染
columns: [
{
title: "操作",
key: "action",
width: 150,
render: (h, params) => {
return h('section', [
h('Button', {
props: {
size: 'small'
},
style: {
marginRight: '5px',
marginBottom: '5px',
},
on: {
click: () => {
this.toEdit(params.row.uuid);
}
}
}, '編輯')
]);
}
}
]
3.2. 為什么要使用虛擬DOM
MVVM框架解決視圖和狀態(tài)同步問題
模板引擎可以簡(jiǎn)化視圖操作,沒辦法跟蹤狀態(tài)
虛擬DOM跟蹤狀態(tài)變化
參考github上virtual-dom的動(dòng)機(jī)描述
長(zhǎng)按識(shí)別二維碼查看原文
https://github.com/Matt-Esch/virtual-dom? ? ? 虛擬DOM可以維護(hù)程序的狀態(tài),跟蹤上一次的狀態(tài)
通過比較前后兩次狀態(tài)差異更新真實(shí)DOM
跨平臺(tái)使用
瀏覽器平臺(tái)渲染DOM
服務(wù)端渲染SSR(Nuxt.js/Next.js),前端是vue向,后者是react向
原生應(yīng)用(Weex/React Native)
小程序(mpvue/uni-app)等
真實(shí)DOM的屬性很多，創(chuàng)建DOM節(jié)點(diǎn)開銷很大
虛擬DOM只是普通JavaScript對(duì)象，描述屬性并不需要很多，創(chuàng)建開銷很小
「復(fù)雜視圖情況下提升渲染性能」(操作dom性能消耗大,減少操作dom的范圍可以提升性能)
「靈魂發(fā)問」:使用了虛擬DOM就一定會(huì)比直接渲染真實(shí)DOM快嗎?答案當(dāng)然是否定的,且聽我說:
「舉例」:當(dāng)一個(gè)節(jié)點(diǎn)變更時(shí)DOMA->DOMB
「舉例」:當(dāng)DOM樹里面的某個(gè)子節(jié)點(diǎn)的內(nèi)容變更時(shí):
總結(jié):「復(fù)雜視圖情況下提升渲染性能」,因?yàn)?code style="font-weight: 700;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 1em;color: rgb(145, 109, 213);word-break: break-all;overflow-x: auto;border-radius: 2px;">虛擬DOM+Diff算法可以精準(zhǔn)找到DOM樹變更的地方,減少DOM的操作(重排重繪)
3.3. 虛擬dom庫(kù)
Snabbdom
長(zhǎng)按識(shí)別二維碼查看原文
https://github.com/snabbdom/snabbdom? ? ? Vue.js2.x內(nèi)部使用的虛擬DOM就是改造的Snabbdom
大約200SLOC(single line of code)
通過模塊可擴(kuò)展
源碼使用TypeScript開發(fā)
最快的Virtual DOM之一
virtual-dom
長(zhǎng)按識(shí)別二維碼查看原文
https://github.com/Matt-Esch/virtual-dom? ? ?
4. Diff算法
在看完上述的文章之后相信大家已經(jīng)對(duì)Diff算法有一個(gè)初步的概念,沒錯(cuò),Diff算法其實(shí)就是找出兩者之間的差異;
diff 算法首先要明確一個(gè)概念就是 Diff 的對(duì)象是虛擬DOM（virtual dom），更新真實(shí) DOM 是 Diff 算法的結(jié)果。
下面我將會(huì)手撕snabbdom源碼核心部分為大家打開Diff的心,給點(diǎn)耐心,別關(guān)網(wǎng)頁(yè),我知道你們都是這樣:
5. snabbdom的核心
init()設(shè)置模塊.創(chuàng)建patch()函數(shù)使用
h()函數(shù)創(chuàng)建JavaScript對(duì)象(Vnode)描述真實(shí)DOMpatch()比較新舊兩個(gè)Vnode把變化的內(nèi)容更新到
真實(shí)DOM樹
5.1. init函數(shù)
init函數(shù)時(shí)設(shè)置模塊,然后創(chuàng)建patch()函數(shù),我們先通過場(chǎng)景案例來有一個(gè)直觀的體現(xiàn):
import {init} from 'snabbdom/build/package/init.js'
import {h} from 'snabbdom/build/package/h.js'
// 1.導(dǎo)入模塊
import {styleModule} from "snabbdom/build/package/modules/style";
import {eventListenersModule} from "snabbdom/build/package/modules/eventListeners";
// 2.注冊(cè)模塊
const patch = init([
styleModule,
eventListenersModule
])
// 3.使用h()函數(shù)的第二個(gè)參數(shù)傳入模塊中使用的數(shù)據(jù)(對(duì)象)
let vnode = h('section', [
h('h1', {style: {backgroundColor: 'red'}}, 'Hello world'),
h('p', {on: {click: eventHandler}}, 'Hello P')
])
function eventHandler() {
alert('疼,別摸我')
}
const app = document.querySelector('#app')
patch(app,vnode)
當(dāng)init使用了導(dǎo)入的模塊就能夠在h函數(shù)中用這些模塊提供的api去創(chuàng)建虛擬DOM(Vnode)對(duì)象;在上文中就使用了樣式模塊以及事件模塊讓創(chuàng)建的這個(gè)虛擬DOM具備樣式屬性以及事件屬性,最終通過patch函數(shù)對(duì)比兩個(gè)虛擬dom(會(huì)先把a(bǔ)pp轉(zhuǎn)換成虛擬dom),更新視圖;
我們?cè)俸?jiǎn)單看看init的源碼部分:
// src/package/init.ts
/* 第一參數(shù)就是各個(gè)模塊
第二參數(shù)就是DOMAPI,可以把DOM轉(zhuǎn)換成別的平臺(tái)的API,
也就是說支持跨平臺(tái)使用,當(dāng)不傳的時(shí)候默認(rèn)是htmlDOMApi,見下文
init是一個(gè)高階函數(shù),一個(gè)函數(shù)返回另外一個(gè)函數(shù),可以緩存modules,與domApi兩個(gè)參數(shù),
那么以后直接只傳oldValue跟newValue(vnode)就可以了*/
export function init (modules: Array>, domApi?: DOMAPI ) {
...
return function patch (oldVnode: VNode | Element, vnode: VNode): VNode {}
}
5.2. h函數(shù)
些地方也會(huì)用createElement來命名,它們是一樣的東西,都是創(chuàng)建虛擬DOM的,在上述文章中相信大伙已經(jīng)對(duì)h函數(shù)有一個(gè)初步的了解并且已經(jīng)聯(lián)想了使用場(chǎng)景,就不作場(chǎng)景案例介紹了,直接上源碼部分:
// h函數(shù)
export function h (sel: string): VNode
export function h (sel: string, data: VNodeData | null): VNode
export function h (sel: string, children: VNodeChildren): VNode
export function h (sel: string, data: VNodeData | null, children: VNodeChildren): VNode
export function h (sel: any, b?: any, c?: any): VNode {
var data: VNodeData = {}
var children: any
var text: any
var i: number
...
return vnode(sel, data, children, text, undefined) //最終返回一個(gè)vnode函數(shù)
};
// vnode函數(shù)
export function vnode (sel: string | undefined,
data: any | undefined,
children: Array | undefined,
text: string | undefined,
elm: Element | Text | undefined ): VNode {
const key = data === undefined ? undefined : data.key
return { sel, data, children, text, elm, key } //最終生成Vnode對(duì)象
}
「總結(jié)」:h函數(shù)先生成一個(gè)vnode函數(shù),然后vnode函數(shù)再生成一個(gè)Vnode對(duì)象(虛擬DOM對(duì)象)
5.2.1 補(bǔ)充:
在h函數(shù)源碼部分涉及一個(gè)函數(shù)重載的概念,簡(jiǎn)單說明一下:
參數(shù)個(gè)數(shù)或參數(shù)類型不同的函數(shù)()
JavaScript中沒有重載的概念
TypeScript中有重載,不過重載的實(shí)現(xiàn)還是通過代碼調(diào)整參數(shù)
重載這個(gè)概念個(gè)參數(shù)相關(guān),和返回值無關(guān)
實(shí)例1(函數(shù)重載-參數(shù)個(gè)數(shù))
function add(a:number,b:number){
console.log(a+b)
}
function add(a:number,b:number,c:number){
console.log(a+b+c)
}
add(1,2)
add(1,2,3)
實(shí)例2(函數(shù)重載-參數(shù)類型)
function add(a:number,b:number){
console.log(a+b)
}
function add(a:number,b:string){
console.log(a+b)
}
add(1,2)
add(1,'2')
5.3. patch函數(shù)(核心)
要是看完前面的鋪墊,看到這里你可能走神了,醒醒啊,這是核心啊,上高地了兄弟;
pactch(oldVnode,newVnode)
把新節(jié)點(diǎn)中變化的內(nèi)容渲染到真實(shí)DOM,最后返回新節(jié)點(diǎn)作為下一次處理的舊節(jié)點(diǎn)(核心)
對(duì)比新舊
VNode是否相同節(jié)點(diǎn)(節(jié)點(diǎn)的key和sel相同)如果不是相同節(jié)點(diǎn),刪除之前的內(nèi)容,重新渲染
如果是相同節(jié)點(diǎn),再判斷新的
VNode是否有text,如果有并且和oldVnode的text不同直接更新文本內(nèi)容(patchVnode)如果新的VNode有children,判斷子節(jié)點(diǎn)是否有變化
(updateChildren,最麻煩,最難實(shí)現(xiàn))
源碼:
return function patch(oldVnode: VNode | Element, vnode: VNode): VNode {
let i: number, elm: Node, parent: Node
const insertedVnodeQueue: VNodeQueue = []
// cbs.pre就是所有模塊的pre鉤子函數(shù)集合
for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]()
// isVnode函數(shù)時(shí)判斷oldVnode是否是一個(gè)虛擬DOM對(duì)象
if (!isVnode(oldVnode)) {
// 若不是即把Element轉(zhuǎn)換成一個(gè)虛擬DOM對(duì)象
oldVnode = emptyNodeAt(oldVnode)
}
// sameVnode函數(shù)用于判斷兩個(gè)虛擬DOM是否是相同的,源碼見補(bǔ)充1;
if (sameVnode(oldVnode, vnode)) {
// 相同則運(yùn)行patchVnode對(duì)比兩個(gè)節(jié)點(diǎn),關(guān)于patchVnode后面會(huì)重點(diǎn)說明(核心)
patchVnode(oldVnode, vnode, insertedVnodeQueue)
} else {
elm = oldVnode.elm! // !是ts的一種寫法代碼oldVnode.elm肯定有值
// parentNode就是獲取父元素
parent = api.parentNode(elm) as Node
// createElm是用于創(chuàng)建一個(gè)dom元素插入到vnode中(新的虛擬DOM)
createElm(vnode, insertedVnodeQueue)
if (parent !== null) {
// 把dom元素插入到父元素中,并且把舊的dom刪除
api.insertBefore(parent, vnode.elm!, api.nextSibling(elm))// 把新創(chuàng)建的元素放在舊的dom后面
removeVnodes(parent, [oldVnode], 0, 0)
}
}
for (i = 0; i < insertedVnodeQueue.length; ++i) {
insertedVnodeQueue[i].data!.hook!.insert!(insertedVnodeQueue[i])
}
for (i = 0; i < cbs.post.length; ++i) cbs.post[i]()
return vnode
}
5.3.1 補(bǔ)充1: sameVnode函數(shù)
function sameVnode(vnode1: VNode, vnode2: VNode): boolean { 通過key和sel選擇器判斷是否是相同節(jié)點(diǎn)
return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel
}
5.4. patchVnode
第一階段觸發(fā)
prepatch函數(shù)以及update函數(shù)(都會(huì)觸發(fā)prepatch函數(shù),兩者不完全相同才會(huì)觸發(fā)update函數(shù))第二階段,真正對(duì)比新舊
vnode差異的地方第三階段,觸發(fā)
postpatch函數(shù)更新節(jié)點(diǎn)
源碼:
function patchVnode(oldVnode: VNode, vnode: VNode, insertedVnodeQueue: VNodeQueue) {
const hook = vnode.data?.hook
hook?.prepatch?.(oldVnode, vnode)
const elm = vnode.elm = oldVnode.elm!
const oldCh = oldVnode.children as VNode[]
const ch = vnode.children as VNode[]
if (oldVnode === vnode) return
if (vnode.data !== undefined) {
for (let i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
vnode.data.hook?.update?.(oldVnode, vnode)
}
if (isUndef(vnode.text)) { // 新節(jié)點(diǎn)的text屬性是undefined
if (isDef(oldCh) && isDef(ch)) { // 當(dāng)新舊節(jié)點(diǎn)都存在子節(jié)點(diǎn)
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue) //并且他們的子節(jié)點(diǎn)不相同執(zhí)行updateChildren函數(shù),后續(xù)會(huì)重點(diǎn)說明(核心)
} else if (isDef(ch)) { // 只有新節(jié)點(diǎn)有子節(jié)點(diǎn)
// 當(dāng)舊節(jié)點(diǎn)有text屬性就會(huì)把''賦予給真實(shí)dom的text屬性
if (isDef(oldVnode.text)) api.setTextContent(elm, '')
// 并且把新節(jié)點(diǎn)的所有子節(jié)點(diǎn)插入到真實(shí)dom中
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
} else if (isDef(oldCh)) { // 清除真實(shí)dom的所有子節(jié)點(diǎn)
removeVnodes(elm, oldCh, 0, oldCh.length - 1)
} else if (isDef(oldVnode.text)) { // 把''賦予給真實(shí)dom的text屬性
api.setTextContent(elm, '')
}
} else if (oldVnode.text !== vnode.text) { //若舊節(jié)點(diǎn)的text與新節(jié)點(diǎn)的text不相同
if (isDef(oldCh)) { // 若舊節(jié)點(diǎn)有子節(jié)點(diǎn),就把所有的子節(jié)點(diǎn)刪除
removeVnodes(elm, oldCh, 0, oldCh.length - 1)
}
api.setTextContent(elm, vnode.text!) // 把新節(jié)點(diǎn)的text賦予給真實(shí)dom
}
hook?.postpatch?.(oldVnode, vnode) // 更新視圖
}
看得可能有點(diǎn)蒙蔽,下面再上一副思維導(dǎo)圖:
5.5. 題外話:diff算法簡(jiǎn)介
「?jìng)鹘y(tǒng)diff算法」
虛擬DOM中的Diff算法
傳統(tǒng)算法查找兩顆樹每一個(gè)節(jié)點(diǎn)的差異會(huì)運(yùn)行n1(dom1的節(jié)點(diǎn)數(shù))*n2(dom2的節(jié)點(diǎn)數(shù))次方去對(duì)比,找到差異的部分再去更新
「snabbdom的diff算法優(yōu)化」
Snbbdom根據(jù)DOM的特點(diǎn)對(duì)傳統(tǒng)的diff算法做了
優(yōu)化DOM操作時(shí)候很少會(huì)跨級(jí)別操作節(jié)點(diǎn)
只比較
同級(jí)別的節(jié)點(diǎn)
下面我們就會(huì)介紹updateChildren函數(shù)怎么去對(duì)比子節(jié)點(diǎn)的異同,也是Diff算法里面的一個(gè)核心以及難點(diǎn);
5.6. updateChildren(核中核:判斷子節(jié)點(diǎn)的差異)
這個(gè)函數(shù)我分為三個(gè)部分,
部分1:聲明變量,部分2:同級(jí)別節(jié)點(diǎn)比較,部分3:循環(huán)結(jié)束的收尾工作(見下圖);
同級(jí)別節(jié)點(diǎn)比較的五種情況:oldStartVnode/newStartVnode(舊開始節(jié)點(diǎn)/新開始節(jié)點(diǎn))相同oldEndVnode/newEndVnode(舊結(jié)束節(jié)點(diǎn)/新結(jié)束節(jié)點(diǎn))相同oldStartVnode/newEndVnode(舊開始節(jié)點(diǎn)/新結(jié)束節(jié)點(diǎn))相同oldEndVnode/newStartVnode(舊結(jié)束節(jié)點(diǎn)/新開始節(jié)點(diǎn))相同特殊情況當(dāng)1,2,3,4的情況都不符合的時(shí)候就會(huì)執(zhí)行,在oldVnodes里面尋找跟newStartVnode一樣的節(jié)點(diǎn)然后位移到oldStartVnode,若沒有找到在就oldStartVnode創(chuàng)建一個(gè)執(zhí)行過程是一個(gè)循環(huán),在每次循環(huán)里,只要執(zhí)行了上述的情況的五種之一就會(huì)結(jié)束一次循環(huán)
循環(huán)結(jié)束的收尾工作:直到oldStartIdx>oldEndIdx || newStartIdx>newEndIdx(代表舊節(jié)點(diǎn)或者新節(jié)點(diǎn)已經(jīng)遍歷完)
為了更加直觀的了解,我們?cè)賮砜纯?code style="font-weight: 700;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 1em;color: rgb(145, 109, 213);word-break: break-all;overflow-x: auto;border-radius: 2px;">同級(jí)別節(jié)點(diǎn)比較的五種情況的實(shí)現(xiàn)細(xì)節(jié):
5.6.1 新開始節(jié)點(diǎn)和舊開始節(jié)點(diǎn)(情況1)
若
情況1符合:(從新舊節(jié)點(diǎn)的開始節(jié)點(diǎn)開始對(duì)比,oldCh[oldStartIdx]和newCh[newStartIdx]進(jìn)行sameVnode(key和sel相同)判斷是否相同節(jié)點(diǎn))則執(zhí)行
patchVnode找出兩者之間的差異,更新圖;如沒有差異則什么都不操作,結(jié)束一次循環(huán)oldStartIdx++/newStartIdx++
5.6.2 新結(jié)束節(jié)點(diǎn)和舊結(jié)束節(jié)點(diǎn)(情況2)
若
情況1不符合就判斷情況2,若符合:(從新舊節(jié)點(diǎn)的結(jié)束節(jié)點(diǎn)開始對(duì)比,oldCh[oldEndIdx]和newCh[newEndIdx]對(duì)比,執(zhí)行sameVnode(key和sel相同)判斷是否相同節(jié)點(diǎn))執(zhí)行
patchVnode找出兩者之間的差異,更新視圖,;如沒有差異則什么都不操作,結(jié)束一次循環(huán)oldEndIdx--/newEndIdx--
5.6.3 舊開始節(jié)點(diǎn)/新結(jié)束節(jié)點(diǎn)(情況3)
若
情況1,2都不符合,就會(huì)嘗試情況3:(舊節(jié)點(diǎn)的開始節(jié)點(diǎn)與新節(jié)點(diǎn)的結(jié)束節(jié)點(diǎn)開始對(duì)比,oldCh[oldStartIdx]和newCh[newEndIdx]對(duì)比,執(zhí)行sameVnode(key和sel相同)判斷是否相同節(jié)點(diǎn))執(zhí)行
patchVnode找出兩者之間的差異,更新視圖,如沒有差異則什么都不操作,結(jié)束一次循環(huán)oldCh[oldStartIdx]對(duì)應(yīng)的真實(shí)dom位移到oldCh[oldEndIdx]對(duì)應(yīng)的真實(shí)dom后oldStartIdx++/newEndIdx--;
5.6.4 舊結(jié)束節(jié)點(diǎn)/新開始節(jié)點(diǎn)(情況4)
若
情況1,2,3都不符合,就會(huì)嘗試情況4:(舊節(jié)點(diǎn)的結(jié)束節(jié)點(diǎn)與新節(jié)點(diǎn)的開始節(jié)點(diǎn)開始對(duì)比,oldCh[oldEndIdx]和newCh[newStartIdx]對(duì)比,執(zhí)行sameVnode(key和sel相同)判斷是否相同節(jié)點(diǎn))執(zhí)行
patchVnode找出兩者之間的差異,更新視圖,如沒有差異則什么都不操作,結(jié)束一次循環(huán)oldCh[oldEndIdx]對(duì)應(yīng)的真實(shí)dom位移到oldCh[oldStartIdx]對(duì)應(yīng)的真實(shí)dom前oldEndIdx--/newStartIdx++;
5.6.5 新開始節(jié)點(diǎn)/舊節(jié)點(diǎn)數(shù)組中尋找節(jié)點(diǎn)(情況5)
從舊節(jié)點(diǎn)里面尋找,若尋找到與
newCh[newStartIdx]相同的節(jié)點(diǎn)(且叫對(duì)應(yīng)節(jié)點(diǎn)[1]),執(zhí)行patchVnode找出兩者之間的差異,更新視圖,如沒有差異則什么都不操作,結(jié)束一次循環(huán)對(duì)應(yīng)節(jié)點(diǎn)[1]對(duì)應(yīng)的真實(shí)dom位移到oldCh[oldStartIdx]對(duì)應(yīng)的真實(shí)dom前
若沒有尋找到相同的節(jié)點(diǎn),則創(chuàng)建一個(gè)與newCh[newStartIdx]節(jié)點(diǎn)對(duì)應(yīng)的真實(shí)dom插入到oldCh[oldStartIdx]對(duì)應(yīng)的真實(shí)dom前newStartIdx++
下面我們?cè)俳榻B一下結(jié)束循環(huán)的收尾工作(oldStartIdx>oldEndIdx || newStartIdx>newEndIdx):
新節(jié)點(diǎn)的所有子節(jié)點(diǎn)先遍歷完(newStartIdx>newEndIdx),循環(huán)結(jié)束新節(jié)點(diǎn)的所有子節(jié)點(diǎn)遍歷結(jié)束就是把沒有對(duì)應(yīng)相同節(jié)點(diǎn)的子節(jié)點(diǎn)刪除
舊節(jié)點(diǎn)的所有子節(jié)點(diǎn)先遍歷完(oldStartIdx>oldEndIdx),循環(huán)結(jié)束舊節(jié)點(diǎn)的所有子節(jié)點(diǎn)遍歷結(jié)束就是在多出來的子節(jié)點(diǎn)插入到舊節(jié)點(diǎn)結(jié)束節(jié)點(diǎn)前;(源碼:newCh[newEndIdx + 1].elm),就是對(duì)應(yīng)的舊結(jié)束節(jié)點(diǎn)的真實(shí)dom,newEndIdx+1是因?yàn)樵谄ヅ涞较嗤墓?jié)點(diǎn)需要-1,所以需要加回來就是結(jié)束節(jié)點(diǎn)
最后附上源碼:
function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {
let oldStartIdx = 0; // 舊節(jié)點(diǎn)開始節(jié)點(diǎn)索引
let newStartIdx = 0; // 新節(jié)點(diǎn)開始節(jié)點(diǎn)索引
let oldEndIdx = oldCh.length - 1; // 舊節(jié)點(diǎn)結(jié)束節(jié)點(diǎn)索引
let oldStartVnode = oldCh[0]; // 舊節(jié)點(diǎn)開始節(jié)點(diǎn)
let oldEndVnode = oldCh[oldEndIdx]; // 舊節(jié)點(diǎn)結(jié)束節(jié)點(diǎn)
let newEndIdx = newCh.length - 1; // 新節(jié)點(diǎn)結(jié)束節(jié)點(diǎn)索引
let newStartVnode = newCh[0]; // 新節(jié)點(diǎn)開始節(jié)點(diǎn)
let newEndVnode = newCh[newEndIdx]; // 新節(jié)點(diǎn)結(jié)束節(jié)點(diǎn)
let oldKeyToIdx; // 節(jié)點(diǎn)移動(dòng)相關(guān)
let idxInOld; // 節(jié)點(diǎn)移動(dòng)相關(guān)
let elmToMove; // 節(jié)點(diǎn)移動(dòng)相關(guān)
let before;
// 同級(jí)別節(jié)點(diǎn)比較
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
if (oldStartVnode == null) {
oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
}
else if (oldEndVnode == null) {
oldEndVnode = oldCh[--oldEndIdx];
}
else if (newStartVnode == null) {
newStartVnode = newCh[++newStartIdx];
}
else if (newEndVnode == null) {
newEndVnode = newCh[--newEndIdx];
}
else if (sameVnode(oldStartVnode, newStartVnode)) { // 判斷情況1
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
oldStartVnode = oldCh[++oldStartIdx];
newStartVnode = newCh[++newStartIdx];
}
else if (sameVnode(oldEndVnode, newEndVnode)) { // 情況2
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
oldEndVnode = oldCh[--oldEndIdx];
newEndVnode = newCh[--newEndIdx];
}
else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right情況3
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm));
oldStartVnode = oldCh[++oldStartIdx];
newEndVnode = newCh[--newEndIdx];
}
else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left情況4
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);
oldEndVnode = oldCh[--oldEndIdx];
newStartVnode = newCh[++newStartIdx];
}
else { // 情況5
if (oldKeyToIdx === undefined) {
oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
}
idxInOld = oldKeyToIdx[newStartVnode.key];
if (isUndef(idxInOld)) { // New element // 創(chuàng)建新的節(jié)點(diǎn)在舊節(jié)點(diǎn)的新節(jié)點(diǎn)前
api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
}
else {
elmToMove = oldCh[idxInOld];
if (elmToMove.sel !== newStartVnode.sel) { // 創(chuàng)建新的節(jié)點(diǎn)在舊節(jié)點(diǎn)的新節(jié)點(diǎn)前
api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
}
else {
// 在舊節(jié)點(diǎn)數(shù)組中找到相同的節(jié)點(diǎn)就對(duì)比差異更新視圖,然后移動(dòng)位置
patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
oldCh[idxInOld] = undefined;
api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm);
}
}
newStartVnode = newCh[++newStartIdx];
}
}
// 循環(huán)結(jié)束的收尾工作
if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
if (oldStartIdx > oldEndIdx) {
// newCh[newEndIdx + 1].elm就是舊節(jié)點(diǎn)數(shù)組中的結(jié)束節(jié)點(diǎn)對(duì)應(yīng)的dom元素
// newEndIdx+1是因?yàn)樵谥俺晒ζヅ淞薾ewEndIdx需要-1
// newCh[newEndIdx + 1].elm,因?yàn)橐呀?jīng)匹配過有相同的節(jié)點(diǎn)了,它就是等于舊節(jié)點(diǎn)數(shù)組中的結(jié)束節(jié)點(diǎn)對(duì)應(yīng)的dom元素(oldCh[oldEndIdx + 1].elm)
before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;
// 把新節(jié)點(diǎn)數(shù)組中多出來的節(jié)點(diǎn)插入到before前
addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
}
else {
// 這里就是把沒有匹配到相同節(jié)點(diǎn)的節(jié)點(diǎn)刪除掉
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
}
}
}
5.6.6 key的作用
Diff操作可以
更加快速;Diff操作可以更加準(zhǔn)確;
(避免渲染錯(cuò)誤)不推薦使用索引作為key
以下我們看看這些作用的實(shí)例:
5.6.6 Diff操作可以更加準(zhǔn)確;(避免渲染錯(cuò)誤):
實(shí)例:a,b,c三個(gè)dom元素中的b,c間插入一個(gè)z元素
沒有設(shè)置key
當(dāng)設(shè)置了key:
5.6.6 Diff操作可以更加準(zhǔn)確;(避免渲染錯(cuò)誤)
實(shí)例:a,b,c三個(gè)dom元素,修改了a元素的某個(gè)屬性再去在a元素前新增一個(gè)z元素
沒有設(shè)置key:
因?yàn)闆]有設(shè)置key,默認(rèn)都是undefined,所以節(jié)點(diǎn)都是相同的,更新了text的內(nèi)容但還是沿用了之前的dom,所以實(shí)際上a->z(a原本打勾的狀態(tài)保留了,只改變了text),b->a,c->b,d->c,遍歷完畢發(fā)現(xiàn)還要增加一個(gè)dom,在最后新增一個(gè)text為d的dom元素
設(shè)置了key:
當(dāng)設(shè)置了key,a,b,c,d都有對(duì)應(yīng)的key,a->a,b->b,c->c,d->d,內(nèi)容相同無需更新,遍歷結(jié)束,新增一個(gè)text為z的dom元素
5.6.6 不推薦使用索引作為key:
設(shè)置索引為key:
這明顯效率不高,我們只希望找出不同的節(jié)點(diǎn)更新,而使用索引作為key會(huì)增加運(yùn)算時(shí)間,我們可以把key設(shè)置為與節(jié)點(diǎn)text為一致就可以解決這個(gè)問題:
6. 關(guān)注我
回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~
點(diǎn)擊“閱讀原文”查看 120+ 篇原創(chuàng)文章