React Fragment（...）虽不生成真实 DOM 节点，但在 map 等列表渲染场景中仍需显式指定 key，因为 React 依赖 key 识别兄弟节点的稳定性和变化，而非仅用于挂载真实元素。
react fragment（`...>`）虽不生成真实 dom 节点，但在 `map` 等列表渲染场景中仍需显式指定 `key`，因为 react 依赖 `key` 识别兄弟节点的稳定性和变化，而非仅用于挂载真实元素。
在 React 中，key 的核心作用是帮助协调器（Reconciler）高效比对和更新虚拟 DOM 树中的同级节点（sibling elements）。它并非为“渲染到 DOM”而存在，而是为 React 内部的 Diff 算法提供语义化标识：当列表顺序变化、项增删或重排时，key 让 React 准确判断哪个组件实例应被复用、更新或销毁，从而避免不必要的重新挂载与副作用触发（如 useEffect 重复执行、表单状态丢失等）。
Fragment 本身确实不会产出 DOM 元素，但它在 JSX 编译后会转化为 React.Fragment 类型的虚拟节点（{ type: React.Fragment, props: { children: [...] }, key: null }）。当多个 Fragment 并列出现在 map 返回的数组中时，它们就构成了一组同级子节点。此时，React 需要为每个 Fragment 节点分配唯一 key，才能区分它们——否则，React 无法判断第 0 个 Fragment 是否对应之前列表中的同一逻辑项。
例如，以下代码会触发警告：
const items = ['A', 'B', 'C'];
// ❌ 错误：Fragment 无 key，React 无法区分每个 fragment 实例
return items.map((item) => (
<>
<span key={item}>{item}</span>
</>
));
// ✅ 正确：key 应放在 Fragment（即 map 的直接返回项）上
return items.map((item) => (
<React.Fragment key={item}>
<span>{item}</span>
</React.Fragment>
));
// ✅ 等价写法（使用短语法，但必须带 key）
return items.map((item) => (
<><span>{item}</span></>
));
// ⚠️ 注意：短语法 `<>` 不支持直接写 key，必须显式写成 `<React.Fragment key={...}>` 或使用带 key 的自定义封装⚠️ 重要提示：
-
>是React.Fragment的语法糖，不支持直接添加key属性（会报错）。若需 key，必须使用<react.fragment key="{...}"></react.fragment>形式； - 将
key仅加在 Fragment 的子元素（如<span key="{item}"></span>）上是无效的——因为key必须作用于map返回的直接子节点，即 Fragment 本身； -
key的值需在兄弟节点范围内唯一且稳定（推荐使用数据 ID，避免用索引index，尤其在可排序/过滤列表中）。
总结来说，key 是 React 协调算法的“身份凭证”，与是否渲染 DOM 无关，而与节点在虚拟树中的位置关系和生命周期管理强相关。Fragment 作为合法的 React 节点类型，参与完整的 reconciliation 流程，因此在列表中必须拥有唯一 key——这不是为“幽灵元素”赋予存在感，而是为整个子树的更新逻辑提供确定性依据。
