源码级解析渲染器如何处理 Fragment？解决 Fragment 更新时的锚点难题-Vue.js-PHP中文网

fragment的核心逻辑是跳过自身、透传子节点，不生成dom，仅作为虚拟容器协调子元素挂载与更新；其锚点通过隐式位置继承和兄弟链扫描动态确定。

源码级解析渲染器如何处理 fragment？解决 fragment 更新时的锚点难题

渲染器处理 Fragment 的核心逻辑是“跳过自身、透传子节点”——它不生成真实 DOM，只作为虚拟容器协调子元素的挂载与更新。Fragment 更新时的锚点难题，本质是父容器在插入/移动子节点时缺乏明确参考位置，而渲染器通过复用已有子节点的 DOM 顺序和 隐式锚点继承 来解决。

Fragment 不是真实节点，而是 Fiber 树或 VNode 树中的一个中间占位符：

React 中，> 编译为 type = Symbol(react.fragment) 的 ReactElement，对应 Fiber 节点 tag = Fragment
Vue 中，<template></template>（无标签）编译为 type = Fragment 的 VNode，其 shapeFlag 包含 ShapeFlags.SUSPENSE | ShapeFlags.STABLE_FRAGMENT 等标识
两者共性：不调用 hostCreateElement 或 document.createElement，不产生真实 DOM 节点，也不参与 layout/paint 流程

Fragment 自身没有 DOM，因此它的子节点必须直接插入到父容器中。关键在于确定插入位置——即“锚点”（anchor）：

若 Fragment 是父容器的首个子节点，且父容器为空，则子节点直接 appendChild 到父容器
若 Fragment 后面还有兄弟节点（如 <div>A</div> <p>B</p>><span>C</span>），则 Fragment 的第一个子节点应插入在 <span></span> 之前，即以该兄弟节点为 anchor
渲染器在 mountFragment 或 processFragment 阶段，会遍历所有子节点，并逐个调用 hostInsert(childEl, container, anchor)，其中 anchor 来自 Fragment 的 next sibling 的 el 或 parent fiber/vnode 的 insertion point

Fragment 更新不触发自身 DOM 变更，但子节点可能新增、删除、移动。此时锚点需动态维护：

React 在 reconcileChildrenArray 中对 Fragment 子节点执行双端 diff，保留可复用的 DOM 节点，并按新顺序重新计算每个子节点的插入位置
Vue 在 patchChildren 进入 patchKeyedChildren 或 patchUnkeyedChildren 后，对每个子 VNode 调用 patch；若子节点是普通元素，其 el 会被复用，anchor 则取自下一个兄弟 VNode 的 el（若存在），否则为 null（即追加）
关键细节：Fragment 的 el 始终为 null，但它的 return 指针指向父 Fiber/VNode，因此能准确获取父级的 DOM 容器和当前子节点序列上下文

所谓“锚点难题”，是指 Fragment 没有 DOM，无法像普通元素那样提供 el.nextSibling。渲染器的应对策略是：

前向扫描：在 mount/update 前，先遍历 Fragment 所在位置的兄弟节点链，找出紧邻其后的第一个有真实 el 的兄弟节点，将其 el 作为 anchor
后向回溯：当 Fragment 被替换或移除时，它的最后一个子节点的 nextSibling 会被自动继承为后续操作的起始 anchor，避免 DOM 断层
稳定 key 支持：仅标准写法 <react.fragment key="x"></react.fragment> 或 Vue 中带 key 的 <template key="x"></template> 才参与 diff 锚定；无 key 的 Fragment 视为不稳定，子节点全部走 unkeyed 协调路径