Fragments
React 中的一個常見模式是一個組件返回多個元素稀火。Fragments 允許你將子列表分組，而無需向 DOM 添加額外節(jié)點陷舅。
類似于微信小程序的block脊阴，只是用來包裹元素，不會在頁面做任何渲染责嚷。
目前key 是唯一可以傳遞給 Fragment 的屬性鸳兽。未來可能會添加對其他屬性的支持，例如事件罕拂。
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
// <Columns /> 需要返回多個 <td> 元素以使渲染的 HTML 有效揍异。
// 如果在 <Columns /> 的 render() 中使用了父 div，則生成的 HTML 將無效爆班。
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
// 得到的 <Table /> 輸出：
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
// 無效
// 使用Fragment衷掷，則可以解決這個問題
class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
// 正確的輸出 <Table />：
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
短語法
使用 <> </>來聲明 Fragments，但是其不支持 key 或?qū)傩浴?/p>
class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
