react学习

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

React.Fragment 和 <></>

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

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

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

问题示例

不使用ragment

import { Fragment } from 'react';

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

export default function Table () {
  return (
    <table>
      <tbody>
        <tr>
        <TableData />
        </tr>
      </tbody>
    </table>
  );
}

上面的代码会渲染为：

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

<table>
  <tbody>
    <tr>
      <div>
        <td>Eat</td>
        <td>Learn</td>
        <td>code</td>
      </div>
    </tr>
  </tbody>
</table>

使用 React.Fragment语法

import { Fragment } from 'react';

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

export default function Table () {
  return (
    <table>
      <tbody>
        <tr>
        <TableData />
        </tr>
      </tbody>
    </table>
  );
}

上面的代码会渲染为：

<table>
  <tbody>
    <tr>
      <td>Eat</td>
      <td>Learn</td>
      <td>code</td>
    </tr>
  </tbody>
</table>

使用语法糖 <></>

import { Fragment } from 'react';

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

export default function Table () {
  return (
    <table>
      <tbody>
        <tr>
        <TableData />
        </tr>
      </tbody>
    </table>
  );
}

上述代码渲染为：

<table>
  <tbody>
    <tr>
      <td>Eat</td>
      <td>Learn</td>
      <td>code</td>
    </tr>
  </tbody>
</table>