虚拟节点介绍以及diff算法介绍

虚拟节点的类别

Vnode的类别

• 注释节点
• 文本节点
• 元素节点
• 组件节点
• 函数式组件
• 克隆组件

diff算法

diff 的过程就是调用名为 patch 的函数，比较新旧节点，一边比较一边给真实的DOM打补丁

创建新增的节点

什么时候需要创建新节点

1. oldVNode里面不存在的数据而在newVNode里面存在的时候
2. 首次渲染页面
3. 当newVNode和oldVNode完全不是一个节点的时候
   

删除节点

当一个节点只在oldVNode存在而在newVNode中不存在时，这些节点就是被标记为废弃的点，被废弃的点要从DOM中删除掉。

更新节点

当新老节点是同一个节点时，需要更加详细的对比

1. 判断新旧节点是不是静态节点，如果是静态节点就不需要进行更新操作，直接跳过更新节点的过程，比如普通的元素节点
2. 当新旧节点不是静态节点的时候，要以新的虚拟节点VNode来更新视图
   • 新VNode有文本属性
     直接用这个文本节点替换掉原来节点的子节点
   • 新VNode没有文本属性
     

更新子节点

1. 创建子节点
   插入的新节点的位置是所有未处理的节点的前面，因为如果是插入未处理的节点的最后部分, 那么一旦一个新节点的后面也是一个新节点, 那么逻辑顺序就反了。
   

2. 移动子节点
   当新旧节点中都存在同一节点,但是这个节点的位置发生了变化, 那么就需要移动了，把需要移动的节点,移动到所有未处理节点的最前面。
   

3. 删除子节点
   oldVNode存在但是newVNode不存在的节点，当newVNode所有的节点都被循环了一遍之后, 如果oldVNode里面还有没有被处理的, 那么这些节点就是被废弃的需要删除的节点。