diff算法解析

 

需要看源码或视频再捋一捋

 

h函数

 

入参

1. sel(标签 比如 ‘div’ )
2. data(比如{key:’A’,className:’Aclass’} 节点等属性)
3. children (子元素 比如[ h(‘div’), h(‘p’)] h函数返回是一个vnode节点  )
4. text(字符串,也就是vnode内容)

snabbdom源码

 

只了解原理的话 手写个简易版的即可

h.js  作用生成虚拟dom节点vnode

 

vnode.js 返回一个虚拟dom节点对象

五个入参(1.标签 2.属性 3.子节点 4.文字内容 5.要插入的节点位置)

key 从属性中取出

 

 

这时候我们要生产虚拟节点都已经构建完成了 需要patch（更新dom）

以下为验证调用方法试例

 

 

 patch.js 更新dom节点

 

createElement.js 真正创建节点 将vnode创建为dom 是孤儿节点 并返回

patchVnode.js

UpdateChildren.js 新虚拟dom有children 旧虚拟dom也有children ====>> diff算法核心