React Fragments: 一种简单的语法来提高性能React Fragments于2017年11月随React

React Fragments于2017年11月随React 16.2.0引入。虽然它们已经存在了一段时间，但许多React开发人员避免使用它们或在不知道它们是什么的情况下使用它们。React Fragments是一个入门级但关键的功能，每个React开发人员都应该掌握它们，无论他们的技能水平如何。此外，考虑到它们已经成为React的一部分很长时间了，它们已经不能被忽视。

因此，让我们深入了解React Fragments的原因、内容、方法和时间，以掌握它们所需的所有内容。

为什么需要React Fragments

正如官方React文档所述，返回多个HTML元素是React组件中常见的期望行为。为了实现这一点，你必须用一个HTML标签来包含所有这些元素。这是因为React要求组件只返回一个HTML元素。最简单的解决方案是使用一个包装器

。从逻辑上讲，这个额外的

通常可以被认为是无关紧要的，但它确实有影响。首先，通过始终使用这种方法，你使你的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，这是无效的，因为

不能出现在的子元素中。

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

React Fragments正是为了解决这个问题而引入的。

React Fragments是什么

React Fragments涉及一种特殊的语法，让你可以将一系列HTML元素分组，而不会添加额外的节点到DOM中。换句话说，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>的简写形式。

什么时候使用他们

基本上，你应该在任何时候都使用React Fragments，如果你要为了让你的组件返回多个HTML元素而引入一个不必要的包装

。所以，不要把Rect Fragments看作是HTML中

的替代品。相反，将它们视为一种避免不必要标记并因此获得更好的标记结构的方法。

通常有三种情况下使用React Fragments。让我们一一看看。

1. 包装多个HTML元素

正如你可能已经猜到的那样，包装多个HTML元素是React Fragments的最常见用法。每当你必须定义一个React组件来返回多个HTML元素时，你都应该使用<React.Fragment>或<>标记将它们包装起来。如前所述，这是推荐的方法，因为使用任何其他包装标记都可能导致无效的HTML。

2. Keyed Fragments

正如 React 文档所述，使用显式的 <React.Fragment> 语法声明的 Fragments 可以具有 key 属性，在处理任何 JavaScript 集合时非常有用。请注意，在使用简短语法时，这并不是情况。

例如，假设您有一个对象数组，其中每个元素都代表一个作者。您的目标是使用此数组中的数据呈现所有作者。这可以通过将每个数组元素映射到相应的 HTML 元素来实现，这要求 React 具有唯一的 key 属性。由于 React Fragments 支持 key 属性，因此可以利用它们在不引入任何额外标记的情况下实现。

在条件渲染方面，React 要求在两个分支中都必须返回一个单独的元素。这时候，React Fragments 就派上用场了，它可以让你更轻松地渲染元素组并避免添加不必要的额外标记。

总结

在这篇文章中，我们介绍了 React Fragments 及其为什么是每个 React 开发者都应该掌握的不可避免的功能。Fragments 允许您设计更好的 DOM 结构，避免插入不必要的

标签。此外，更干净的标记结构意味着更短的渲染时间，这是一个很好的副作用。此外，React Fragments 在其两种可能的语法中，都允许您编写更干净、可维护和可读的代码。