React Fragments是在2017年11月与React 16.2.0一起引入的。虽然它们已经存在了一段时间，但许多React开发人员避免使用它们，或者在不知道它们是什么的情况下采用它们。React Fragments是一个入门级但关键的功能，每个React开发人员都应该掌握它们，无论他们的技能水平如何。另外，考虑到它们成为React的一部分已经有多长时间了，它们不能再被忽视了。
所以，让我们看看掌握React Fragments所需要的一切，深入了解为什么、什么、如何和什么时候。
为什么React Fragments存在
正如官方React文档中所说，返回一个以上的HTML元素是React组件普遍希望的行为。为了实现这一点，你必须用一个HTML标签来包装所有这些元素。这是因为React要求组件只返回一个HTML元素。最简单的解决方案是使用一个包装器<div> 。从逻辑的角度来看，这个额外的<div> ，通常可以认为是无关紧要的，但它确实有后果。首先，通过持续使用这种方法，你会使你的DOM更加嵌套，从而使渲染速度变慢。第二，这种方法会导致无效的HTML，正如你将要看到的那样。
例如，假设你有一个Table 组件，它渲染了一个HTML表格，其列是由另一个叫做Columns 的组件渲染的。下面是你可能用到的代码。
function Table() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
function Columns() {
return (
// the wrapper div used to return two <td> tags
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
这将导致以下HTML的渲染，这是无效的，因为一个<div> 不能作为<tr> 的子节点出现。
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
React Fragments的出现正是为了解决这个问题。
什么是React Fragments
React Fragments涉及一种特殊的语法，让你在不向DOM添加额外节点的情况下对HTML元素列表进行分组。换句话说，React Fragments使你能够分组多个子组件，而不在渲染的HTML中引入任何不必要的标记，为之前解决的问题和许多其他问题提供了解决方案。
如何使用它们
你可以使用React Fragments，通过用<React.Fragments> 标签来包装你的组件要返回的子元素。回到上面的例子，Columns 组件将被写成如下。
function Columns() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
这将导致Table 组件被翻译成以下HTML。
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
正如你所看到的，渲染的HTML中没有包装标签。与之前的情况不同，这不会导致无效的HTML。
React Fragments也可以采用简短的语法，它看起来像一个空标签。
function Columns() {
return (
// using <> is just like using <React.Fragment>
<>
<td>Hello</td>
<td>World</td>
</>
// using </> is just like using </React.Fragment>
);
}
这导致的结果与上面的例子相同。所以，请记住，空标签是<React.Fragment> 。
