为什么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问题中找到其他一些用例的描述:https://github.com/facebook/react/issues/2127

Answer 2

添加上面的所有答案还有一个优点:代码可读性,Fragment组件支持语法糖形式,<>.因此,您的问题中的代码可以更容易地编写为:

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

根据文档,

在React中,这可以去<React.Fragment/>元素,就像上一节中的例子一样.(使用JSX的非React框架可以编译为不同的东西.)

没有杂乱,对吧？

请注意,<Fragment>如果需要提供key片段,仍需要使用语法.

Answer 3

• 添加了JSX之前无法实现的功能
• 更好的语义jsx标记.在需要时使用包装元素不是因为它们被迫使用.
• 减少整体dom标记(提高渲染性能和减少内存开销)

它就像你不需要包装元素一样简单,你不必使用它.拥有更少的元素是很棒的,但我认为最大的好处是能够在jsx中渲染以前不可能的元素,并为包装元素添加更好的语义含义,因为它们现在是可选的.

以前这是不可能的:

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

看看React 15中的以下内容,您无法判断是否需要包装元素:

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

Answer 4

根据 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>

片段解决了这个问题。