为一个组件返回多个元素，会在外面包裹一个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>，直到工具支持。
