Renderer 更新 -> 双端 Diff

function patchChildren(n1, n2) {
  // ... 前面的逻辑

  // 新旧子节点都是数组，使用 diff 算法
  if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
    // 老的是数组
    if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
      // 新的也是数组，进入全量 diff
      patchKeyedChildren(n1.children, n2.children, el)
    }
    else {
      // 新的不是数组，卸载老的数组
      unmountChildren(n1.children)
    }
  }

  // ...
}

function patchKeyedChildren(c1, c2, container) {
  /**
   * 双端 diff 算法流程：
   * 1. 从头部开始对比，找出相同的前缀节点
   * 2. 从尾部开始对比，找出相同的后缀节点
   * 3. 根据对比结果处理剩余节点
   */

  let i = 0 // 当前对比的起始索引
  const e1 = c1.length - 1 // 旧子节点数组的最后一个元素索引
  const e2 = c2.length - 1 // 新子节点数组的最后一个元素索引

  // 1. 从头部开始对比（sync from start）
  /*
   * 场景示例：在尾部新增节点
   * 旧节点 (c1): [a, b]
   * 新节点 (c2): [a, b, c]
   *
   * 对比过程：
   * - 初始状态: i = 0, e1 = 1, e2 = 2
   * - 第一轮: a === a，patch(a, a)，i++ -> i = 1
   * - 第二轮: b === b，patch(b, b)，i++ -> i = 2
   * - 第三轮: i > e1，退出循环
   * - 结果: i = 2, e1 = 1, e2 = 2
   */
  while (i <= e1 && i <= e2) {
    const n1 = c1[i]
    const n2 = c2[i]

    // 判断节点类型是否相同
    if (isSameVNodeType(n1, n2)) {
      // 类型相同，进行对比更新
      patch(n1, n2, container)
    }
    else {
      // 类型不同，停止头部对比
      break
    }

    i++
  }

  // 2. 从尾部开始对比（sync from end）
  /*
   * 场景示例：在头部新增节点
   * 旧节点 (c1): [a, b]
   * 新节点 (c2): [c, a, b]
   *
   * 对比过程：
   * - 头部对比后: i = 0, e1 = 1, e2 = 2（头部不同，立即退出）
   * - 第一轮: b === b，patch(b, b)，e1--, e2-- -> e1 = 0, e2 = 1
   * - 第二轮: a === a，patch(a, a)，e1--, e2-- -> e1 = -1, e2 = 0
   * - 第三轮: e1 < i，退出循环
   * - 结果: i = 0, e1 = -1, e2 = 0
   */
  while (i <= e1 && i <= e2) {
    const n1 = c1[e1]
    const n2 = c2[e2]

    if (isSameVNodeType(n1, n2)) {
      // 类型相同，进行对比更新
      patch(n1, n2, container)
    }
    else {
      // 类型不同，停止尾部对比
      break
    }

    e1--
    e2--
  }

  // 3. 处理对比后的剩余节点
  /*
   * 根据 i、e1、e2 的关系，判断需要进行的操作：
   * - i > e1 && i <= e2: 旧节点已全部对比完，新节点还有剩余 -> 需要挂载新节点
   * - i > e2 && i <= e1: 新节点已全部对比完，旧节点还有剩余 -> 需要卸载旧节点
   */

  // 3.1 需要挂载新节点
  if (i > e1) {
    // 确定锚点位置：新增节点应该插入到哪个位置
    // 如果 e2 + 1 超出数组长度，说明是在末尾追加，anchor 为 null
    // 否则，新节点应该插入到 c2[e2 + 1] 之前
    const nextPos = e2 + 1
    const anchor = nextPos < c2.length ? c2[nextPos].el : null

    // 挂载 i 到 e2 范围内的所有新节点
    while (i <= e2) {
      patch(null, c2[i], container, anchor)
      i++
    }
  }
  // 3.2 需要卸载旧节点
  else if (i > e2) {
    // 卸载 i 到 e1 范围内的所有旧节点
    while (i <= e1) {
      unmount(c1[i])
      i++
    }
  }
}