vue diff算法与虚拟dom知识整理(8) 手写patch实现简易版的节点第一次上dom树

news2024/11/26 0:57:12

上一文我们整理了一下 patch 函数的整体过程
我不知道大家有没有保留我们之前学手写H函数时的那个案例我们要将index.jsi还原成这样
参考代码如下

import h from "./snabbdom/h";

const dom1 = h("div",{
  props: {class: "dom"}
},"文本测试");

const dom2 = h("div",{
  props: {class: "dom"}
},[
  h("div",{},"java"),
  h("div",{},"html"),
  h("div",{},[
    h("div",{},"react"),
    h("div",{},"css")
  ])
]);

const dom3 = h("div",{
  props: {class: "dom"}
},h("div",{},"java"));

console.log(dom1);
console.log(dom2);
console.log(dom3);

只是说我们还是要用自己写的那个h函数
但这次我们真的是要把虚拟节点上树了

我们在案例的 src下的snabbdom 下创建一个 patch.js
在这里插入图片描述
可能有人会问我们看到的不是init的吗？
没错在源码中 patch 是init的一部分 init其实就是组装了各种模型但我们只需要做一个简易版的patch 做一下虚拟节点上树和比较最小化更新就好了

然后我们在案例 src下的snabbdom 下创建一个createElement.js

然后我们先写patch.js的代码便于大家理解
patch.js 参考代码如下

import vnode from "./vnode";
import createElement from "./createElement";

export default function(oldVnode, newVnode) {
    //先判断oldVnode  第一个参数 是一个虚拟节点  还是一个真实的dom节点
    if(!oldVnode.sel) {
        //如果oldVnode中 拿不到sel  表示这是一个真实的节点  因为虚拟节点中  sel 代表标签类型选择器
        //那么 我们就要将虚拟节点转为真实的节点
        //这里 我们通过vnode  将真实节点转为真实节点
        /*
            第一个参数sel  标签选择器  我们通过tagName.toLowerCase() 获取dom节点的 标签类型
            第二个参数data  标签的数据  dom老节点肯定是没有的  我们直接{}
            第三个参数  children  子集集合   我们这里肯定是没有的  直接 []  或者  undefined
            第四个参数  text  文本内容 我们这里 没有直接undefined
            最后一个   elm  他上树的节点   我们直接给他自己  oldVnode
        */  
        oldVnode = vnode(oldVnode.tagName.toLowerCase(),{},[],undefined,oldVnode);
    }

    //判断  oldVnode  和  newVnode 是不是同一个节点
    //判断的条件是  sel  标签选择器  和  key  元素表示是否都相同
    if(oldVnode.sel == newVnode.sel && oldVnode.key == newVnode.key) {

    } else {
        //else 走进来 表示两者并不是同一个节点
        //那就执行 暴力拆除旧的  插入新的
        createElement(newVnode, oldVnode.elm);
    }
}

这里我们就做了上文说的两件事第一件判断第一个节点是不是一个虚拟节点如果不是通过 vnode 转为虚拟节点这里我注释写的还是比较全的大家可以看一下

然后判断两个虚拟节点是不是一样的如果是那我们这篇文章先放在这我妈后面再去补这块逻辑
然后如果不是同一个节点
我们走进createElement 首先我解释一下这两个参数首先第一个是patch接到的第二个参数就是要渲染上去的虚拟节点然后第二个是 oldVnode.elm
那我们上面调用vnode 最后一个参数对应elm 是不是他这个elm存的就是真实的dom节点本身啊

所以第二个参数我们是将这个存在elm中的真实的dom节点传进去了

好了然后我们来写createElement.js的逻辑

//创建节点
//函数接收两个参数  vnode  需要插入的虚拟节点   pivot  需要插入到哪一个元素之前
export default function(vnode, pivot) {
    //先用虚拟节点的sel  标签名选择器 创建一个真实的dom节点
    let domNode = document.createElement(vnode.sel);
    //如果  能判断到虚拟节点下的 text 文本属性  而且 拿不到children子节点  或者 children  子节点 没有长度
    if(vnode.text && (!vnode.children || !vnode.children.length)){
        //这个条件达到  表示  他的内容是一个文章  没有子节点
        //直接将虚拟节点的 text 文本内容 通过innerText写入到新节点中
        domNode.innerText = vnode.text;

        /*
            通过pivot上树   通过pivot.parentNode  获取到  pivot的父元素 放在insertBefore前 这个大家可以了解一下  insertBefore的概念
            然后将刚刚通过虚拟节点创建的节点  通过insertBefore上树  惨遭就是pivot
        */
        pivot.parentNode.insertBefore(domNode, pivot);
    }

}

我们这里接到了这两个参数第一个要插入的虚拟节点第二个对照插入位置的一个真实dom节点

进来我们先通过createElement 将虚拟节点创建成一个真正的dom孤儿节点
createElement(标签名) 这里需要标签名而我们虚拟节点的sel中是不是正好就是标签名？

然后我们先判断如果这个节点的文本不是空的而且他没有子节点
那就直接通过innerText 将虚拟节点中的文本属性text写进去

这样我们参照插入的节点和要插入的孤儿节点都好了就直接执行
insertBefore上树

然后我们修改 src下 index.js 代码如下

import h from "./snabbdom/h";
import patch from "./snabbdom/patch";

const container = document.getElementById("container");

const vnode = h("h1", {}, "你好");

patch( container, vnode)

这里我们先获取了页面上的 container元素然后通过h函数创建了一个 h1虚拟节点
然后我们通过自己写的patch进行上树操作

运行代码如下
在这里插入图片描述
可以看到方法虽然写的捡漏了一些但中心思想没变节点它还是上去了

然后我们将src下 index.js 代码改一下我们试试多层嵌套

import h from "./snabbdom/h";
import patch from "./snabbdom/patch";

const container = document.getElementById("container");

const vnode = h("ul", {}, [
  h("li", {}, "1A"),
  h("li", {}, "2B"),
  h("li", {}, "3C"),
  h("li", {}, "4D"),
]);

patch( container, vnode)