它是 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)