React.Fragment
2019-11-01 本文已影响0人
any_5637
在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>
);
}