11个最佳而常用的React组件库，前端开发必备！ _常用的React组件库

React是当今最流行的技术之一。这是一个agnostic UI库，由Facebook在2011年开发，并在2013年开源（Github React）。今天，React被广泛用于构建引人注目的用户界面。在这篇文章里，我们推荐在前端开发必备的React组件库，这些常用的React组件库能够帮助我们提高开发效率。
React由组件组成，这些组件是一小段代码，填充你正在构建的UI的特定部分。可以将这些组件视为JavaScript函数，将属性和状态作为输入，并将UI的描述作为输出。
这些年来，React生态系统的规模增长得惊人。现在可以使用React与Gatsby生成静态站点，使用React Native创建移动应用程序，甚至使用Electron创建桌面应用程序。还有很多东西等着我们去发现，但在这篇博文中，我们将只关注2021年最强大的而常用的React组件库。
Material-UI

文章图片

免费Material-UI主题

Material-UI是GitHub上最流行而常用的React组件库。它简单，重量轻，并根据谷歌的Material-UI规格建造。有用于布局、表单、导航、数据显示和许多其他小部件的组件。
你可以使用@material-ui/styles来为你的组件设计样式，这是一个快速、可扩展的CSS-in-JS解决方案，并且具有与样式化组件相同的优点。Material-UI也可以与其他主要的样式解决方案互操作，所以您不必使用它的样式。
蚂蚁设计（Ant Design）

文章图片

腾讯是使用Ant设计UI库的公司之一

Ant Design是一家拥有React库的中国公司，该库专为大公司的web应用程序设计。例如腾讯、阿里巴巴和百度。这个库有60多个组件，是用TypeScript编写的，带有可预测的静态类型。它的中英文文档简洁、文笔优美、内容全面。
但是Ant Design不仅仅是一个React UI库。它是一个围绕成长、意义、确定性和自然的价值建立起来的整个设计系统。看看他们的资源Figma UI套件，登陆页面模板，一个草图插件，和更多，它是我们常用的React组件库。
Blueprint

文章图片

一些Blueprint组件

作为一个常用的React组件库，Blueprint提供丰富而流行的组件。Blueprint是一个React UI库，由美国大数据分析科技公司Palantir开发。他们的React库有40多个组件，特别针对桌面应用程序的复杂数据密集接口进行了优化。
Blueprint是用TypeScript编写的，它们文档中的所有代码示例也是如此。该库支持Chrome、Firefox、Safari、IE 11和Microsoft Edge。IE10及以下版本由于缺乏对CSS flex布局的支持而不受支持。
React BootstrapReact Bootstrap作为Bootstrap JavaScript的替代品。每个组件都是作为真正的React组件构建的，所以不需要依赖jQuery。React Bootstrap是最古老的React库之一，并随着React本身稳步增长，由于使用Bootstrap有一大批老用户，所以React Bootstrap也是一个较为常用的React组件库。
Bootstrap的网格系统意味着你的布局将拥有完全响应的一系列容器、行和列。你可以在数十个组件之间进行选择，包括徽章、旋转木马、toast和超大屏幕。
Onsen UI

文章图片

一些Onsen用户界面组件

Onsen UI是一个常用的Reac组件t库，旨在构建HTML5和移动网页应用。它的组件包括选项卡、边菜单、堆栈导航、列表、表单等。所有的组件都支持iOS和Android的材质设计，并根据平台自动改变应用程序的外观。
在它的内部，Onsen由三层组成: 用cssnext编写的CSS组件，用原生JavaScript编写的web组件，易于与React集成的框架绑定，还有Vue和Angular。
Evergreen

文章图片
Evergreen是数据平台公司Segment开发的常用的React组件库。Evergreen相信，虽然你永远无法预测未来的需求，但你可以为它们做好准备。它是一个库，用于构建一个能够预测新的和不断变化的设计需求的系统。
【11个最佳而常用的React组件库，前端开发必备！】Evergreen的组件包括按钮，文件采集器，选择菜单，旋转器，边表，桌子，和更多。Evergreen v5仅部分支持主题化，但开发人员将在Evergreen v6中发布一个新的主题化api，它将使主题化更加强大和可访问。
Grommet

文章图片

Grommet组件库

Grommet是一个为响应性、可访问性和移动优先的web项目设计的组件库。它包含了原子设计方法，并允许键盘导航、屏幕阅读器标签等。它甚至有一个svg图标列表。
包括Netflix、Uber、波音、惠普、三星和Twilio在内的许多大公司都使用Grommet来设计他们的web应用程序。如果你想让你的设计感觉不那么“Googly”，看看Grommet的组件。，它是一个出色而常用的React组件库，其组件非常好看。。
Gestalt

文章图片

在CodeSandbox中使用Gestalt

Gestalt是一组React UI组件，它强化了Pinterest的设计语言。它的目的是创建一个设计最佳实践的共享库。该库支持从右到左、国际化和暗模式。
由于它的自动设计和代码更新跨平台运行，Gestalt的维护相对较低。当一个发布会导致破坏性的更改时——在用法或输入方面——它会提供一个codemod来简化升级过程。
React Virtualized

文章图片

React Virtualized列表用法示例

想要在React中有效地渲染一个大列表?
React Virtualized在这个列表中是唯一的，因为它服务于一个狭窄的、特定的目的:有效地呈现大型列表和表格数据。如果你有一个包含数百个元素的列表，或者当你试图在一个表中呈现许多列时，这是一个很有用的、常用的React组件库。
React Virtualized的组件包括一个箭头键步进器、一个自动称重器、一个单元测量器、一个柱状称重器、一个multigrid等等。它是一个多功能库，可以满足你的表格需求。
Semantic UI React

文章图片

Semantic UI React界面

React是官方的Semantic UI插件。它与jquery无关，并且具有声明性API、简化道具、子组件、扩展、自动控制状态等等。该库拥有超过50个组件的集合，包括片段、进度条、过渡、分页等。
Semantic UI React提供组件，而Semantic UI以CSS样式表的形式提供主题。你也可以使用

<
Icon className='my-icon' />

而不是

<
Icon name='my-icon' />

. 本人比较喜欢Semantic UI，有过一些使用经验，Semantic UI React也作为一个相对常用的React组件库。
Rebass

文章图片

Rebass黑暗组件

Rebass是一个原始组件库，也是一个常用的React组件库，由Brent Jackson用样式系统构建。它是为了创建一个具有设计约束和用户定义规模的一致UI而构建的。Rebass的占用空间只有4KB，这意味着快速的设计和开发。
Rebass希望通过一流的主题化支持和与Theme UI的兼容性，实现最小、有用、无约束、可扩展和主题化。这些文档包括一个关于各种主题的指南列表。阅读这篇博文，了解更多关于Rebass背后的哲学。
这是2021年要使用的11个强大而常用的React组件库，希望能够帮助你在前端开发中提高开发效率。如果你喜欢这篇文章，并认为其他人也可以从中受益，请随意使用分享按钮在社交媒体上分享它。