为什么React 16中的Fragments比容器div更好?

在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更可取?它对性能有帮助吗?如果有，为什么?想要一些见解。

当前回答

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

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

2017-12-11 21:56:28

其他回答

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

2017-12-11 21:56:28

除了上述所有答案之外，还有一个优点:代码可读性，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，你仍然需要使用<Fragment>语法。

2017-12-14 07:00:07

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

2019-10-03 09:16:22

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

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

2022-01-02 07:23:31

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

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

这在以前是不可能的:

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

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

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

2017-12-12 15:27:43

为什么React 16中的Fragments比容器div更好?

推荐文章

最新文章

标签