React Fragment介绍与使用详解

前言

在向 DOM 树批量添加元素时，一个好的实践是创建一个document.createDocumentFragment，先将元素批量添加到
DocumentFragment 上，再把 DocumentFragment 添加到 DOM 树，减少了 DOM操作次数的同时也不会创建一个新元素。

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

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

class Table extends React.Component {
  render() {
    return (
      
        
        
          
      
    );
  }
}

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

class Columns extends React.Component {
  render() {
    return (
      
        Hello
        World
      
    );
  }
}

得到一个 < Table /> 输出：


      

  
    Hello
      World

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

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