编程语言
首页 > 编程语言> > 教你弄懂diff算法的新前/新后/旧前/旧后是什么东西,有啥用。

教你弄懂diff算法的新前/新后/旧前/旧后是什么东西,有啥用。

作者:互联网

之前一直看diff算法的 新前/旧前什么的感觉一脸懵,不知道那玩意是干啥的。今天整理了下。来说说我的理解,如果说的不对,欢迎大佬们指点~

话不多说直接上手。 本文讲解虚拟dom以 snabbdom 为例子讲解

snabbdom地址

新前/新后/旧前/旧后 本质上来说就是两个虚拟dom上的开始和结束节点。那么对比自然也是四个节点之间的对比了。

在讲解对比规则之前,我们先来大致了解下patchVnode方法,也就是对比两个虚拟dom,并且更新真实dom。(讲解的 patchVnode会跳过钩子函数。)

注意:isDef 判断的是不等于 undefined。 isUndef 判断的是等于 undefined

patchVnode源码地址
对比步骤大致可以分

if (oldVnode === vnode) return

diff对比 源码地址

首先我们先建立四个节点和四个节点所对应的索引

在这里插入图片描述
对应的源码八个变量

let oldStartIdx = 0;
let newStartIdx = 0;
let oldEndIdx = oldCh.length - 1;
let oldStartVnode = oldCh[0];
let oldEndVnode = oldCh[oldEndIdx];
let newEndIdx = newCh.length - 1;
let newStartVnode = newCh[0];
let newEndVnode = newCh[newEndIdx];

对比规则

else if (sameVnode(oldEndVnode, newStartVnode)) {
	// 更新dom
	patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
	// 将旧前移动到旧后的后面
	api.insertBefore(parentElm, oldEndVnode.elm!, oldStartVnode.elm!);
	oldEndVnode = oldCh[--oldEndIdx];
	newStartVnode = newCh[++newStartIdx];
}

旧前与新后对比完成之后如果符合条件,那么我们除了需要进行patchVnode对比更新dom之外,还需要把旧前的真实dom节点插入到旧后的后面一个节点,最后再让旧前的指针下移,新后的指针上移

在这里插入图片描述

标签:dom,children,oldCh,虚拟,diff,旧后,旧前,节点,新前
来源: https://blog.csdn.net/chendf__/article/details/122649137