什么是diff算法
在此之前,我们简单了解一下什么是真实DOM和虚拟DOM之间的区别,
虚拟DOM | 真实DOM |
---|---|
更新得更快 | 更新较慢 |
不能直接更新html | 可以直接更新html |
dom更新无需创建新的dom | 如果dom更新,那么就创建一个新dom |
dom操作非常便利 | dom操作非常昂贵 |
内存无浪费 | 内存浪费严重 |
OK,简单来讲,diff算法主要描述了当数据发生改变时dom都经历了什么,
要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,我们先根据真实DOM生成一颗virtual DOM,当virtual DOM某个节点的数据改变后会生成一个新的Vnode,然后Vnode和oldVnode作对比,发现有不一样的地方就直接修改在真实的DOM上,然后使oldVnode的值为Vnode。
diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁。
以下是流程图(说实话,我不太懂)