React.Fragment

2019-11-01  本文已影响0人  any_5637

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

  1. 通过不创建额外的 DOM 节点,Fragments 更快并且使用更少的内存。这在非常大而深的节点树时很有好处。
  2. 一些 CSS 机制如Flexbox和CSS Grid具有特殊的父子关系,如果在中间添加 div 将使得很难保持所需的结构。
  3. 在 DOM 审查器中不会那么的杂乱
   render() {
    return (
      <Fragment>
        <Table dataSet={this.tableDS} columns={this.columns} queryFieldsLimit={2} />
      </Fragment>
    );
  }
上一篇下一篇

猜你喜欢

热点阅读