什么是 Fragment
React Fragment
一句话：一个不产生真实 DOM 节点的容器， 用来满足「JSX 必须有单一根节点」的要求， 同时不往页面里多塞一层div。
写法两种：<React.Fragment>和简写 <></>。
为什么需要它（举得出场景才算答好）：
- 表格——
<tr>里套一层div是非法 HTML， 浏览器会把它挪出去，布局直接坏。 - Flex / Grid 布局—— 多一层
div会打断父容器和子项的直接关系，flex属性全失效。 - 减少 DOM 层数， 样式选择器也更好写。
会追问：「Fragment 上能加 key 吗？」——能，但必须用完整写法<React.Fragment key={id}>， 简写 <> 不支持任何属性。在列表里渲染多个兄弟元素时就得这么写， 这是简写唯一的限制。
In one line: a container that produces no real DOM node, so you can satisfy “JSX needs a single root” without pushing another div into the page.
Two forms: <React.Fragment> and the shorthand <></>.
Why you need it — you only answer this well with concrete cases:
- Tables — a
divinside a<tr>is invalid HTML; the browser hoists it out and the layout breaks on the spot. - Flex / Grid layouts — an extra
divbreaks the direct relationship between the container and its items, so everyflexproperty stops working. - Fewer DOM levels, and easier style selectors.
Follow-up: “Can a Fragment take a key?” — yes, but only in the long form <React.Fragment key={id}>; the shorthand <> accepts no attributes at all. You need this whenever a list renders several sibling elements per item, and it is the shorthand’s only limitation.