React——Fragments特性

为什么要用Fragments

在我们使用React开发组件的时候，每个React组件都必须返回一个根元素。例如下面这样：

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>
    );
  }
}

在正常的HTML行文中，<tr>标签与<td>标签之间的<div>标签是不应该存在的。

虽然在这个小小的例子中，我们可以将tr标签移入到Columns中去解决这个问题，但是在错综复杂的业务层级代码中，我们经常会遇到希望一个组件返回多个并列标签的情况。

为了解决这个问题，React在16.x版本新推出了一个Fragments特性——组件碎片化。Fragments的使用方法非常简单，我们将Column组件稍作改造即可：

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

这样，在最终渲染成Dom后，并不会出现任何与HTML行文不符的标签。

简写与注意事项

除了React.Fragment这样的写法，React还推荐使用更加明了的简短写法：

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

需要注意的是：这样的写法不支持传递任何参数，而且某些编译器或者编译工具并不支持这种写法。

在队列中使用

一个React元素除了直接写成一个组件，也可以在队列中返回。Fragment标签使用到队列中同样也要使用key属性来标记队列的位置：

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}