认识

2023年07月12日

柏拉文

越努力，越幸运

一、认识

---

patch 用于负责首次渲染和后续更新或者销毁组件, 主要过程如下:

1. 如果老的 VNode 是真实元素，则表示首次渲染，创建整棵 DOM 树，并插入 body，然后移除老的模版节点

2. 如果老的 VNode 不是真实元素，并且新的 VNode 也存在，则表示更新阶段，执行 patchVnode

   1. 首先是全量更新所有的属性

   2. 如果新老 VNode 都有孩子，则递归执行 updateChildren，进行 diff 过程

      1. 同层比较（降低时间复杂度）深度优先（递归）

      2. 而且前端很少有完全打乱节点顺序的情况，所以做了四种假设，假设新老 VNode 的开头结尾存在相同节点，一旦命中假设，就避免了一次循环，降低了 diff 的时间复杂度，提高执行效率。如果不幸没有命中假设，则执行遍历，从老的 VNode 中找到新的 VNode 的开始节点

      3. 找到相同节点，则执行 patchVnode，然后将老节点移动到正确的位置

      4. 如果老的 VNode 先于新的 VNode 遍历结束，则剩余的新的 VNode 执行新增节点操作

      5. 如果新的 VNode 先于老的 VNode 遍历结束，则剩余的老的 VNode 执行删除操纵，移除这些老节点

   3. 如果新的 VNode 有孩子，老的 VNode 没孩子，则新增这些新孩子节点

   4. 如果老的 VNode 有孩子，新的 VNode 没孩子，则删除这些老孩子节点

   5. 剩下一种就是更新文本节点

3. 如果新的 VNode 不存在，老的 VNode 存在，则调用 destroy，销毁老节点