React.js中为何不默认采用return <>...</>的Fragments写法？

其实除了美观，主要是这几个实际原因：

• 历史惯性与兼容性：早年间React还不支持<>这种短语法Fragment，只能用<React.Fragment>或者硬套个<div>。很多老开发者已经养成了用return (...)包裹返回内容的习惯，就算现在短语法支持了，也懒得改。而且如果项目要兼容16.2版本之前的React，短语法根本用不了，只能老老实实写传统写法。

• 灵活性和扩展性：用括号包裹的写法，后续调整代码更方便。比如临时要加个注释、改条件渲染，或者把Fragment换成带key的<React.Fragment>（短语法不能加key），直接在括号里改就行。要是一开始就用return <>...</>，遇到这些场景还得改成括号形式，反而麻烦。

• 团队代码规范一致性：团队开发讲究风格统一，要是大家一直用return (...)的写法，就算短语法能用，为了不搞特殊，也会跟着用传统写法。而且像Prettier这类格式化工具，默认会把多行返回内容用括号包裹，写完代码一格式化就自动变成括号形式了。

• 特殊场景的限制：短语法Fragment有天生缺陷——不能加key属性。比如做列表渲染的时候，必须给Fragment加key，这时候只能用<React.Fragment key={item.id}>，自然就得用括号包裹的写法。与其在两种写法之间来回切换，不如一直用兼容性更强的括号写法。

举个例子，当需要key的时候，短语法就失效了：

const ItemList = ({ items }) => {
  return (
    <>
      {items.map(item => (
        <React.Fragment key={item.id}>
          <h3>{item.title}</h3>
          <p>{item.content}</p>
        </React.Fragment>
      ))}
    </>
  )
}

这里内层的Fragment必须用带key的完整写法，外层虽然能用短语法，但整体还是离不开括号。

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