bootstrap 时间范围组件_6个常用的React组件库

你好，欢迎收听极客视点。

近日，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 组件库提供一点参考。