一文带你彻底搞定Diff算法

发布日期:2022-08-07 03:41    点击次数:117
一、基础

Diff算法实现的是最小量更新虚拟DOM。这句话虽然简短,但是涉及到了两个核心要素:虚拟DOM、最小量更新。

1.虚拟DOM

虚拟DOM指的就是将真实的DOM树构造为js对象的形式,从而解决浏览器操作真实DOM的性能问题。

例如:如下DOM与虚拟DOM之间的映射关系

2.最小量更新

Diff的用途就是在新老虚拟DOM之间找到最小更新的部分,从而将该部分对应的DOM进行更新。

二、整个流程

Diff算法真的很美,整个流程如下图所示:

首先比较一下新旧节点是不是同一个节点(可通过比较sel(选择器)和key(唯一标识)值是不是相同),不是同一个节点则进行暴力删除(注:先以旧节点为基准插入新节点,然后再删除旧节点)。 若是同一个节点则需要进一步比较

完全相同, 爱上鲨鱼的人鱼不做处理

新节点内容为文本,直接替换完事

新节点有子节点,这个时候就要仔细考虑一下了:若老节点没有子元素,新闻资讯则直接清空老节点,将新节点的子元素插入即可;若老节点有子元素则就需要按照上述的更新策略老搞定了(记住更新策略,又可以吹好几年了,666666)。

三、实战

光说不练假把式,下面直接输出diff算法的核心内容。

3.1 patch函数

Diff算法的入口函数,主要判断新旧节点是不是同一个节点,然后交由不同的逻辑进行处理。

export default function patch(oldVnode, newVnode) {     // 判断传入的第一个参数,是DOM节点还是虚拟节点     if (oldVnode.sel === ''