react 中的 Fragment ＜＞＜/＞

React Fragment介绍与使用

在向 DOM 树批量添加元素时，一个好的实践是创建一个document.createDocumentFragment，先将元素批量添加到

DocumentFragment 上，再把 DocumentFragment 添加到 DOM 树，减少了 DOM操作次数的同时也不会创建一个新元素。

和 DocumentFragment 类似，React 也存在 Fragment 的概念，用途很类似。在 React 16之前，Fragment 的创建是通过扩展包 react-addons-create-fragment 创建，而 React 16 中则通过<React.Fragment></React.Fragment> 直接创建 ‘Fragment’。

举个栗子

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
​    );
  }
}

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

就比如这个栗子： 子组件依赖于父组件中的标签中的内容 学过vue的同学都知道 template 标签 每一个组件中的跟标签对吧 再react中 也可以使用 Fragment 这个标签来进行处理 当然还有一种简单的方式 也就是使用 空标签 <></> 另外再提一嘴 react 16以后有一种数据的写法也可以有很多根标签的写法

import React from 'react';

export default function () {
    return [
        <div>1</div>,
        <div>2</div>,
        <div>3</div>
​    ];
}

下面说一说 Fragment和<> 的区别： <>不接受键值或者属性 Fragment 可以 下面看一个栗子：

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 没有`key`，React 会发出一个关键警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

注意：简写形式<></>，但目前有些前端工具支持的还不太好，用 create-react-app 创建的项目可能就不能通过编译。所以遇到这种情况很正常。