React Fragment 用途说明-节点片段，不创建额外DOM

一、React 节点片段解决的问题

由于React 组件只能有一个根标签，例如以下片段无效：

ReactDOM.render(
    <div>Row1</div>
    <div>Row2</div>,
	document.getElementById('example')
);

而以下片段有效：

ReactDOM.render(
	<React.Fragment>
        <div>Row1</div>
        <div>Row2</div>
    </React.Fragment>,
	document.getElementById('example')
);

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

你也可以使用其简写语法 <></>。

render() {
  return (
    <>
      <div>Row1</div>
      <div>Row2</div>
    </>
  );
}

从React  v16开始， render支持返回数组，这一特性已经可以减少不必要节点嵌套。

import React from 'react';

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

二、<React.Fragment> 与 <>区别

<></>  ：语法不能接受键值或属性；
<React.Fragment> ：可以接受键值或属性。key 是唯一可以传递给 Fragment 的属性。未来可能会添加对其他属性的支持，例如事件。

使用显式 <React.Fragment> 语法声明的片段可以具有 key。一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子，创建一个描述列表：

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 创建的项目可能就不能通过编译。所以遇到这种情况请用<React.Fragment>。