![7a6c98cd177275bd0b3de08f141f7e22.png](https://i-blog.csdnimg.cn/blog_migrate/aab76ca74df7dae7ea45d61e8f4866c0.jpeg)
你好,欢迎收听极客视点。
近日,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 组件库提供一点参考。
![92413bdf453de2f1095df64a8e1a8981.png](https://i-blog.csdnimg.cn/blog_migrate/d68767584658b52062377f2c0408a708.jpeg)