9.1 减少 DOM 操作的性能开销

function patchChildren(n1, n2, container) {
  if (typeof n2.children === 'string') {
    // 新子节点是文本：旧子节点若为一组节点，先逐个卸载
    if (Array.isArray(n1.children)) {
      n1.children.forEach((c) => unmount(c))
    }
    setElementText(container, n2.children)
  } else if (Array.isArray(n2.children)) {
    if (Array.isArray(n1.children)) {
      const oldChildren = n1.children
      const newChildren = n2.children
      // 按下标同位置比较：oldChildren[i] 更新为 newChildren[i]
      for (let i = 0; i < oldChildren.length; i++) {
        patch(oldChildren[i], newChildren[i], container)
      }
    } else {
      // 旧子节点是文本或不存在：清空容器后逐个挂载
      setElementText(container, '')
      n2.children.forEach(c => patch(null, c, container))
    }
  } else {
    // 新子节点不存在：旧的一组子节点逐个卸载，旧文本清空
    if (Array.isArray(n1.children)) {
      n1.children.forEach(c => unmount(c))
    } else if (typeof n1.children === 'string') {
      setElementText(container, '')
    }
  }
}

const oldChildren = n1.children
const newChildren = n2.children
const oldLen = oldChildren.length
const newLen = newChildren.length
// 公共长度，即较短的那一组
const commonLength = Math.min(oldLen, newLen)
// 先按位置复用，尽量多地调用 patch
for (let i = 0; i < commonLength; i++) {
  patch(oldChildren[i], newChildren[i], container)
}
if (newLen > oldLen) {
  // 新子节点更长 → 挂载多出来的
  for (let i = commonLength; i < newLen; i++) {
    patch(null, newChildren[i], container)
  }
} else if (oldLen > newLen) {
  // 旧子节点更长 → 卸载多出来的
  for (let i = commonLength; i < oldLen; i++) {
    unmount(oldChildren[i])
  }
}