React 中减少不必要的嵌套

React 中有一个Fragment，可以通过它无需向DOM添加额外包含节点。

render() {
  return (
    <React.Fragment>
      <A />
      <B />
      <C />
    </React.Fragment>
  );
}

有时候可能会需要用到键值key 就比如要创建一个列表：

function List(props) {
  return (
    <dl>
      {props.items.map(item => (
        <React.Fragment key={item.id}>
          <dt>{item.title}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key是可以传递给Fragment的属性，此外，还可以使用一种新的，更短的语法来声明片段。它看起来像空标签：

class Paragraph extends React.Component {
  render() {
    return (
      <>
        <h1>Hello</h1>
        <h2>World</h2>
      </>
    );
  }
}

使用<> </>，就像使用任何其他元素一样，但是不支持键或属性
注意，许多工具尚不支持它，因此最好还是使用<React.Fragment>，直到工具支持。