diff算法流程图解

139 阅读1分钟

前言

diff算法代码太复杂?看图就完事了,其中细节没有过多解释,理清楚整体流程

  • 整体核心就是想尽办法复用原来的dom

对比流程

旧头->新头,成功:

把当前新vnode节点真实dom属性指向旧的,新旧头指针向后移动一个单位

旧尾->新尾,成功:

把当前新vnode节点真实dom属性 指向旧的,新旧尾指针向前移动一个单位

旧头->新尾,成功:

把当前新vnode节点真实dom属性 指向旧的,尾指针向前,头指针向后移动,这时需要将当前指向的vnode所挂载的真实dom移动到 旧尾指针指向的真实dom后面

旧尾->新头

把当前新vnode节点真实dom属性 指向旧的,尾指针向前,头指针向后移动,将当前指向的vnode所挂载的真实dom移动到 旧头指针指向的真实dom前面

以上都不满足?

以当前新vnode节点为基准在旧vnode中查找,找到后 把当前新vnode节点真实dom属性 指向旧的 当前查找的vnode为 新头指针,则将找到的dom移动到旧头指针所指向的vnode所挂载的真实dom 的前面,反之亦然

还没找到可以复用的?

只好创建dom

图片字体有点小,放大网页看的更清楚,或者点击放大

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png