九个好用的React组件库

本文将会介绍一些最好的React UI组件库，并指导你如何选择适合自己的组件库。本文主要针对初学React的开发者，但需要一定的React专业术语基础。

• 1. MUI (formerly Material-UI)
• 2. React-Bootstrap
• 3. Ant Design
• 4. Reactstrap
• 5. Semantic UI React
• 6. Chakra UI
• 7. Theme UI
• 8. Rebass
• 9. Blueprint

React被用于全球近1000万个网站的用户界面（UI）中。虽然React的基础库非常稳健，但是有许多组件库可以为你的React应用程序或Web开发项目提供有价值的设计元素。

为了帮助您找到适合当前项目的最佳React UI库，让我们来看看GitHub上最受欢迎的React UI库。我们将分析它们在开发中的应用，并提供示例，同时根据GitHub和npm的使用统计数据来查看它们在开发者中的受欢迎程度。

让我们从为什么应该考虑使用React UI库开始。

我需要一个React UI组件库吗？

不同的React UI组件库各有其优缺点，我们将在下面详细讨论。但总的来说，使用任何组件库都有很多好处，可以在React项目开发中帮助您：

• 适合初学者。UI库由预构建的组件（如按钮、表单字段等）组成。因此，作为初学者，您不必从头开始弄清如何创建所需的任何元素。相反，您可以在文档的帮助下专注于实现和自定义。
• 更快的原型设计。有了现成的React组件，您可以快速创建多个功能原型。这意味着您可以证明设计概念是有效的，而不必花费太多时间处理任何细节。
• 节省时间。使用组件库不仅在原型设计时节省时间，而且在已经在您的React项目上工作时也节省时间。它使您编写的代码量更少，因为您不必自己编写所有样式。
• 被用户识别的组件。一定程度的创新有助于使您的项目脱颖而出。但是，在设计UX/UI方面过于创新可能会让用户望而却步。由于库中的UI元素设计为通用，因此不会对您的用户造成任何摩擦。
• 可自定义的组件。尽管是通用的，但大多数元素至少可以在某种程度上进行自定义。每个库都给您提供了不同程度的自定义控制，但您可以确保您的网站不会看起来太像其他网站。

经过验证的跨设备兼容性。大多数预构建的UI组件默认情况下都是移动响应式的，这意味着您不必花费太多额外的精力来确保您的React项目适用于不同类型的设备。

• 默认情况下可以访问。大多数流行的React UI组件库都具有内置的可访问性功能，甚至完全遵循WCAG或其他标准和最佳实践。由于这一点，您不必担心自行编码语义标签或键盘导航
• UI组件库通常以其社区为中心，围绕GitHub展开。这意味着用户可以提出问题、请求功能，还可以轻松地成为库的贡献者。

尽管有这些许多优点，即使是最好的React UI组件库也有一些缺点，您在选择之前应该考虑：

自定义组件可能很困难。根据您选择的具体库，自定义组件的容易程度会有所不同。对于某些React库，您会获得

1. MUI (formerly Material-UI)

MUI是一种简单且可定制的React组件库，基于谷歌的Material Design，并被GitHub上超过745,000个项目使用。因此，MUI不仅是一个组件库，还是一个完整的设计系统。它提供了一套全面的指南、设计原则和最佳实践，适用于UI设计。

MUI利用其大量的组件，让您能够轻松创建React应用程序的用户界面。可以使用现有的Material Design组件，对其进行自定义，或创建自己的设计系统。由于MUI的现成组件和深入的文档，即使没有太多的设计经验，您也可以快速创建干净而美观的移动应用程序或Web应用程序。

由于MUI基于Google创建的Material-UI设计系统，因此它也用于Google自己的平台。因此，MUI组件可能具有明显的谷歌风格和感觉。一方面，这意味着MUI可以是构建Android应用程序的特别好选择，因为应用程序的视觉效果将与操作系统相匹配。

但另一方面，如果没有足够的自定义，任何使用此库创建的网站或应用程序都可能与谷歌轻松关联。

尽管如此，看到MUI的使用量和GitHub上的星星数量有多少，它是最好的React UI组件库之一。它提供了大量的React组件，适用于各种通用开发项目。MUI被Medium、Scale AI和UNIQLO等公司使用。

下图显示了MUI评分变体的示例。

你可以使用 npm 安装 MUI 组件库：

npm install @mui/material @emotion/react @emotion/styled

或者

yarn add @mui/material @emotion/react @emotion/styled

2. React-Bootstrap

React-Bootstrap 是最早的 React UI 组件库之一，目前在 GitHub 上有超过 605,000 个项目使用。简而言之，它是流行的前端框架 Bootstrap 在 React 中的完全重构。该库包含一系列预制的组件，这些组件具有完全响应式和可访问性，并且所有设计元素都可以高度定制。

React-Bootstrap 可用于 UI 基础、网站和应用程序设计。该库基于 59.4% 的 JavaScript、38.3% 的 TypeScript 和 2.3% 的 SCSS 构建，最新版本与最近的 Bootstrap 5.1 版本兼容。

使用 React-Bootstrap 的一个重要优点是它与现有的数千个 Bootstrap 主题兼容。此外，只要记住 Bootstrap 中定义的类和变体，就可以轻松创建自定义主题。使用 React-Bootstrap 还可以仅导入您正在使用的单个组件，这有助于最小化总代码量。由于其文档详尽，这也是一种适合初学者使用的库。

然而，缺点是，如果您熟悉 Bootstrap 并决定选择 React-Bootstrap 作为开发项目，您将需要学习新的 API。此外，与一些其他库（如 MUI 或 Ant Design）相比，React-Bootstrap 的组件集合略微较小。

最终，React-Bootstrap 的流行是明确的信号，它是各种开发项目的绝佳选择。如果您已经熟悉 Bootstrap，则使用 React-Bootstrap 也会感觉很自然。

下面的图片展示了 React-Bootstrap 按钮变体的示例。

如何安装

npm install react-bootstrap

也可以使用yarn

yarn add react-bootstrap

3. Ant Design

Ant Design在GitHub上已经被超过255,000个项目使用。它自称为面向企业级用户的React UI库和设计系统，这意味着其元素是专门为商业使用而设计的。它是由中国科技巨头阿里巴巴创建的。

Ant Design提供了一套大量高质量组件，非常适合快速构建整个UI框架，或仅使用单个组件。该库是基于43.7％的TypeScript，31.1％的JavaScript，24.9％的Less和0.3％的未指定代码构建的。

Ant Design是一个很棒的React组件库，部分原因在于它的出色文档，其中包括大量的指南、示例和变体。此外，它在详细定制现有组件和主题方面也是一个强大的平台。

此外，Ant Design与许多第三方React库以及它们自己的几个产品（如AntV数据可视化、Ant Design图表和Ant Design移动）兼容。这些帮助扩展了可以使用其库的用例数量。

Ant Design可能看起来是一个完全包含的庞大库（1.2 MB），但它是一种摇树结构，这意味着在编译时，只会将使用的组件添加到生产构建中。

除了阿里巴巴之外，Ant Design还被联想和丰田等公司使用，因此它是高级商业项目的不错选择。而详细的资源仍然使其成为初学者的不错选项。此外，它在GitHub上的星数甚至比MUI还要高，这进一步证明了它的优势。

下面的图片显示了Ant Design中图标的变体示例。

你可以使用npm安装Ant Design组件库：

npm install antd

或者

yarn add antd

4. Reactstrap

Reactstrap是一个为Bootstrap 5.1提供简单且自包含组件的库，目前在GitHub上有241,000+个项目使用。这些UI元素响应式，设计简洁，适用于各种项目。Reactstrap基于74.7％的JavaScript，24.9％的TypeScript和0.4％的Shell构建。

你可以使用Reactstrap进行完整的UI开发，也可以只使用单独的组件。它提供了出色的灵活性和预构建的验证，非常适合快速构建具有出色用户体验的美观表单。

由于Reactstrap是比列表中其他一些组件库更年轻的库，因此可用的组件数量稍微较少。不过，如果你想要简单的设计且不想被太多选项淹没，这也可能是件好事。

官方Reactstrap文档非常详尽，但它主要由代码组成，没有太多解释。然而，由于它是一个相当直接的库，即使对于初学者来说，仍然很容易理解和使用。此外，Reactstrap周围有相当大的社区，并且由于有许多免费和付费的Reactstrap主题，你可以加快开发速度。

总的来说，Reactstrap类似于React-Bootstrap，但有一些小差异。如果你喜欢使用Bootstrap，你可以轻松地选择其中任意一个进行项目开发。

下面的图片展示了Reactstrap中按钮下拉菜单的变体示例。

要使用Reactstrap，首先需要安装Bootstrap：

npm install bootstrap

或者

yarn add bootstrap

5. Semantic UI React

在 GitHub 上使用超过132,000个项目的 Semantic UI React 是一个面向移动端的前端组件库，提供现成的解决方案。正如其名称所示，它是 Semantic UI 开发框架的官方 React 集成版，Semantic UI 因其响应式、人性化的 HTML 代码而闻名。Semantic UI React 基于99.9%的 JavaScript和0.1%的TypeScript。

在 Semantic UI React 库中，每个组件都有多个变体，因此您很可能能够找到适合您使用情况的现有组件，避免花费过多的时间自定义组件。但是，您可以通过修改 SCSS 样式表确保每个组件适合您的设计。您可以将 Semantic UI React 库用于整个项目，也可以只安装单个元素。

由于 Semantic UI，即 Semantic UI React 所基于的框架是为 Web 开发而创建的，因此它的 React 版本也更适合 Web 开发项目，而不是移动应用程序。

但是，如果您选择 Semantic UI React 用于您的项目，则应记住，您需要做一些额外的工作，因为并非所有组件默认情况下都是完全可访问的。此外，原始的 Semantic UI 框架不再得到维护。

尽管如此，Semantic UI React 依然非常强大，总体而言，它是初学者构建响应式 Web 应用程序的不错选择。它具有易于理解的人性化代码、大量示例的文档和代码沙盒，可用于尝试每个组件。

下面的图片展示了 Semantic UI React 中标签组件的一个示例。

你可以使用npm安装Semantic UI React组件：

npm install semantic-ui-react semantic-ui-css

或者

yarn add semantic-ui-react semantic-ui-css

6. Chakra UI

Chakra UI 是一个支持应用程序和Web开发的简单、模块化和可自定义的React组件库，已被超过20,000个GitHub项目使用。所有元素都针对暗模式进行了优化，并且与WAI-ARIA无障碍性标准完全兼容，与一些其他UI组件库不同。Chakra UI是基于97.5％TypeScript，1.9％JavaScript和0.6％未指定代码构建的。

您可以使用Chakra UI轻松创建自己的设计系统，或者只安装其中一些组件。由于使用了样式属性，因此很容易自定义组件和主题。

简单性确实是描述Chakra UI时使用的关键字之一。其库还非常关注开发过程，承诺您将花费更少的时间编写代码，更多的时间构建出色的用户体验。良好的文档肯定会有所帮助。

然而，由于Chakra UI相对于更受欢迎的React UI组件库而言相对较新，并且仍缺乏某些功能和组件。因此，最好将其用于不需要大量组件或高级功能的小到中级开发项目。

下图显示了Chakra UI中复选框变体的示例。

您可以使用npm安装Chakra UI及其组件：

npm install @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

或者

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

7. Theme UI

在 GitHub 上被超过 15,000 个项目使用的 Theme UI 主要是一个构建 React UI 主题的库，其中包含超过 30 个基本 UI 组件。Theme UI 的核心概念依赖于基于约束的设计原则。Theme UI 基于 74.9％ TypeScript，24.9％ JavaScript 和 0.2％ 未指定的代码构建。

您可以使用 Theme UI 自定义基本组件、创建主题或开发自己的设计系统。由于其速度快、易于使用的样式和主题能力以及对变体的支持，它在用户中间备受推崇。

Theme UI 还提供了一些出色的功能，如内置的深色模式和基于移动优先的响应式样式。此外，如果您是静态网站生成器的粉丝，您将能够充分利用 Theme UI 的优势。由于其 Gatsby 插件，Theme UI 可用于任何 Gatsby 站点和主题，并且被用于官方 Gatsby 主题。

Theme UI React 组件库可轻松用于构建 Web 应用程序。但是，由于它是一个相对较新的库，它没有像其他 UI 库一样多的基本组件或活跃的社区成员，并且默认情况下不完全兼容无障碍标准。它也没有像此列表中的其他 UI 库那样聚集许多 GitHub 星标。

不过，幸运的是，Theme UI 正变得越来越流行，更多的组件和功能都将被添加。此外，现有的文档还包括了大量示例、工具和扩展，以便于您的工作。

下面的图片展示了 Theme UI 中表单选项的一个示例。

你可以使用 npm 安装 Theme UI 组件：

npm install theme-ui

或者

yarn add theme-ui

8. Rebass

Rebass 是一个被 GitHub 上 10,000 多个项目使用的库，它具有基本的 React UI 组件和一个简单的系统，用于进一步设计。这些组件是响应式、极简主义和灵活的。此外，它是一个非常轻量级的库，仅有 43kB 的捆绑大小。Rebass 是完全由 JavaScript 构建的。

你可以使用 Rebass 来创建极简主义的设计风格，以及根据自己的需要对基础组件进行自定义。其核心使用了 Styled System，这减少了在应用程序中编写自定义 CSS 的需求，这意味着你可以更快地构建你的项目。

Rebass 支持主题，虽然它没有预先构建的主题，但它提供了足够的灵活性和自定义功能来创建你自己的主题。Rebass 库还完全兼容 Theme UI，因此如果你喜欢，可以将这两者组合使用。

如果你不想使用最终的组件或主题，但是想创建自己的设计系统而不必从头开始，那么 Rebass 是一个很好的选择。使用现有的基本组件，你可以快速创建高度定制的设计。

但要记住，Rebass 也是一个较新的库，社区还比较小 - 这可以从 GitHub 上的项目数量较少中看出。文档存在，甚至包括一些指南，但总体来说并不是非常详细。此外，使用 Rebass 时应注意，虽然某些辅助功能默认受支持，但该库并没有正式遵循任何标准。

下面的图像显示了 Rebass 中表单组件的一个示例。

你可以使用npm安装Rebass的组件：

npm install rebass

或者

yarn add rebass

9. Blueprint

Blueprint是一个在GitHub上被超过9800个项目使用的库，其库中包含了超过40个现代化的组件。其主要关注点是为复杂的数据密集型桌面应用程序构建React UI，因此不完全支持移动端响应式。Blueprint库的88.9%采用TypeScript，8.2%采用SCSS，2.2%采用JavaScript，0.7%为未指定的代码。

您可以安装Blueprint的核心包含所有基本组件，并根据特定需求添加任何附加组件包。例如，有单独的Datetime、Icons和Table包含更高级组件可供选择。或者，您可以仅导入您需要的个别组件。

Blueprint不提供任何预建的主题，除了默认的浅色主题和暗黑模式主题。不过，您有足够的空间自定义和构建自己的主题。您可以自定义类、颜色主题和排版，从而个性化设计外观。

如果您想构建一个具有美观预制组件的数据密集型桌面应用程序，Blueprint可能是最好的React组件库。它有很好的深度文档，但与Theme UI和Rebass类似，社区规模还不是很大，这意味着寻求帮助可能具有挑战性。当然，它不太适合移动应用程序。

下图显示了Blueprint中图标变体的一个示例。

您可以使用npm开始使用Blueprint的核心组件并进行安装：

npm install @blueprintjs/core

或者

yarn add @blueprintjs/core

总结

以上就是我所了解的九个React的UI组件库，希望对大家有所帮助。