为一个组件返回多个元素，会在外面包裹一个div 或者 span，进行了不必要的嵌套，无形中增加了浏览器的渲染压力。

版本15以前，render 函数的返回必须有一个根节点，否则报错，为满足这一原则我会使用一个没有任何样式的 div 包裹一下。

import React from 'react';
export default function () {
    return (
        <div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    );
}

vue - Template

在vue中可以使用<template>

<template> 元素当做不可见的包裹元。最终的渲染结果将不包含 <template> 元素。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

// 渲染为

  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>

React - Fragments

在React 中有一个#Fragments，许您将子列表分组，而无需向DOM添加额外节点。

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

React - Fragments Keyed 问题

有时候可能会需要用到key 例如，创建一个描述列表：

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key是唯一可以传递给Fragment的属性。
将来，我们可能会添加对其他属性的支持，例如事件处理程序。

最后 - 额外的简洁语法

您可以使用一种新的，更短的语法来声明片段。它看起来像空标签：

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

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