<React.Fragment>与<>语法在执行效率上有什么区别？

核心结论先放前面：二者运行时执行效率没有任何差异，不存在性能高低之分。

具体说明 #

• 两种写法最终的转译产物完全一致
  不管你用Babel、SWC还是esbuild做JSX转译，空标签本质就是React.Fragment的语法糖。举个实际转译例子，下面两段源码：

  // 写法1：空标签简写
  <>
    <span>第一项</span>
    <span>第二项</span>
  </>
  
  // 写法2：完整Fragment写法
  <React.Fragment>
    <span>第一项</span>
    <span>第二项</span>
  </React.Fragment>
  

  转译后生成的JS代码完全相同，都是直接创建Fragment类型的虚拟节点：

  React.createElement(
    React.Fragment,
    null,
    React.createElement("span", null, "第一项"),
    React.createElement("span", null, "第二项")
  )
  

  运行时React处理这两种节点的逻辑完全一致，都不会生成额外的真实DOM节点，虚拟DOM diff、重渲染的开销没有任何区别。

• 二者唯一的区别仅存在于语法支持层面，和性能无关
  空标签简写不支持传入任何属性，如果你在列表渲染场景下需要给Fragment传递key属性（避免列表diff警告），就只能使用完整的<React.Fragment key={id}>写法，空标签写key会直接触发语法报错。除此之外两种写法的表现完全一致。

网上部分传言说空标签会有额外编译开销的说法都是过时的错误信息，从React 16.2正式推出Fragment语法开始，两种写法的转译、运行逻辑就已经完全对齐，日常开发按团队代码规范选用即可，不需要为了所谓的性能刻意选某一种。

内容的提问来源于stack exchange，提问作者Ervin