React 其中一種常見的使用情況是在一個 component 中回傳多個 element，fragment 讓你能夠在不用增加額外 DOM 節點的情況下，重新組合 child component。

fragment 寫法：

1. <React.Fragment></React.Fragment> //只支援 key attribute
2. 縮寫寫法 <></> //不支援 key attribute

在寫一個元件的時候，必須在最外層包裹單一元素，但並不是每一次都會想要用一個實體的元素。以下舉例：

function Article(props) {
 return <div> //不想多包一層 div
   <h3>Title{props.id}</h3>
   <p>content{props.id}</p>
 <div/>
}
  
function Book() {
    return (
      <ul>
       {
         [1, 2, 3].map((item) => {
                  return (
                    <li>
                      <Article id={item} />
                    </li>
                  )
          })
        
       }
      </ul>
     );
}
//略

可以用 React 提供的 <React.Fragment> 進行替代，功用有點像其他框架的 <template></template>，而 <React.Fragment> 也可以使用縮寫 <></>

<React.Fragment> 使用 key attribute 的例子

function BookLists(props) {
  return (
      <table>
        <thead>
            <tr>
                <th colspan="2">我的書單</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                {props.items.map(item => (
                    <React.Fragment key={item.isbn}>
                      <td>{item.name}</td>
                      <td>{item.author}</td>
                    </React.Fragment>
                  ))}
            </tr>
        </tbody>
    </table>
  );
}

Codepen 完整程式碼

以上一個簡單介紹。

參考資料：
https://zh-hant.reactjs.org/docs/fragments.html