无法决定使用哪个React组件库，或者你只是好奇地想知道流行的库是如何相互叠加的？在本教程中，我将比较10个最流行的React组件库，并根据流行度、健壮性和其他品质对它们进行评估。
为了在本文中进行准确的比较，我将使用以下指标：
- GitHub活动。
- 工作列表，要求库在LinkedIn Jobs和Indeed上。
- NPM的下载量。
- Quora和Reddit上的评论。
- Stack Overflow上的问题数量。
所有这些来源都表明了兴趣、使用和增长。
这些是我要考虑的其他因素：
- 国际化
- RTL支持
- 付费支持
- 付费主题
- 文件的质量
让我们深入了解一下
Material UI
Material UI，这个名单上无可争议的重量级冠军，是根据谷歌的Material Design指南创建的。它于2014年推出，目前在GitHub上有71K颗星，23.9K个分叉，2284个贡献者，687K个用户，表明有很多活跃的维护者和一个充满活力的社区。庞大的社区也意味着错误可以更快地被修复。
在这个名单上的所有库中，Material UI是GitHub用户最多的一个，其次是React Bootstrap和AntD。换句话说，它是经过最多战斗考验的。根据npmjs.com的数据，它的周下载量为2,222,083次，巩固了它作为我们名单上最常用库的地位。该库开箱即有很多功能（按钮、滑块、徽章、分隔线、工具提示等），如果你熟悉Material Design原则，你会用它们达到最佳效果。
如果你将进行大量的定制，Material UI可能不是你的最佳选择，因为它不像Rebass这样的库，是非常有主见的。说白了，定制Material UI是可能的；只是需要大量的调整，而且试图覆盖其样式很容易变得混乱。然而，如果你正在寻找一个库，你可以用它来为你的应用程序设计一个好看的用户界面，并且不会进行大量的定制，那么Material UI是你的一个好选择。
很多开发者似乎对Material UI使用CSS-in-JS这一事实感到厌恶，因为他们认为，样式设计属于CSS而不是JavaScript。
在写这篇文章的时候，我想到有些读者可能想知道从工作机会的角度来看，哪个库是最 "有利可图 "的。在Indeed.com上搜索 "material UI "这一短语，得到了令人印象深刻的650个列表。在LinkedIn Jobs上，有791个美国地点的列表显示出对Material UI的偏爱。 在这个列表中，Material UI是工作列表中最常提到的库。
我们可以比较这些库的另一个指标是在Stack Overflow上发布的问题的数量。就我个人而言，在开始使用一项技术之前，我总是想知道围绕该技术的社区是什么样的。如果发现别人已经遇到了你所遇到的问题并发现了解决方法，这总是让人感到欣慰。即使还没有人找到答案，知道有一个庞大的社区在等着回答你的问题或帮助你解决问题，也总是很好的。对于编程语言、框架和库，Stack Overflow几乎和官方文档一样重要。在Stack Overflow上快速搜索 "Material UI "会产生16260个结果。
Material UI相对于这个名单上的其他库的另一个优势是它强大的高级主题商店。 Material UI支持国际化（或i18n）。它目前支持超过32种语言。
在科技界，根据使用一种工具的公司的规模来推测这种工具将存在多久是很常见的。基于这一点，Material UI是一个明显的赢家，因为它是建立在谷歌的Material Design系统之上的，并且被许多公司使用，如NASA、Amazon、Netflix和Spotify。
要开始使用Material UI，你可以用npm或yarn安装它：
npm install @material-ui/core
yarn add @material-ui/core
与Bootstrap和AntD不同，安装后你不需要导入任何CSS文件。Material UI为你解决了这个问题，使它的安装变得更加容易。你可以简单地继续使用它的组件。下面是Material UI的按钮组件是如何导入和使用的。
import { Button } from '@material-ui/core';
function SignUp() {
return <Button color="primary">Sign Up</Button>;
}
在这里查看一些用Material Ui建立的网站样本。
Atomic CRM，用Material UI创建
蚂蚁设计
AntD试图将自己与其他库区分开来，将自己宣传为一个企业级产品的库。这意味着它是面向构建仪表盘、管理工具等的。
它创建于2014年，目前在GitHub上有74.4万颗星，30.2万个分叉，1488个贡献者，以及23.5万个用户。在这个名单上的所有库中，AntD是GitHub星级最多的一个，其次是Material UI和Semantic UI。根据npmjs.com的数据，它的周下载量为744,739。
AntD是由一家中国公司创建的，所以你经常会发现在其GitHub问题页面和论坛上用中文写的评论，在这些问题上提出的AtnD问题，让不讲中文的开发者毫无头绪。许多开发者似乎也对AntD维护者将某些功能设定为非选择性的（即认为不适合企业应用）并难以覆盖的方式有意见。还有人对维护者处理AntD社区所提出的问题的方式提出抱怨。
与Semantic UI不同，AntD支持国际化（或i18n）。它目前支持超过55种语言，并为RTL开发提供了支持。虽然AntD看起来确实像Material UI那样有一个高级主题，但它并没有像Material UI那样提供众多的选项。
在Indeed.com上搜索 "Ant Design "这一短语，会得到148个结果。这是我们名单上第三个最常提到的库，仅次于Material UI和Semantic UI。在LinkedIn Jobs上，有259个列表将Ant Design作为一项要求或偏好。
在Stack Overflow上快速搜索 "蚂蚁设计 "产生了3539个结果，仅次于Material UI、Semantic UI和React Bootstrap。
AntD的文档很好，但不如Material UI的好。组件页面有点杂乱无章，有太多的信息挤在一起。我还注意到一些排版和语法错误。
要开始使用AntD，你可以用npm或yarn安装它。
npm install antd
或者
yarn add antd
安装后，导入其CSS文件。
import 'antd/dist/antd.css';
要使用AntD的任何组件，如Button，只需导入它并在你的React函数中使用它。
import { Button } from "antd";
function SignUp() {
return <Button type="primary">Sign Up</Button>;
}
与Material UI不同，AntD不提供付费支持。开发人员可以在GitHub上打开问题或在Stack Overflow上提问。
下面是一个用AntD建立的样本网站：Empire Blue
帝国蓝，用AntD创建
Semantic UI
Semantic UI创建于2013年，目前在GitHub上有49.6K颗星，5.1K个分支，201个贡献者，以及12.6K个用户。根据npmjs的数据，Semantic UI每周有7921次下载，是我们列表中下载量最低的。这是因为在过去三年里，该库没有进行过重大的更新。
在Indeed.com上对 "语义UI "这一短语进行快速搜索，可以得到170个列表，将其置于Material UI之后，高于Ant Design。这表明，有相当多的组织正在与该库合作，并希望雇用熟悉该库的开发人员。在LinkedIn Jobs上，有264个列表将Semantic UI`作为一项要求或偏好。
该库带有列表、加载器、面包屑、按钮、表单等组件。有了Semantic UI，你就有很大的自由来定制你的网站，并赋予它独特的外观。你不会感到像使用Material UI和Bootstrap等库那样受到限制，尽管Semantic UI没有像这两个库那样提供那么多的组件。
世界上有十多亿人说的是使用从右到左的文字方向的语言，而Semantic UI提供了RTL支持。我们名单上其他提供RTL支持的库是Material UI、AntD、React Bootstrap和Reactstrap。其余的则没有。
Semantic UI目前不支持国际化，也不提供高级支持和主题。
在Stack Overflow上快速搜索 "semantic UI"，就会产生6650个结果。相当令人印象深刻。
Semantic UI的文档还可以，但是不如AntD或Material UI的文档好。AntD和Material UI的每个组件实例旁边都有CodeSandbox和StackBlitz等代码编辑器的链接，因此开发人员可以轻松地对其进行编辑。
要开始使用Semantic UI，您可以用npm或yarn来安装它。
npm install semantic-ui-react semantic-ui-css
或者
yarn add semantic-ui-react semantic-ui-css
接下来，导入其CSS文件和你希望使用的组件。
import 'semantic-ui-css/semantic.min.css';
import { Button } from 'semantic-ui-react'
并在你的React函数中使用该组件。
function SignUp() {
return <Button primary>Sign Up</Button>;
}
下面是一个用Semantic UI构建的网站的例子:路线图
路线图，用Semantic UI创建
React Bootstrap
Bootstrap是最受欢迎的前端开发库。React Bootstrap几乎就是从头开始重建的Bootstrap，以完美地适应React。这样做主要是因为传统的Bootstrap使用jQuery，它直接修改DOM（而React使用虚拟DOM）。Bootstrap的JQuery和React之间的不兼容往往会导致bug，这也增加了React Bootstrap的流行。在React Bootstrap中，所有Bootstrap组件都被转换为React组件。
值得一提的是，Bootstrap的最新版本，即5，没有利用JQuery，消除了真正的DOM修改问题。
使用React Bootstrap，你可以得到像Alerts、Accordion、Badge、Breadcrumb、Buttons、Button Group、Card、Carousel、Dropdowns等组件。虽然Reactstrap和React Bootstrap的名字相似，但它们是两个不同的库。React-bootstrap更受欢迎。
它创建于2014年，目前在GitHub上有20K颗星，3.2K个分叉，420个贡献者，552K个用户（仅次于Material UI的用户数）。根据npmjs.com的数据，它的周下载量为870,672。
我在Indeed.com和LinkedIn Jobs上无法得到React Bootstrap的准确搜索结果。在Stack Overflow上快速搜索 "React Bootstrap "产生了4444个结果。
React Bootstrap利用Bootstrap的RTL CSS文件来支持RTL。
人们对Bootstrap的一个常见抱怨是，它感觉过时了，你经常可以轻易发现用它建立的网站，而Material UI和AntD等库则不同，它们的组件感觉 "干净而现代"。
要开始使用React Bootstrap，你可以用npm或yarn安装它。
npm install react-bootstrap bootstrap
yarn add react-bootstrap bootstrap
安装后，导入其CSS文件。
import 'bootstrap/dist/css/bootstrap.min.css';
要使用React Bootstrap的任何组件，例如，简单地导入它并添加到你的功能中。
import { Button } from 'react-bootstrap';
function SignUp() {
return <Button variant="primary"> Sign Up </Button>;
}
与Material UI不同，React Bootstrap在其网站上不提供付费支持。开发者可以在GitHub上打开问题，或者在Stack Overflow和Discord上提出问题。
下面是一个用React Bootstrap构建的项目的例子:Food Eazy
Food Eazy，用React Bootstrap创建的
蓝图
Blueprint是一个为桌面应用定制的React UI组件库。你会发现其中的一些组件是滑块、面包屑、按钮、卡片、导航条、进度条、旋转器、表单、吐司等。
Blueprint有18.2万颗星，1.9万个分叉，9.5万个用户和282个贡献者。根据npmjs的数据，它每周有151465次下载。
Blueprint有独特的交互式和内容丰富的文档。在上面，你可以将不同的道具应用于组件，并立即看到这些道具引起的效果。
在LinkedIn Jobs上快速搜索 "blueprintjs"，只产生了一个结果，在Indeed.com上找到两个结果。
Blueprintjs目前在Stack Overflow的127个问题中被标记。
目前在他们的网站上没有对Blueprint的官方、高级支持。开发人员可以在GitHub上创建问题以寻求帮助或报告错误。作为一个小社区的库，它的错误和其他问题往往会在相当长的一段时间内得不到解决。它不像我们名单上的其他库那样久经考验，值得信赖。
要在你的项目中安装Blueprint库，请运行以下任一命令。
npm install @blueprintjs/core
yarn add @blueprintjs/core
接下来，导入Blueprint的CSS文件和你需要的组件。
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button } from "@blueprintjs/core";
function SignUp() {
return <Button intent="primary" text="Sign Up" />
}
Blueprint目前不提供国际化和RTL支持。
下面是一个用Blueprint构建的项目的例子:Deskreen
Deskreen，用Blueprint创建
风格
如果你是Styled System的粉丝，你肯定会喜欢这个库，因为它是建立在Styled System之上的。我认为Rebass是名单上最没有主见的库，因为与Material Ui、Semantic UI和Bootstrap不同，它的组件不附带默认的主题，让你可以自由地在你的应用程序中添加你喜欢的主题。它的样式也更容易被覆盖。Rebass是极简主义的，设计时考虑到了风格扩展。
Rebass在GitHub上有7.5K颗星，619个分叉，10K个用户，51个贡献者。
在维护方面，Rebass落后于本列表中的其他所有库，因为它不经常更新。它最后一次更新是在两年前，目前有很多开放的问题。它也不提供RTL和国际化的支持。所有这些可能是由于它在大多数情况下是一个人的军队，而不像这个名单上的其他库，它们背后有巨大的社区。根据npmjs.com的数据，它每周有61600次下载。
在Indeed.com和LinkedIn Jobs上快速搜索 "Rebass"，没有任何结果，表明它在雇主中并不受欢迎。
在Stack Overflow上快速搜索 "Rebass"，只得到60个结果。与Material UI不同，Rebass不提供付费支持，而且与AntD和Grommet不同，它也没有高级主题。
要在你的项目中安装Rebass库，请运行以下命令。
npm i rebass
import { Button } from 'rebass'
function SignUp() {
return <Button variant='primary'>Sign Up</Button>;
}
这里有一个使用Rebass的网站:羽翼图标
羽毛图标，用Rebass创建
Grommet
Grommet创建于2015年，目前在GitHub上有7.5万颗星，922个分叉，298个贡献者和6.8万用户。根据npmjs.com的数据，它每周有26235次下载。
在这个库中，你可以找到日历、头像、图表、页眉、页脚、侧栏、卡片、按钮、旋转木马等组件。
虽然Grommet没有像Material UI那样强大的主题商店，但它提供了两个工具（都还在测试阶段），Grommet Designer用于设计自定义组件，Grommet Themer用于设计主题。
Grommet是由惠普创建的，并被Netflix、Uber、三星、索尼等使用。
在Indeed.com上搜索 "grommet.io "只产生了4个结果，在LinkedIn Jobs上产生了10个结果，尽管它们都是Grommet的创造者惠普的列表。
在Stack Overflow上快速搜索 "Grommet "产生了286个结果。
要开始使用Grommet，你可以用npm或yarn安装它。
npm i grommet styled-components
yarn add grommet styled-components
要在你的应用程序中使用它，需要导入Grommet和所需的组件。
import { Grommet, Button } from "grommet";
function SignUp() {
return <Button label="Sign Up" primary />;
}
Grommet不为开发者提供付费支持。可以使用GitHub问题来报告错误。
Grommet设计器，用Grommet创建的
Onsen UI
Onsen UI for React是一个库，可用于使用React轻松创建混合移动应用程序。在这个库中，你会发现常见的移动UI组件，如Button、Carousel、Form、Progress、Range、Popover等。
在GitHub上，它有8.5K颗星，983个分叉，2.9K个用户，109个贡献者。根据npmjs.com，它每周有24351次下载。
Onsen UI有一个很好的文档。为你提供了100多个不同的组件，适用于iOS和Android平台，同时还有关于如何使用这些组件的学习资源。
在Indeed.com上快速搜索 "Onsen ui "这个短语，只得到1个列表，在LinkedIn Jobs上也有1个，所以它显然还没有在组织中给雇主留下印象，尽管它是在2013年创建的。在Stack Overflow上快速搜索 "温泉UI"，产生了951个结果。
你可以用yarn或npm在你的React应用程序中安装Onsen UI。
yarn add onsenui react-onsenui
npm install onsenui react-onsenui
接下来，你可以导入其CSS文件和你需要的组件。
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
import { Button } from 'react-onsenui';
在你的React函数里面使用该组件。
function SignUp() {
return <Button modifier="cta">Sign Up</Button>
}
Onsen UI不提供国际化和RTL支持。
下面是一个用Onsen UI构建的应用程序的例子:Offcourse Golf
Offcourse Golf，用Onsen UI创建
长青
Evergreen在GitHub上有11.2万颗星，717个分叉，2.5万用户，115个贡献者。根据npmjs.com的数据，它每周有10,382次下载。
和AntD一样，Evergreen也是面向企业级产品的。该库提供了诸如Alert、Autocomplete、Avatar、Badge & Pill、Button、Checkbox、Combobox等组件。
与Material UI和AntD不同，Evergreen的文档没有一个中央搜索功能来帮助你浏览它。然而，它有一个干净的用户界面，很容易浏览。
Evergreen UI的一个巨大的缺点是它的组件不是响应式的。
在Stack Overflow上快速搜索 "Evergreen UI"，只得到6个结果。我在Indeed.com和LinkedIn Jobs上也无法得到React Bootstrap或Evergreen的准确搜索结果。
要在你的应用程序中使用Evergreen，请运行以下程序。
yarn add evergreen-ui
npm install evergreen-ui
接下来，导入你需要的组件并将其添加到你的函数中。
import { Button } from 'evergreen-ui'
function SignUp() {
return <Button appearance="primary"> Sign Up </Button>
}
Evergreen UI不提供国际化和RTL支持。它也不提供付费主题和付费支持，但可以在GitHub上创建问题以寻求社区的帮助。
Reactstrap
Reactstrap有10.1K颗星，1.2K个分叉，231K个用户，239个贡献者。根据npmjs.com，它每周有374493次下载。
在Indeed.com上快速搜索 "Reactstrap "一词，会得到3个列表，在LinkedIn Jobs上有50个。在Stack Overflow上搜索 "Reactstrap "会产生1015个结果。
与React Bootstrap一样，Reactstrap利用Bootstrap的RTL CSS文件来支持RTL。
Reactstrap的文件运行良好，但它不如Material UI的或AntD的伟大。它的用户界面没有那么干净和现代，也没有在编辑器中编辑组件代码的选项。Reactstrap与React Bootstrap很相似。它们都是Bootstrap组件的集合，已经被转换为React组件，以便在React应用程序中使用。然而，与React Bootstrap不同的是，Reactstrap有一个令人印象深刻的高级主题商店，以帮助你在项目中打下基础。
要在你的应用程序中使用Reactstrap，你需要通过npm安装Reactstrap和Bootstrap。
npm i bootstrap
npm i reactstrap react react-dom
接下来，在你的src/index.js文件中导入它的CSS文件。
import 'bootstrap/dist/css/bootstrap.css';
接下来，你可以导入任何你需要的组件并在你的应用程序中使用它。
import { Button } from 'reactstrap';
function SignUp() {
return <Button color="primary">Sign Up</Button>
}
Reactstrap似乎并不支持i18n的开箱。它也不提供付费支持，但可以在GitHub上创建问题以获得社区的帮助。
这里有一个用Reactstrap构建的项目:缩减管理
减少管理，用Reactstrap创建
总结
下面是所有的统计资料，集中在一起。
GitHub之星（表示人们对该库的喜爱程度）
- 蚂蚁设计 - 74.4K
- Material UI - 71K
- Semantic UI - 49.6K
- React Bootstrap - 20K
- 蓝图 - 18.2K
- 常青树 - 11.2K
- Reactstrap - 10.1K
- Onsen UI - 8.5K
- Rebass - 7.5K
- Grommet - 7.5K
GitHub用户（表明社区的规模）
- Material UI - 687K
- React Bootstrap - 552K
- AntD - 235K
- Reactstrap - 231K
- Semantic UI - 12.6K
- Rebass - 10K
- Blueprint - 9.5K
- Grommet - 6.8K
- Onsen UI - 2.9K
- 常青树 2.5K
NPMJS每周下载量（表示使用量）
- Material UI - 2,222,083
- React Bootstrap - 870,672次
- AntD - 744,739
- Reactstrap - 374,493
- Blueprint - 151,465
- Rebass - 61,600
- Grommet - 26,235
- Onsen UI - 24,351
- 长青 - 10,382
- Semantic UI - 7,921
Indeed 列表（表明雇主和组织的兴趣）
- Material UI - 650个
- 语义用户界面 - 170
- AntD - 148
- Grommet - 4
- Reactstrap - 3
- 蓝图 - 2
- Onsen UI - 1
- Rebass - 0
LinkedIn工作列表（表明雇主和组织的兴趣）
- Material UI - 791
- 语义用户界面 - 264
- AntD - 259
- Reactstrap - 50
- Grommet - 10
- 蓝图 - 1
- Onsen UI - 1
- Rebass - 0
Stack Overflow标签（表示来自社区成员的帮助的数量）
- 材料用户界面 - 16,260
- Semantic UI - 6650
- React Bootstrap - 4444
- AntD - 3539
- Reactstrap - 1015
- Onsen UI - 951
- Grommet - 286
- 蓝图 (Blueprint) - 127
- Rebass - 60
- 长青 - 6
文档质量（有点主观）
在我看来，Material UI拥有最好/最全面的文档。
高级支持
Material UI是列表中唯一提供高级支持的库。
RTL支持
Material UI、React Bootstrap、Reactstrap、AntD和Semantic UI提供RTL支持。
高级主题
Material UI、AntD和Reactstrap为用户提供了高级主题。
国际化支持
在我们的列表中，只有Material UI和Ant Design提供了国际化的支持。
