React中Fragment与<>空标签

Fragment

首先查看官方文档 https://reactjs.org/docs/fragments.html#gatsby-focus-wrapper

React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。

Fragments 看起来像空的 JSX 标签：

Fragment标签可以在语法上需要标签、但目标结构中不需要标签的地方使用。真实DOM树不会生成该标签；

key 是唯一可以传递给 Fragment 的属性。在将来，可能会增加额外的属性支持，比如事件处理。

function Glossary(props) {
  return (
    

      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        
          
{item.term}
          
{item.description}
        
      ))}
    
  );
}

<>空标签

<>是 的语法糖，它主要用于不需要一个实体的父元素或者是根元素去包裹的情况，其次 React.Fragment 可以有个 key 属性

<> 工作原理与 React Fragment 类似，用在react中，表示一个DOM片段 它可以在一个内存里面创建一个DOM节点 但是并不在DOM模板上渲染，内存负载低，从而提升性能！

class Columns extends React.Component {
  render() {
    return (
      <>
        Hello
        World
      
    );
  }
}

React Fragment 对比 div 元素

在 React 中，Fragment 和 div 可以互换使用。两者之间的主要区别是 Fragment 从 DOM 树中清除所有额外的 div，而 div 向 DOM 树中添加一个 div。

使用 React Fragments，我们可以创建更清晰、更容易阅读的代码。它渲染组件更快，使用的内存更少。每个元素都按预期呈现。而 div 会扩展 DOM，因为当你的网站上有太多的 HTML 标签时，会出现长嵌套节点。

div 元素有更多的方法和属性，这导致它消耗更多的内存，从而使页面加载时间变慢；原型链像 HTMLDivElement -> HTMLElement -> Element -> Node -> EventTarget，而 React Fragments 有较少的方法与原型链DocumentFragment -> Node -> EventTarget。

使用 Fragment，你可以重用应用程序的部分内容。然而，在有些情况下，必须得使用 div 而不是 Fragment 。

例如，使用 Fragment 不允许你设计组件，因为你必须将目标元素包装在 div 中。此外，如果你要向组件的元素添加 key，则必须使用 div。根据这一点，你可以根据你希望 React 应用程序完成的任务，交替使用这两种方法。

参考引用：

1. 一文让你彻底理解 React Fragment