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.elm
if (newVnodeElm) {
oldVnodeElm.parentNode.insertBefore(newVnodeElm,oldVnodeElm)
}
// 删除旧节点
oldVnodeElm.parentNode.removeChild( oldVnodeElm )
}
}
diff核心部分 ( 最复杂的情况)
// 他们的对比都是按照 我标注的序号进行对比，意思就是 当第一个不满足 就会 用第二个 以此类推
1. 旧前 和 新前 用旧的第一个和新的第一个进行对比，若比对成功，则将他们的指针++ 进行下一步的对比
2. 旧后 和 新后 用旧的最后一个和新的最后一个进行对比，若比对成功，则将他们的指针—— 进行下一步的对比
3. 旧前 和 新后 用旧的当前的节点和新的最后一个节点进行比较 如果成功则让当前的节点++新后最后一个节点--
4. 旧后 和 新前 用旧的最后一个节点和新的第一个节点比较，如果成功让当前的节点--，让新前的第一个节点++
5. 进行一个查找和匹配
6. 进行元素的创建和元素的删除