DIff算法看不懂就一起來(lái)錘我(帶圖)
前言
面試官:"你了解虛擬DOM(Virtual DOM)跟Diff算法嗎,請(qǐng)描述一下它們";
我:"額,...鵝,那個(gè)",完了??,突然智商不在線,沒(méi)組織好語(yǔ)言沒(méi)答好或者壓根就答不出來(lái);
所以這次我總結(jié)一下相關(guān)的知識(shí)點(diǎn),讓你可以有一個(gè)清晰的認(rèn)知之余也會(huì)讓你在今后遇到這種情況可以坦然自若,應(yīng)付自如,游刃有余:
相關(guān)知識(shí)點(diǎn):
虛擬DOM(Virtual DOM): 什么是虛擬dom
為什么要使用虛擬dom
虛擬DOM庫(kù)
DIFF算法: init函數(shù) h函數(shù) patch函數(shù) patchVnode函數(shù) updateChildren函數(shù) snabbDom源碼
虛擬DOM(Virtual DOM)
什么是虛擬DOM
一句話總結(jié)虛擬DOM就是一個(gè)用來(lái)描述真實(shí)DOM的javaScript對(duì)象,這樣說(shuō)可能不夠形象,那我們來(lái)舉個(gè)??:分別用代碼來(lái)描述真實(shí)DOM以及虛擬DOM
真實(shí)DOM:
<ul?class="list">
????<li>ali>
????<li>bli>
????<li>cli>
ul>
復(fù)制代碼
對(duì)應(yīng)的虛擬DOM:
let?vnode?=?h('ul.list',?[
??h('li','a'),
??h('li','b'),
??h('li','c'),
])
console.log(vnode)
復(fù)制代碼
控制臺(tái)打印出來(lái)的Vnode:
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ù)字
}
復(fù)制代碼
補(bǔ)充:
上面的h函數(shù)大家可能有點(diǎn)熟悉的感覺(jué)但是一時(shí)間也沒(méi)想起來(lái),沒(méi)關(guān)系我來(lái)幫大伙回憶; 開(kāi)發(fā)中常見(jiàn)的現(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('div',?[
????????????????h('Button',?{
????????????????????props:?{
????????????????????????size:?'small'
????????????????????},
????????????????????style:?{
????????????????????????marginRight:?'5px',
????????????????????????marginBottom:?'5px',
????????????????????},
????????????????????on:?{
????????????????????????click:?()?=>?{
????????????????????????????this.toEdit(params.row.uuid);
????????????????????????}
????????????????????}
????????????????},?'編輯')
????????????]);
????????}
????}
]
復(fù)制代碼
為什么要使用虛擬DOM
MVVM框架解決視圖和狀態(tài)同步問(wèn)題 模板引擎可以簡(jiǎn)化視圖操作,沒(méi)辦法跟蹤狀態(tài) 虛擬DOM跟蹤狀態(tài)變化 參考github上virtual-dom[1]的動(dòng)機(jī)描述 虛擬DOM可以維護(hù)程序的狀態(tài),跟蹤上一次的狀態(tài) 通過(guò)比較前后兩次狀態(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)開(kāi)銷很大 虛擬DOM只是普通JavaScript對(duì)象，描述屬性并不需要很多，創(chuàng)建開(kāi)銷很小 復(fù)雜視圖情況下提升渲染性能(操作dom性能消耗大,減少操作dom的范圍可以提升性能)
靈魂發(fā)問(wèn):使用了虛擬DOM就一定會(huì)比直接渲染真實(shí)DOM快嗎?答案當(dāng)然是否定的,且聽(tīng)我說(shuō):
舉例:當(dāng)一個(gè)節(jié)點(diǎn)變更時(shí)DOMA->DOMB
上述情況: 示例1是創(chuàng)建一個(gè)DOMB然后替換掉DOMA; 示例2去創(chuàng)建虛擬DOM+DIFF算法比對(duì)發(fā)現(xiàn)DOMB跟DOMA不是相同的節(jié)點(diǎn),最后還是創(chuàng)建一個(gè)DOMB然后替換掉DOMA; 可以明顯看出1是更快的,同樣的結(jié)果,2還要去創(chuàng)建虛擬DOM+DIFF算啊對(duì)比 所以說(shuō)使用虛擬DOM比直接操作真實(shí)DOM就一定要快這個(gè)說(shuō)法是錯(cuò)誤的,不嚴(yán)謹(jǐn)?shù)?/code>
舉例:當(dāng)DOM樹(shù)里面的某個(gè)子節(jié)點(diǎn)的內(nèi)容變更時(shí):
當(dāng)一些復(fù)雜的節(jié)點(diǎn),比如說(shuō)一個(gè)父節(jié)點(diǎn)里面有多個(gè)子節(jié)點(diǎn),當(dāng)只是一個(gè)子節(jié)點(diǎn)的內(nèi)容發(fā)生了改變,那么我們沒(méi)有必要像示例1重新去渲染這個(gè)DOM樹(shù),這個(gè)時(shí)候虛擬DOM+DIFF算法就能夠得到很好的體現(xiàn),我們通過(guò)示例2使用虛擬DOM+Diff算法去找出改變了的子節(jié)點(diǎn)更新它的內(nèi)容就可以了
總結(jié):復(fù)雜視圖情況下提升渲染性能,因?yàn)?code style="font-size: 14px;border-radius: 4px;font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(155, 110, 35);background-color: rgb(255, 245, 227);padding: 3px;margin: 3px;">虛擬DOM+Diff算法可以精準(zhǔn)找到DOM樹(shù)變更的地方,減少DOM的操作(重排重繪)
虛擬dom庫(kù)
Snabbdom[2] Vue.js2.x內(nèi)部使用的虛擬DOM就是改造的Snabbdom 大約200SLOC(single line of code) 通過(guò)模塊可擴(kuò)展 源碼使用TypeScript開(kāi)發(fā) 最快的Virtual DOM之一 virtual-dom[3]
Diff算法
在看完上述的文章之后相信大家已經(jīng)對(duì)Diff算法有一個(gè)初步的概念,沒(méi)錯(cuò),Diff算法其實(shí)就是找出兩者之間的差異;
diff 算法首先要明確一個(gè)概念就是 Diff 的對(duì)象是虛擬DOM（virtual dom），更新真實(shí) DOM 是 Diff 算法的結(jié)果。
下面我將會(huì)手撕snabbdom源碼核心部分為大家打開(kāi)Diff的心,給點(diǎn)耐心,別關(guān)網(wǎng)頁(yè),我知道你們都是這樣:
snabbdom的核心
init()設(shè)置模塊.創(chuàng)建patch()函數(shù)使用 h()函數(shù)創(chuàng)建JavaScript對(duì)象(Vnode)描述真實(shí)DOMpatch()比較新舊兩個(gè)Vnode把變化的內(nèi)容更新到 真實(shí)DOM樹(shù)
init函數(shù)
init函數(shù)時(shí)設(shè)置模塊,然后創(chuàng)建patch()函數(shù),我們先通過(guò)場(chǎng)景案例來(lái)有一個(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('div',?[
??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)
復(fù)制代碼
當(dāng)init使用了導(dǎo)入的模塊就能夠在h函數(shù)中用這些模塊提供的api去創(chuàng)建虛擬DOM(Vnode)對(duì)象;在上文中就使用了樣式模塊以及事件模塊讓創(chuàng)建的這個(gè)虛擬DOM具備樣式屬性以及事件屬性,最終通過(guò)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,
也就是說(shuō)支持跨平臺(tái)使用,當(dāng)不傳的時(shí)候默認(rèn)是htmlDOMApi,見(jiàn)下文
???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?{}
}
復(fù)制代碼
h函數(shù)
些地方也會(huì)用createElement來(lái)命名,它們是一樣的東西,都是創(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ù)
};
復(fù)制代碼
//?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ì)象
}
復(fù)制代碼
總結(jié):h函數(shù)先生成一個(gè)vnode函數(shù),然后vnode函數(shù)再生成一個(gè)Vnode對(duì)象(虛擬DOM對(duì)象)
補(bǔ)充:
在h函數(shù)源碼部分涉及一個(gè)函數(shù)重載的概念,簡(jiǎn)單說(shuō)明一下:
參數(shù)個(gè)數(shù)或參數(shù)類型不同的函數(shù)() JavaScript中沒(méi)有重載的概念 TypeScript中有重載,不過(guò)重載的實(shí)現(xiàn)還是通過(guò)代碼調(diào)整參數(shù)
重載這個(gè)概念個(gè)參數(shù)相關(guān),和返回值無(wú)關(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)
復(fù)制代碼
實(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')
復(fù)制代碼
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?????//?isVnode函數(shù)時(shí)判斷oldVnode是否是一個(gè)虛擬DOM對(duì)象
????if?(!isVnode(oldVnode))?{
????????//?若不是即把Element轉(zhuǎn)換成一個(gè)虛擬DOM對(duì)象
????????oldVnode?=?emptyNodeAt(oldVnode)
????}
????//?sameVnode函數(shù)用于判斷兩個(gè)虛擬DOM是否是相同的,源碼見(jiàn)補(bǔ)充1;
????if?(sameVnode(oldVnode,?vnode))?{
????????//?相同則運(yùn)行patchVnode對(duì)比兩個(gè)節(jié)點(diǎn),關(guān)于patchVnode后面會(huì)重點(diǎn)說(shuō)明(核心)
????????patchVnode(oldVnode,?vnode,?insertedVnodeQueue)
????}?else?{
????????elm?=?oldVnode.elm!?//?!是ts的一種寫(xiě)法代碼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[i].data!.hook!.insert!(insertedVnodeQueue[i])
????}
????for?(i?=?0;?i?????return?vnode
}
復(fù)制代碼
補(bǔ)充1: sameVnode函數(shù)
function?sameVnode(vnode1:?VNode,?vnode2:?VNode):?boolean?{?通過(guò)key和sel選擇器判斷是否是相同節(jié)點(diǎn)
????return?vnode1.key?===?vnode2.key?&&?vnode1.sel?===?vnode2.sel
}
復(fù)制代碼
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?????????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)說(shuō)明(核心)
????????}?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)?//?更新視圖
}
復(fù)制代碼
看得可能有點(diǎn)蒙蔽,下面再上一副思維導(dǎo)圖:
題外話:diff算法簡(jiǎn)介
傳統(tǒng)diff算法
虛擬DOM中的Diff算法 傳統(tǒng)算法查找兩顆樹(shù)每一個(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);
updateChildren(核中核:判斷子節(jié)點(diǎn)的差異)
這個(gè)函數(shù)我分為三個(gè)部分, 部分1:聲明變量,部分2:同級(jí)別節(jié)點(diǎn)比較,部分3:循環(huán)結(jié)束的收尾工作(見(jiàn)下圖);
同級(jí)別節(jié)點(diǎn)比較的五種情況:oldStartVnode/newStartVnode(舊開(kāi)始節(jié)點(diǎn)/新開(kāi)始節(jié)點(diǎn))相同oldEndVnode/newEndVnode(舊結(jié)束節(jié)點(diǎn)/新結(jié)束節(jié)點(diǎn))相同oldStartVnode/newEndVnode(舊開(kāi)始節(jié)點(diǎn)/新結(jié)束節(jié)點(diǎn))相同oldEndVnode/newStartVnode(舊結(jié)束節(jié)點(diǎn)/新開(kāi)始節(jié)點(diǎn))相同特殊情況當(dāng)1,2,3,4的情況都不符合的時(shí)候就會(huì)執(zhí)行,在oldVnodes里面尋找跟newStartVnode一樣的節(jié)點(diǎn)然后位移到oldStartVnode,若沒(méi)有找到在就oldStartVnode創(chuàng)建一個(gè)執(zhí)行過(guò)程是一個(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è)賮?lái)看看同級(jí)別節(jié)點(diǎn)比較的五種情況的實(shí)現(xiàn)細(xì)節(jié):
新開(kāi)始節(jié)點(diǎn)和舊開(kāi)始節(jié)點(diǎn)(情況1)
若 情況1符合:(從新舊節(jié)點(diǎn)的開(kāi)始節(jié)點(diǎn)開(kāi)始對(duì)比,oldCh[oldStartIdx]和newCh[newStartIdx]進(jìn)行sameVnode(key和sel相同)判斷是否相同節(jié)點(diǎn))則執(zhí)行 patchVnode找出兩者之間的差異,更新圖;如沒(méi)有差異則什么都不操作,結(jié)束一次循環(huán)oldStartIdx++/newStartIdx++
新結(jié)束節(jié)點(diǎn)和舊結(jié)束節(jié)點(diǎn)(情況2)
若 情況1不符合就判斷情況2,若符合:(從新舊節(jié)點(diǎn)的結(jié)束節(jié)點(diǎn)開(kāi)始對(duì)比,oldCh[oldEndIdx]和newCh[newEndIdx]對(duì)比,執(zhí)行sameVnode(key和sel相同)判斷是否相同節(jié)點(diǎn))執(zhí)行 patchVnode找出兩者之間的差異,更新視圖,;如沒(méi)有差異則什么都不操作,結(jié)束一次循環(huán)oldEndIdx--/newEndIdx--
舊開(kāi)始節(jié)點(diǎn)/新結(jié)束節(jié)點(diǎn)(情況3)
若 情況1,2都不符合,就會(huì)嘗試情況3:(舊節(jié)點(diǎn)的開(kāi)始節(jié)點(diǎn)與新節(jié)點(diǎn)的結(jié)束節(jié)點(diǎn)開(kāi)始對(duì)比,oldCh[oldStartIdx]和newCh[newEndIdx]對(duì)比,執(zhí)行sameVnode(key和sel相同)判斷是否相同節(jié)點(diǎn))執(zhí)行 patchVnode找出兩者之間的差異,更新視圖,如沒(méi)有差異則什么都不操作,結(jié)束一次循環(huán)oldCh[oldStartIdx]對(duì)應(yīng)的真實(shí)dom位移到oldCh[oldEndIdx]對(duì)應(yīng)的真實(shí)dom后oldStartIdx++/newEndIdx--;
舊結(jié)束節(jié)點(diǎn)/新開(kāi)始節(jié)點(diǎn)(情況4)
若 情況1,2,3都不符合,就會(huì)嘗試情況4:(舊節(jié)點(diǎn)的結(jié)束節(jié)點(diǎn)與新節(jié)點(diǎn)的開(kāi)始節(jié)點(diǎn)開(kāi)始對(duì)比,oldCh[oldEndIdx]和newCh[newStartIdx]對(duì)比,執(zhí)行sameVnode(key和sel相同)判斷是否相同節(jié)點(diǎn))執(zhí)行 patchVnode找出兩者之間的差異,更新視圖,如沒(méi)有差異則什么都不操作,結(jié)束一次循環(huán)oldCh[oldEndIdx]對(duì)應(yīng)的真實(shí)dom位移到oldCh[oldStartIdx]對(duì)應(yīng)的真實(shí)dom前oldEndIdx--/newStartIdx++;
新開(kāi)始節(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找出兩者之間的差異,更新視圖,如沒(méi)有差異則什么都不操作,結(jié)束一次循環(huán)對(duì)應(yīng)節(jié)點(diǎn)[1]對(duì)應(yīng)的真實(shí)dom位移到oldCh[oldStartIdx]對(duì)應(yīng)的真實(shí)dom前
若沒(méi)有尋找到相同的節(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é)束就是把沒(méi)有對(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é)束就是在多出來(lái)的子節(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,所以需要加回來(lái)就是結(jié)束節(jié)點(diǎn)
最后附上源碼:
function?updateChildren(parentElm,?oldCh,?newCh,?insertedVnodeQueue)?{
????let?oldStartIdx?=?0;????????????????//?舊節(jié)點(diǎn)開(kāi)始節(jié)點(diǎn)索引
????let?newStartIdx?=?0;????????????????//?新節(jié)點(diǎn)開(kāi)始節(jié)點(diǎn)索引
????let?oldEndIdx?=?oldCh.length?-?1;???//?舊節(jié)點(diǎn)結(jié)束節(jié)點(diǎn)索引
????let?oldStartVnode?=?oldCh[0];???????//?舊節(jié)點(diǎn)開(kāi)始節(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)開(kāi)始節(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)匹配過(guò)有相同的節(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ù)組中多出來(lái)的節(jié)點(diǎn)插入到before前
????????????addVnodes(parentElm,?before,?newCh,?newStartIdx,?newEndIdx,?insertedVnodeQueue);
????????}
????????else?{
????????????//?這里就是把沒(méi)有匹配到相同節(jié)點(diǎn)的節(jié)點(diǎn)刪除掉
????????????removeVnodes(parentElm,?oldCh,?oldStartIdx,?oldEndIdx);
????????}
????}
}
復(fù)制代碼
key的作用
Diff操作可以 更加快速;Diff操作可以更加準(zhǔn)確; (避免渲染錯(cuò)誤)不推薦使用索引作為key
以下我們看看這些作用的實(shí)例:
Diff操作可以更加準(zhǔn)確;(避免渲染錯(cuò)誤):
實(shí)例:a,b,c三個(gè)dom元素中的b,c間插入一個(gè)z元素
沒(méi)有設(shè)置key 
當(dāng)設(shè)置了key:
Diff操作可以更加準(zhǔn)確;(避免渲染錯(cuò)誤)
實(shí)例:a,b,c三個(gè)dom元素,修改了a元素的某個(gè)屬性再去在a元素前新增一個(gè)z元素
沒(méi)有設(shè)置key:
因?yàn)闆](méi)有設(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)容相同無(wú)需更新,遍歷結(jié)束,新增一個(gè)text為z的dom元素
不推薦使用索引作為key:
設(shè)置索引為key:
這明顯效率不高,我們只希望找出不同的節(jié)點(diǎn)更新,而使用索引作為key會(huì)增加運(yùn)算時(shí)間,我們可以把key設(shè)置為與節(jié)點(diǎn)text為一致就可以解決這個(gè)問(wèn)題:
最后
如有描述錯(cuò)誤或者不明的地方請(qǐng)?jiān)谙路皆u(píng)論聯(lián)系我,我會(huì)立刻更新,如有收獲,請(qǐng)為我點(diǎn)個(gè)贊??這是對(duì)我的莫大的支持,謝謝各位
關(guān)于本文
作者：渣渣xiong
https://juejin.cn/post/7000266544181674014
戳上方卡片，即可了解更多
評(píng)論
圖片
表情