6个常用的React组件库
极客时间编辑部
讲述：丁婵大小：6.71M时长：04:53
你好，欢迎收听极客视点。
近日，PerfBeacon 创始人马克斯·罗森（Max Rozen）在他的个人博客中分享了他精选的 6 个常用的 React 组件库，并列出了每个库的优缺点。InfoQ 对原文进行了翻译，以下是 6 个 React 组件库的具体信息，供你参考。
1. Ant Design
这是一个可以用来快速设计后台 / 内部应用的 UI 库。它拥有一个社区、大量支持文档，还有一个带有预制模板的单独项目 AntDesignPro。
AntDesign 的缺点主要有三点：一是缺乏可访问性；二是体积很大，预计会对性能产生较大影响；三是会污染你的 CSS。
2. Bootstrap
它可以看作是一个 UI 库，虽然不会帮你赢得任何设计奖项，但可以用来完成一些边缘项目和最小可行产品。
不过这取决于你要使用它的目的，如果你不熟悉 React，那么它是一个很好的入门库。但对于经验更丰富的开发人员来说，他们可能会去研究 styled-components / Emotion。
Bootstrap 的优点主要有五点：一是能快速上手；二是拥有两个带有 React 绑定的 Bootstrap 库；三是能通过 CSS-in-JS 轻松自定义；四是已经流行了足够长的时间了，因此不必担心一些错误 / 问题的发生；五是没有 jQuery 依赖，因为它已在 React 中完全重新实现。
Bootstrap 的缺点是，如果你不做自定义，那么你的网站将和其他网站没什么区别。
3. Bulma
Bulma 与本文介绍的其他库不太一样，因为它是纯 CSS 框架，不需要 JS。你可以选择直接使用 Bulma 中的类，也可以使用包装库，例如 react-bulma-components。
Bulma 的优点主要有三点：一是不会让你的网站长一副 Bootstrap 的样子；二是适合快速启动和运行；三是拥有现代化特性，比如底层是 Flexbox/ 网格。
它的缺点是可访问性一般，虽然有一些，但没有像其他库那样严格遵守 WCAG 准则。
4. Chakra UI
这是一个简单的、模块化和可访问的组件库，提供构建 React 应用程序所需的所有组件，使创建网站和应用程序变得非常容易。
它的优点主要有四点：一是可访问性高，本身遵循 WAI-ARIA 准则，组件使用 aria 标签；二是由 Discord 服务器提供支持；三是易于定制，带有主题支持；四是高度模块化，因此摇树实际上会删除你不使用的代码。
它的缺点就一个字，新。这是一个相当新的组件库。
5. Material UI
过去，你只能通过编写 JSS 来自定义 MaterialUI 的样式，但值得庆幸的是，现在可以使用 styled-components 和 Emotion 覆盖样式。
MaterialUI 的优点主要有三点：一是拥有完善的文档；二是它的图标库很大；三是它简单易用，特别是在一开始的时候。
它的缺点也很明显，主要体现在三个方面：一是定制起来既困难又痛苦，但却很有必要，比如在改善视觉效果等方面；二是性能上会渲染过多的 DOM 节点；三是它会使你的应用看起来像谷歌的产品。
6. Semantic UI
顾名思义，这是一款语义化的 UI 框架，代码可读性与可理解性很强，界面简洁美观，与 Bootstrap 风格接近，基于 jQuery，适用响应式布局。
Semantic UI 的优点主要有五点：一是可组合，使用 as prop 传递组件；二是易于定制；三是拥有好用的文档；四是用户很知名，比如 Netflix 内部在使用它，Amazon 发布的产品也在用它；五是有 TypeScript 支持。
它的缺点主要就在于开源项目的潜在不确定性。
值得注意的是，马克斯·罗森在编写这份列表时，曾试着避免加入商业化的设计系统，但是有些系统已得到广泛采用，比如 Material UI，因此没有它们列表就不完整了。
另外，罗森还特意省略了 CSS-in-JS（如 styled-components 和 Emotion）以及实用工具 CSS 系统（如 Tailwind ），因为它们不是明确的“React 组件库”，而是用来制作组件的工具。
以上就是今天的内容，希望能为你选择合适的 React 组件库提供一点参考。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
该免费文章来自《极客视点》，如需阅读全部文章，
请先领取课程
请先领取课程
免费领取
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。
收起评论