发布于 5年前
React 16.2：Fragments语法的使用
React 16.2最大的变化是新增了fragments特性，fragments语法。
示例：返回一首诗的片段
敬请阅读
<h2>面朝大海，春暖花开</h2>
<p>从明天起，做一个幸福的人</p>
<p>喂马、劈柴，周游世界</p>
<p>...</>
React 16之前的版本
在React 16之前的版本，如果想用组件返回一个子元素列表，我们需要使用div或者span标签把元素列表包装起来。
render() {
return (
<div>
敬请阅读
<h2>面朝大海，春暖花开</h2>
<p>从明天起，做一个幸福的人</p>
<p>喂马、劈柴，周游世界</p>
<p>...</>
</div>
);
}
此方法的缺点是需要使用额外的DOM元素包装。
React 16.0
React 16.0，则新增了数组的方式返回子元素列表。
render() {
return [
"敬请阅读",
<h2>面朝大海，春暖花开</h2>,
<p>从明天起，做一个幸福的人</p>,
<p>喂马、劈柴，周游世界</p>,
<p>...</>
];
}
此方式的缺点是：
- 文本需要使用引号括起来，如“敬请阅读”。
- 子元素之间使用逗号分隔
这和普通的JSX写法有区别。
React 16.2
React 16.2新增了fragments语法来解决上面两种方式的问题。
render() {
return (
<Fragment>
敬请阅读
<h2>面朝大海，春暖花开</h2>
<p>从明天起，做一个幸福的人</p>
<p>喂马、劈柴，周游世界</p>
<p>...</>
</Fragment>
);
}
可以使用空标签<></>替换<Fragment></Fragment>，<></>为<Fragment></Fragment>的语法糖：
render() {
return (
<>
敬请阅读
<h2>面朝大海，春暖花开</h2>
<p>从明天起，做一个幸福的人</p>
<p>喂马、劈柴，周游世界</p>
<p>...</>
</>
);
}
注意：在渲染时，fragment标签是不会添加到DOM里。
Fragment在React 16.2已添加到React对象里。
const Fragment = React.Fragment;
<Fragment>
<ChildA />
<ChildB />
<ChildC />
</Fragment>
