5.diff算法和虚拟dom

本文主要是介绍5.diff算法和虚拟dom，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

虚拟dom可以说成是一个JS对象，它是用一个js对象来类比dom结构，他不会重复渲染，他只会重新传染已经变化了的内容，未变化的内容不会改变。

diff算法

//1.先遍历老的 虚拟dom
//2.遍历新的 虚拟dom
//3.对比排序

优化

//只会比较同一层级，不跨层级比较
//还会比较标签名，如果不同，则不继续深度比较，且暴力删除旧的节点
//key的主要作用其实就是对比两个虚拟节点时，判断其是否为相同节点。加了key以后，我们可以更为明确的判断两个节点是否为同一个虚拟节点，是的话判断子节点是否有变更（有变更更新真实Dom），不是的话继续比。如果不加key的话，如果两个不同节点的标签名恰好相同，那么就会被判定为同一个节点（key都为undefined），结果一对比这两个节点的子节点发现不一样，这样会凭空增加很多对真实Dom的操作，从而导致页面更频繁得进行重绘和回流

patch进行新老节点的替换

//patch(container,vnode)
container在第一次的时候，其实是一个dom节点，在进行vnode替换的时候，会变成虚拟dom对象

diff算法的大概过程

加入我现在有一个新的html页面，里面有一个div元素，引入了一个index.js文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="container"></div><script src="./index.js" type="module"></script></body>
</html>

index.js文件我们会引入一个h 和patch函数，h主要用来判断params是字符串还是数组，然后通过一个vnode返回虚拟对象

而patch是用来进行新老节点的对比和替换

// 引入创建虚拟dom函数
import h from './h.js'// 引入patch新老节点替换函数
import patch from './patch.js'
// 第一种是接收三个参数 sel标签名，data数据，params 
// 其中param可以使string，也可以是一个数组 当他为数组的时候代表他是子数据的
let vnode1 = h('div', {}, '你好呀');let vnode2 = h('ul', {}, [h('li', {}, 'a'),h('li', {}, 'b'),h('li', {}, '我是diff LI')
])
patch(container,vnode2)

在h.js中，引入vnode进行虚拟节点化

我们会在传递虚拟dom的时候，判断如果他的params是一个字符串，就调用return vnode并传递相关参数

如果他是一个数组，就声明一个children属性，然后进行for循环，把每个属性push进children，最后将children当成参数传递给vnode

import vnode from './vnode.js'export default function (sel, data, params) {// 假如说你传过来的虚拟dom的text存在 而且类型是一个字符串，就返回vnode函数的值if (typeof params == 'string') {return vnode(sel, data, undefined, params, undefined);}else if (Array.isArray(params)) {// 当他的params是数组的时候，证明里面有他的子数据let children = [];for(let v of params){children.push(v)}return vnode(sel, data,children,undefined,undefined)}
}

vnode.js进行节点的虚拟化

export default function (sel, data, children, text, elm) {// sel是dom标签// data是class 或者id属性// children 是他的子节点// params 可能是一个文本，也可能是他的子节点的内容  // elm是dom元素return {sel, data, children, text, elm}
}

patch.js

patch会传递两个参数，在我们第一次进行patch比较的时候，第一个oldVnode一定是一个真实的dom元素，我们通过判断他的sel属性，真实的dom肯定没有sel属性。也就是当他的sel是undefined，我们调用vnode进行虚拟节点化

然后再判断判断新旧的虚拟dom的sel是不是一样的，如果一样

如果新节点没有children，那就证明新的节点是一个文本，直接把旧的替换成新的文本如果新的有children，旧的也有，那么就是最核心的部分了，我们放页面最后讲解新的有children，旧的没有，把旧的清空，添加新的

如果不一样就暴力删除旧的节点，创建新插入的节点。通过createElement，appendChild将虚拟的节点转化为真实节点，然后把真实节点添加进去，在删除老的节点

import vnode from "./vnode.js";
import createElements from './createElement.js'// 当新老节点一样的时候，替换内容即可
export default function(oldVnode, newVnode){// 如果他没有这个sel，那么就证明他是一个非虚拟节点，就把他变成虚拟dom// 注意 我们定义的虚拟节点的sel  是定义的标签名 if(oldVnode.sel == undefined){oldVnode = vnode(// 标签名oldVnode.tagName.toLowerCase(),{},//data[],//children,undefined,oldVnode // elm   他的 dom  元素element)}// 判断新旧的虚拟dom的sel是不是一样的if (oldVnode.sel === newVnode.sel) {// 如果是一样的 就很多}else{// 如果前后的sel不一样  就暴力删除旧的节点，创建新插入的节点// 把新的虚拟节点，创建为新的dom节点// createElements( newVnode )返回回来的新的dom结构let newVnodeElm = createElements( newVnode )//  获取旧的虚拟节点let oldVnodeElm = oldVnode.elmif (newVnodeElm) {oldVnodeElm.parentNode.insertBefore(newVnodeElm,oldVnodeElm)}// 删除旧节点oldVnodeElm.parentNode.removeChild( oldVnodeElm )}
}

diff核心部分 ( 最复杂的情况)

// 他们的对比都是按照 我标注的序号进行对比，意思就是 当第一个不满足 就会 用第二个 以此类推1.  旧前 和 新前  用旧的第一个和新的第一个进行对比，若比对成功，则将他们的指针++ 进行下一步的对比
2.  旧后 和 新后  用旧的最后一个和新的最后一个进行对比，若比对成功，则将他们的指针—— 进行下一步的对比
3.  旧前 和 新后  用旧的当前的节点和新的最后一个节点进行比较 如果成功则让当前的节点++新后最后一个节点--
4.  旧后 和 新前  用旧的最后一个节点和新的第一个节点比较，如果成功让当前的节点--，让新前的第一个节点++
5.  进行一个查找和匹配
6.  进行元素的创建和元素的删除