React.Fragment介绍与使用

React.Fragment 组件能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素。

一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

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

相当于vue的<template ></ template >.

render() {
  return (
    <React.Fragment>
       text.
      <h2>hello world</h2>
    </React.Fragment>
  );
}

 我们也可以把<React.Fragment></React.Fragment>简写为<></>,

<></> 是 <React.Fragment/> 的语法糖。

render() {
  return (
    <>
       text.
      <h2>hello world</h2>
    </>
  );
}

.但<></> 语法不能接受键值或属性。当创建一个列表时,没有`key`，React 会发出一个关键警告!!!! 所以如果你需要一个带 key 的片段，你可以直接使用 <React.Fragment />