React中多行JSX：括号与Fragment的区别及适用场景

本质上不是同一类东西 #

• 括号是JavaScript的语法小技巧：用来解决多行表达式的换行问题。因为JS有自动插入分号的机制（ASI），如果多行JSX直接换行，很可能被引擎误判成表达式结束，导致语法错误。括号只是告诉引擎“这是一整段表达式”，本身不会生成任何React元素或者DOM节点。
• Fragment是React的官方组件：专门用来包裹多个同级元素，渲染的时候不会额外生成DOM容器，解决React要求组件必须返回单个根元素的限制。

各自该什么时候用 #

括号的用法场景 #

只要你写的JSX是多行的，不管里面有没有Fragment，都可以用括号包裹，避免语法报错，同时让代码结构更整洁。比如组件返回多行JSX的时候：

const MyCard = () => (
  <div className="card">
    <h3>标题</h3>
    <p>内容描述</p>
  </div>
);

Fragment的用法场景 #

• 当你需要返回多个同级元素，但不想多套一层div（避免破坏DOM结构、增加不必要的节点）的时候，必须用Fragment。比如：

// 正确写法，不会生成额外DOM
const UserInfo = () => (
  <>
    <p>用户名：张三</p>
    <p>邮箱：zhangsan@example.com</p>
  </>
);
// 错误写法，React不允许直接返回多个同级元素
const UserInfo = () => (
  <p>用户名：张三</p>
  <p>邮箱：zhangsan@example.com</p>
);

• 如果需要给包裹的元素加key（比如列表渲染循环的时候），得用完整的<React.Fragment>写法，短语法<>...</>不支持key属性：

{userList.map(user => (
  <React.Fragment key={user.id}>
    <p>{user.name}</p>
    <p>{user.phone}</p>
  </React.Fragment>
))}

你的示例代码为啥输出一样 #

你给的两段代码里，括号只是用来保证多行JSX的语法正确，真正让多个元素合法渲染的是里面的Fragment。所以两段代码核心逻辑完全一致，输出自然没有区别。

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