小编典典

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

all

在 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优选?它对性能有帮助吗?如果是这样,为什么?会喜欢一些见解。


阅读 72

收藏
2022-06-29

共1个答案

小编典典

  1. 它的速度稍微快一点,内存使用量更少(无需创建额外的 DOM 节点)。这只对非常大和/或很深的树有真正的好处,但应用程序性能经常会因一千次削减而死亡。这是少一刀。
  2. 一些 CSS 机制,如 Flexbox 和 CSS Grid 有特殊的父子关系,div中间添加 s 使得在提取逻辑组件的同时很难保持想要的布局。
  3. DOM 检查器不那么混乱。:-)

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

2022-06-29