一. 动机
以下的例子简洁清晰的反映了fragments的作用，在生产过程中，经常会遇到这种情况：
首先，是在Table组件中插入Columns组件：
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
因为React组件最外层需要一个元素包裹，如果这时使用div标签包裹，那么最终生成的HTML将是无效的。
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
这时候Fragment就派上用场了
1.1 使用
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>
1.2 简写语法
有一个新的，更短的语法可以用来声明片段(fragments)。他看起来像是空标签:
class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
您可以像使用其他元素一样使用<></>，只是它不支持 键(keys) 或 属性(attributes)。
注：目前很多工具都不支持这个简写语法，所欲可能需要明确地使用
<React.Fragment>，直到工具支持这个语法。
1.3 带key的片段（fragments）
<React.Fragment />可以传递key值，如下：
function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// 没有`key`，将会触发一个key警告
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}
注：
key是唯一可以传递给Fragment的属性。在将来，可能会增加额外的属性，比如事件处理。
