语法 | Notion

Fragment <>

React.Fragment 是 React 中的一种语法糖，用于在 JSX 中返回多个元素而不需要额外创建一个 DOM 节点来包裹它们。在React中，一个组件的渲染方法必须返回单个根元素。当你需要返回多个元素时，传统做法是把它们包在一个无意义的 DOM 元素（如<div>）里。但这样做有时会引入不必要的DOM结构，影响页面的语义化或造成样式上的困扰。

为了解决这个问题，React 引入了 React.Fragment，它允许你将一组子元素直接返回，而不必为它们添加一个额外的父元素。这在有两个主要好处：

减少DOM节点，提高性能，尤其是对于大量列表渲染时。
保持HTML结构的纯净和语义化，避免使用无关的<div>或<span>仅仅为了包裹元素。

有两种书写方式：

显式写法:

<React.Fragment>
  {/* 多个子元素 */}
</React.Fragment>

简写（短语法）:
```
<>
  {/* 多个子元素 */}
</>
```

简写形式（<> 和 </>）让代码更加简洁易读，是目前推荐的用法，特别是在不需要为Fragment传递额外属性（如key）的情况下。但请注意，当使用短语法时，一些IDE或较旧的JavaScript环境可能需要配置支持。