React.Fragment

作者: any_5637 | 来源:发表于2019-11-01 10:43 被阅读0次

在react中，render()方法中渲染的元素都必须被一个根标签包裹。通常我们都会选择使用<div></div>将元素进行包裹，但是这样会给页面元素新增一个父元素，像vue的<templete></templete>一样，react提供了占位的标签：<React.Fragment>标签，将元素包裹起来。
这样用的好处：

通过不创建额外的 DOM 节点，Fragments 更快并且使用更少的内存。这在非常大而深的节点树时很有好处。
一些 CSS 机制如Flexbox和CSS Grid具有特殊的父子关系，如果在中间添加 div 将使得很难保持所需的结构。
在 DOM 审查器中不会那么的杂乱

   render() {
    return (
      <Fragment>
        <Table dataSet={this.tableDS} columns={this.columns} queryFieldsLimit={2} />
      </Fragment>
    );
  }