为什么React 16中的片段比容器div更好？

Question

在React
16.2中，增加了对的支持Fragments。可以在React的博客文章中找到更多信息。

我们都熟悉以下代码：

render() {
  return (
    // Extraneous div element :(
    <div>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </div>
  );
}

是的，我们需要一个容器div，但这没什么大不了的。

在React 16.2中，我们可以这样做以避免周围的容器div：

render() {
  return (
    <Fragment>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </Fragment>
  );
}

无论哪种情况，我们仍然需要围绕内部元素的容器元素。

我的问题是，为什么使用Fragment首选？它对性能有帮助吗？如果是这样，为什么？希望有一些见识。

Answer 1

1. 它快一点，并且内存使用量更少（无需创建额外的DOM节点）。这仅在非常大和/或较深的树上才有真正的好处，但是应用程序性能通常会遭受数千次削减的折磨。这少一分。
2. 一些CSS机制（例如Flexbox和CSS Grid）具有特殊的父子关系，并且div在中间添加s使得在提取逻辑组件时很难保持所需的布局。
3. DOM检查器比较整洁。:-)

您可以在此React问题中找到一些其他用例的描述：添加片段API以允许从render返回多个组件