小编典典

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

reactjs

在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首选?它对性能有帮助吗?如果是这样,为什么?希望有一些见识。


阅读 252

收藏
2020-07-22

共1个答案

小编典典

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

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

2020-07-22