它是 React 中的常见模式，用于组件返回多个元素。*Fragments*可以让你聚合一个子元素列表，而无需向 DOM 添加额外节点。 ~~~js render() { return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Fragment> ) } ~~~ 以下是简洁语法，但是在一些工具中还不支持： ~~~js render() { return ( <> <ChildA /> <ChildB /> <ChildC /> </> ) } ~~~ ## 为什么使用 Fragments 比使用容器 div 更好? 1. 通过不创建额外的 DOM 节点，Fragments 更快并且使用更少的内存。这在非常大而深的节点树时很有好处。 2. 一些 CSS 机制如*Flexbox*和*CSS Grid*具有特殊的父子关系，如果在中间添加 div 将使得很难保持所需的结构。 3. 在 DOM 审查器中不会那么的杂乱。 > 译注：`React 16`以前，`render`函数的返回必须有一个根节点，否则报错。 ## 参考 [react面试题](https://github.com/semlinker/reactjs-interview-questions)