reactjs - 为什么 React 16 中的 Fragments 比容器 div 更好？

Question

在 React 16.2 中，添加了对 Fragments 的改进支持。更多信息可以在 React 的博客文章 here. 上找到。

我们都熟悉以下代码:

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 会导致在提取逻辑组件时很难保持所需的布局。
3. DOM 检查器不再那么困惑。 :-)

您可以在此 React 问题中找到其他一些用例的描述:Add fragment API to allow returning multiple components from render