Fragment的核心逻辑是跳过自身、透传子节点，不生成DOM，仅作为虚拟容器协调子元素挂载与更新；其锚点通过隐式位置继承和兄弟链扫描动态确定。
渲染器处理 Fragment 的核心逻辑是“跳过自身、透传子节点”——它不生成真实 DOM，只作为虚拟容器协调子元素的挂载与更新。Fragment 更新时的锚点难题，本质是父容器在插入/移动子节点时缺乏明确参考位置，而渲染器通过复用已有子节点的 DOM 顺序和 隐式锚点继承 来解决。
Fragment 在渲染流程中的角色定位
Fragment 不是真实节点，而是 Fiber 树或 VNode 树中的一个中间占位符：
- React 中，
<></>编译为type = Symbol(react.fragment)的 ReactElement，对应 Fiber 节点tag = Fragment - Vue 中，
<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>之前，即以该兄弟节点为 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">或 Vue 中带key的<template key="x">才参与 diff 锚定；无 key 的 Fragment 视为不稳定，子节点全部走 unkeyed 协调路径
