diff算法
diff算法可以進行精細化比對,實現(xiàn)最小量更新。
新虛擬DOM和老虛擬DOM進行diff(精細化比較),算出應該如何最小量更新赃份,最后反映到真正的DOM上。
虛擬dom
image.png
虛擬dom就是用js對象描述DOM的層次結(jié)構(gòu)奢米,DOM中的一切屬性都在虛擬DOM中有對應的屬性抓韩。
虛擬dom結(jié)合patch函數(shù)生成真實dom節(jié)點并渲染到頁面上。
h函數(shù)和vnode函數(shù)結(jié)合用來產(chǎn)生虛擬節(jié)點(vnode)
diff算法
注意點:
- 節(jié)點中的key很重要鬓长,key是這個節(jié)點的唯一標識谒拴,告訴diff算法,在更改前后他們是同一個虛擬DOM節(jié)點涉波。
- 只有同一個虛擬節(jié)點才進行精細化比較英上,否則就會進行暴力刪除舊的、插入新的啤覆。(如何判定是否是同一個虛擬節(jié)點苍日?答:選擇器相同且key相同)
-
只進行同層比較,不進行跨層比較窗声。即便是同一片虛擬節(jié)點相恃,但是跨層了,diff算法也不會精細化比較嫌佑。
image.png