diff算法指的是对虚拟dom的对比,所以其本质就是对比两个JS对象
整体流程
patch流程:
判断是否为同类标签,如果不是同类标签,则直接替换,为同类标签,再判断oldvnode和newvnode是否相等,相等就直接return,不相等再分情况
- oldvnode和newvnode都有文本节点:新文本替换旧文本
- oldvnode没有子节点,newvnode有子节点:增加新的子节点
- oldvnode有子节点,newvnode没有子节点:删除旧的子节点
- oldvnode有子节点,newvnode有子节点:进入updateChildren
updateChildren:
最小化更新视图,提高比对性能,进行 同级比对 ,采用的是 首位指针对比法
说明
旧节点首尾节点为oldS,oldE,新虚拟节点首尾节点为newS,endE
比对流程:
-
oldS依次和newS,newE做比对,对比成功后,退出当前比较,将真实dom移动到新虚拟节点中对比成功的位置,oldS标志右移一位,newS/E中对比成功节点向中间移动
-
oldS对比失败,oldE依次和newS,newE做比对,对比成功后,退出当前比较,将真实dom移动到新虚拟节点中对比成功的位置,oldE标志左移一位,newS/E中对比成功节点向中间移动
-
如果oldS,oldE和newS,newE都匹配不到,则旧虚拟DOM key值去对比新虚拟DOM key值,key值相同则服用,并移动到新虚拟DOM的位置
-
当新旧节点中有一个start(s)点跑到end(e)点右侧时,终止比较;对比新虚拟DOM中,真实DOM有多余节点则删除,有缺少节点则渲染