React 应用程序是由 组件 组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。

React.Fragment 和 <>>

<>> 其实是 React.Fragment 的语法糖，它们两个都可以用来对元素进行分组，渲染成 HTML 后不会增加额外的标签

jsx语法编写必须要有一个根元素，类似于vue中的template的写法，再进行嵌套时，可能会出现额外增加dom节点，这样的弊端

1. 不符合html的dom规范
2. 增加一些额外无意义的标签，增加html渲染的内容，影响性能

问题示例

不使用ragment

import { Fragment } from 'react';

function TableData () {
  return  (
    

      Eat
      Learn
      Code
    
  );
}

export default function Table () {
  return (
    
  );
}

上面的代码会渲染为：

渲染的结果就是在tr中增加了一个无意义的div节点。那 TableData方法可以把div去掉吗？显然是不行的。这是因为 jsx语法本身需要包含一个根元素，移除后，则不符合jsx的语法，编译会报错，无法渲染。

        

  

    

      
Eat
        
Learn
        
code
      
    
  

使用 React.Fragment语法

import { Fragment } from 'react';

function TableData () {
  return  (
    
      Eat
      Learn
      Code
    
  );
}

export default function Table () {
  return (
    
  );
}

上面的代码会渲染为：

  

    

      
Eat
      
Learn
      
code
    
  

使用语法糖 <>>

import { Fragment } from 'react';

function TableData () {
  return  (
    <>
      Eat
      Learn
      Code
    >
  );
}

export default function Table () {
  return (
    
  );
}

上述代码渲染为：

  

    

      
Eat
      
Learn
      
code