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>