它的速度稍微快一点，内存使用量也更少(不需要创建额外的DOM节点)。这只有在非常大和/或很深的树上才有真正的好处，但应用程序的性能往往会受到千刀万剐。这就少了一刀。 一些CSS机制，如Flexbox和CSS Grid具有特殊的父子关系，在中间添加div使得在提取逻辑组件时很难保持所需的布局。 DOM检查器不那么杂乱。: -)

你可以在这个React问题中找到一些其他用例的描述:添加片段API以允许从渲染中返回多个组件

当您希望对组件进行分组，但不想在生成的HTML中使用div标签时，您可以使用fragment。<> <p> Hello </p> </>生成的HTML就是:<p> Hello </p>

如果我们使用div容器，<div>…</div>也会生成!

在使用React时，有时需要呈现多个元素或返回一组相关项。这里有一个例子:

function App() {
  return (
    <h1>Hello React!</h1>
    <h1>Hello React Again!</h1>
  );
}

如果你试图用上面的代码运行你的应用程序，你会遇到一个错误，说明相邻的JSX元素必须包装在一个封闭的标记中。这意味着您需要在父div中包装这两个元素。

function App() {
  return (
    <div>
      <h1>Hello React!</h1>
      <h1>Hello React Again!</h1>
    </div>
  );
}

这样做可以修复错误，但会带来一定程度的风险。您正在向DOM添加一个额外的节点，这是不必要的。在这种情况下，上面的子组件将被包含在父组件中，这就成了一个问题。

function Table() {
  return (
    <table>
      <td>This is a Table Component</td>
      <Columns />
    </table>
  );
}

function Columns() {
  return (
    <div>
      <td>Hello React!</td>
      <td>Hello React Again!</td>
    </div>
  );
}

Table组件的结果HTML将无效，因为添加了额外的div。

function Table() {
  return (
    <table>
      <td>This is a Table Component</td>
      <div>
        <td>Hello React!</td>
        <td>Hello React Again!</td>
      </div>      
    </table>
  );
}

让我们来看看使用React Fragment来解决这个问题的更好方法，它不会向DOM添加任何额外的节点。语法如下所示:

function Columns() {
  return (
    <React.Fragment>
      <td>Hello React!</td>
      <td>Hello React Again!</td>
    </React.Fragment>
  );
}

你也可以使用短语法<></>来声明Fragment。

function Columns() {
  return (
    <>
      <td>Hello React!</td>
      <td>Hello React Again!</td>
    </>
  );
}

使用< React.Fragment >…< /反应。在片段>中，我们可以向JSX元素添加父标记，而无需向DOM添加额外的节点。 你可以用React替换额外的div标签。片段 写作的反应。每次碎片对你来说都太长了。反应。Fragment有一个可以使用的简写语法。它是<>…</>。

增加了以前JSX不可能的特性 更好的语义jsx标记。包装器元素是在需要的时候使用的，而不是因为它们是被迫使用的。 更少的整体dom标记(增加的渲染性能和更少的内存开销)

它很简单，当您不需要包装器元素时，您不必强制使用它。拥有更少的元素很好，但我认为最大的好处是能够在jsx中呈现以前不可能呈现的元素，并为包装器元素添加更好的语义，因为它们现在是可选的。

这在以前是不可能的:

 <select>
    {this.renderOptions()}
 </select>

在React 15中，你无法判断是否需要wrapper元素:

<span>
  <h1>Hello</h1>
  {this.getContent()}
</span>

根据reactjs.org文档，<Fragment> </Fragment>代替div的最重要的需求是避免破坏HTML语义。当我们使用div而不是<Fragment> </Fragment>时，我们破坏了HTML语义。

了解更多html语义。请点击 也有一些情况下，如果你使用div而不是Fragments，它将是无效的html，例如，看看下面的代码:

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

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

Fragments解决了这个问题。