react组件有：1、Ant Design；2、Bootstrap；3、Bulma；4、Chakra UI；5、Material UI；6、Semantic UI；7、Reach UI；8、Reakit；9、Rebass等。
本教程的操作环境：Windows10系统、react18.0.0版、Dell G3电脑。
react它们都有哪些组件？
推荐顶级React组件库
Ant Design
项目链接：
- Ant Design
- https://ant.design/
- 包大小(来自 BundlePhobia）：缩小后 1.2mB，缩小 gzip 压缩后 349.2kB，通过摇树减少体积。
优点：
- AntDesign 附有大量的支持文档，有一个社区，包括一个带有预制模板的单独项目（AntDesignPro）；
- 后台可用于快速设计 / 内部应用的 UI 库。
缺点：
- 缺乏可访问性；
- 体积大，预计会对性能产生很大影响；
- 污染你的 CSS(期待添加！important 防止它风格化你的非 Ant 组件）。
Bootstrap
事实上，我主要把它放在一边 Bootstrap 看作是一个 UI 图书馆。它不会帮助你赢得任何设计奖项，但它可以用来完成一些边缘项目和最小可行产品。
但这取决于你使用它的目的。如果你不熟悉它 React，所以这是一个很好的入门级数据库。对于更有经验的开发人员，他们可能会去研究 styled-components / Emotion。
有两个流行的库带 Bootstrap 的 React 绑定，我个人只用 Reactstrap。
项目链接：
- React Bootstrap
- https://react-bootstrap.github.io/
- 包大小(来自 BundlePhobia）：缩小后 111kB，缩小 gzip 压缩后 34.4kB，通过摇树减少体积
- Reactstrap
- https://reactstrap.github.io/
- 包大小(来自 BundlePhobia）：缩小后为 152.1kB，缩小 gzip 压缩后 39.4kB，通过摇树减少体积
优点：
- 带有 React 绑定的 Bootstrap 库，大家都喜欢；
- 通过 CSS-in-JS 轻松定制；
- 它已经流行了足够长的时间，所以不用担心错误 / 问题；
- 快速上手；
- 没有 jQuery 依赖，因为它已经存在了 React 完全重新实现。
缺点：
- 这是 Bootstrap：如果你不定制自己，你的网站将与其他网站没有什么不同。
Bulma
Bulma 与本文介绍的其他库不同，因为 Bulma 是纯 CSS 不需要框架 JS。您可以选择直接使用 Bulma 包装仓库也可以用于中类，比如 react-bulma-components。
项目链接：
- Bulma
- https://bulma.io/
- react-bulma-components
- https://github.com/couds/react-bulma-components
- 包大小(来自 BundlePhobia）：缩小后 179kB，缩小 gzip 压缩 20.1kB
优点：
- 你的网站长不会让你看起来像 Bootstrap 的样子；
- 适用于快速启动和运行；
- 现代特征(底层是 Flexbox/ 网格）。
缺点：
- 可访问性：虽然有一些，但不像其他库那样严格遵守 WCAG 准则。
Chakra UI
项目链接：
- ChakraUI
- https://chakra-ui.com/
- 包大小(来自 BundlePhobia）：缩小后为 326.2kB，缩小 gzip 压缩后为 101.2kB，通过摇树减少体积
优点：
- 可访问性：遵循 WAI-ARIA 使用组件的标准 aria 标签；
- Discord 支持服务器；
- 易于定制(有主题支持)；
- 高度模块化，所以摇树实际上会删除你不使用的代码。
缺点：
- 相当新。
注意：
它非常接近 v1 所以请注意版本 v0.8.0 随后的重大变化。
Material UI
MaterialUI 它是我又爱又恨的库之一。在过去，它帮助我承担了一些非常紧张的项目死线，但最终，我总是尽快把它从各个角落赶走。
在过去，你只能通过写作 JSS 来自定义 MaterialUI 但幸运的是，它现在可以使用了 styled-components 和 Emotion 覆盖样式。
https://material-ui.com/guides/interoperability/#styled-components
项目链接：
- Material UI
- https://material-ui.com/
- 包大小(来自 BundlePhobia）：缩小后 325.7kB，缩小 gizp 压缩 92kB，通过摇树减少体积
优点：
- 完善的文档
- 图标库很大
- https://material-ui.com/components/material-icons/
- 简单易用(一开始)
缺点：
- 定制既困难又痛苦，但有必要(以提高视觉效果)；
- 性能：渲染过多 DOM 节点；
- 你的应用看起来像谷歌的产品(对某些人来说，这可能代表一种专业风格)。
Semantic UI
项目链接：
- Semantic UI
- https://semantic-ui.com/
- Semantic-UI-React
- 包大小(来自 BundlePhobia）：缩小后为 300.8kB，缩小 gzip 压缩后为 80.9kB，通过摇树减少体积。
优点
- 可组合(使用) as prop 传递组件）
- 易于定制
- 好用的文档
- 用户很知名（Netflix 内部使用，Amazon 发布的产品也在使用)
- TypeScript 支持
缺点
- 开源项目的潜在不确定性。
- 查看 issue：
- https://github.com/Semantic-Org/Semantic-UI/issues/6109
- https://github.com/Semantic-Org/Semantic-UI/issues/6413
- 社区运行的 fork：
- https://github.com/fomantic/Fomantic-UI
荣誉奖
Reach UI
ReachUI 允许开发人员在其设计系统中构建可访问的底层组件库 React 组件。
没有可用的包大小，因为每个组件都是自己导出的 npm 包。
Reakit
Reakit 是另一个底层组件库。从技术上讲，它是一个底层组件库。 UI 库，但不附带 CSS。所以你仍然需要找到一个风格解决方案。
- 包大小(来自 BundlePhobia）：缩小后为 119.9kB，缩小 gzip 压缩后为 32.1kB，通过摇树减少体积。
Rebass
我关注 Rebass 已经有一段时间了。它是一个强大的组件库，没有自己的主题，但很容易改变主题。请参见其演示：
https://rebassjs.org/demo
项目链接：
- Rebass
- https://rebassjs.org/
- 包大小(来自 BundlePhobia）：缩小后 43kB，缩小 gizp 压缩 14.4kB，通过摇树减少体积。
提示
在编写这个列表时，我试图避免加入商业设计系统，但有些系统（Material UI）它被广泛使用，因此没有它们的列表是不完整的。
我也特意省略了 CSS-in-JS（如 styled-components 和 Emotion）以及实用工具 CSS 系统（如 Tailwind，https://tailwindcss.com/），因为它们不清楚”React 组件库”是制作组件的工具。
推荐学习：《react视频教程》
以上是react有哪些组件的详细内容，请关注php中文网的其他相关文章！