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’。

Fragments出现动机 一种常见模式是组件返回一个子元素列表。以此 React 代码片段为例：

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

< Columns /> 需要返回多个 元素以使渲染的 HTML 有效。如果在 < Columns /> 的 render() 中使用了父 div，则生成的 HTML 将无效。

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

得到一个 < Table /> 输出：

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

Fragments 由此出现解决了这个问题。

React Fragment介绍与使用 React.Fragment 组件能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素。一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

理解起来就是在我们定义组件的时候return里最外层包裹的div往往不想渲染到页面，那么就要用到我们的Fragment组件了。就和vue的