比較 React 組件庫

無法決定使用哪個 React 組件庫，或者您只是想知道流行的庫是如何相互疊加的？在本教程中，我將比較 10 個最流行的 React 組件庫，並根據流行度、健壯性和其他品質對它們進行評估。

為了在本文中進行準確的比較，我將使用以下指標：

• GitHub 活動。
• 職位列表，需要 LinkedIn Jobs 和 Indeed 上的庫。
• NPM 下載。
• Quora 和 Reddit 上的評論。
• 有關 Stack Overflow 的問題數。

所有這些來源都表明了興趣、使用和增長。

這些是我會考慮的其他因素：

• 國際化
• RTL 支持
• 付費支持
• 付費主題
• 文檔質量

讓我們潛入水中！

材質界面

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；它只需要進行大量調整，並且嘗試覆蓋其樣式很容易變得混亂。但是，如果您正在尋找一個庫，您可以使用它來為您的應用程序設計美觀的 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”會產生 16,260 個結果。

Material UI 相對於該列表中的其他庫的另一個優勢是其強大的高級主題商店。Material UI 支持國際化（或 i18n）。目前支持超過 32 種語言。

在科技界，根據使用它的公司的規模來推測一個工具的存在時間是很常見的。基於這方面，Material UI 無疑是贏家，因為它建立在 Google 的 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.4K 星、30.2K 分叉、1488 名貢獻者和 235K 用戶。在此列表中的所有庫中，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 上快速搜索“ant design”會產生 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 創建於 2013 年，目前在 GitHub 上擁有 49.6K 星、5.1K 分叉、201 名貢獻者和 12.6K 用戶。根據 npmjs，Semantic UI 每周有 7,921 次下載，是我們列表中下載次數最少的。這是因為在過去三年中，圖書館沒有進行重大更新。

在 Indeed.com 上快速搜索短語“semantic ui”會返回 170 個列表，將其置於 Material UI 之後和 Ant Design 之上。這表明大量組織正在使用該庫並希望聘請熟悉它的開發人員。在 LinkedIn Jobs 上，264 個列表將 Semantic UI` 指定為要求或偏好。

該庫帶有 List、Loader、Breadcrumb、Button、Form 等組件。使用 Semantic UI，您可以自由地自定義您的網站並賦予其獨特的外觀。您不會像使用 Material UI 和 Bootstrap 之類的庫那樣受到限制，儘管 Semantic UI 提供的組件不如這兩個。

世界上有超過 10 億人使用使用從右到左文本方向的語言，Semantic UI 提供 RTL 支持。我們列表中提供 RTL 支持的其他庫是 Material UI、AntD、React Bootstrap 和 Reactstrap。其餘的沒有。

Semantic UI 目前不支持國際化，也不提供高級支持和主題。

在 Stack Overflow 上快速搜索“語義 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>;
}

以下是使用語義 UI 構建的網站示例：路線圖

路線圖，使用語義 UI 創建

反應引導

Bootstrap 是最流行的前端開發庫。 React Bootstrap 幾乎是從頭開始重新構建的 Bootstrap，以完美地融入 React。這主要是因為傳統的 Bootstrap 使用 jQuery，它直接修改 DOM（而 React 使用虛擬 DOM）。 Bootstrap 的 JQuery 和 React 之間的不兼容往往會導致錯誤，並增加了 React Bootstrap 的流行度。在 React Bootstrap 中，所有的 Bootstrap 組件都已轉換為 React 組件。

值得一提的是，Bootstrap 5 的最新版本沒有使用 JQuery，消除了真正的 DOM 修改問題。

使用 React Bootstrap，您可以獲得 Alerts、Accordion、Badge、Breadcrumb、Buttons、Button Group、Cards、Carousel、Dropdowns 等組件。雖然 Reactstrap 和 React Bootstrap 名稱相似，但它們是兩個不同的庫。 React-bootstrap 比較流行。

創建於 2014 年，目前在 GitHub 上擁有 20K 個star、3.2K 個分叉、420 ​​個貢獻者和 552K 用戶（Material UI 之後用戶最多）。根據 npmjs.com 的數據，它每周有 870,672 次下載。

我無法在 Indeed.com 和 LinkedIn Jobs for 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 組件庫。您會在其中找到的一些組件是 Slider、Breadcrumb、Button、Card、Navbar、Progress bar、Spinner、Form、Toast 等。

Blueprint 擁有 1.82 萬顆星、1.9 萬個分叉、9.5 萬用戶和 282 名貢獻者。根據 npmjs 的數據，它每周有 151,465 次下載。

Blueprint 具有獨特的交互式和信息豐富的文檔。在它上面，你可以將不同的 props 應用到組件上，並立即看到這些 props 造成的效果。

在 LinkedIn Jobs 上快速搜索“blueprintjs”只產生一個結果，在 Indeed.com 上找到了兩個結果。

Blueprintjs 目前在 Stack Overflow 上的 127 個問題中被標記。

目前在他們的網站上沒有對 Blueprint 的官方高級支持。開發人員可以在 GitHub 上創建問題以尋求幫助或報告錯誤。作為一個擁有小社區的圖書館，它的錯誤和其他問題往往會在很長一段時間內得不到解決。它不像我們列表中的其他庫那樣久經考驗和值得信賴。

要在您的項目中安裝藍圖庫，請運行以下任一命令：

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，使用藍圖創建

重低音

如果您是 Styled System 的粉絲，那麼您一定會喜歡這個庫，因為它是建立在 Styled System 之上的。我認為 Rebass 是列表中最無主見的庫，與 Material Ui、Semantic UI 和 Bootstrap 不同，它的組件沒有默認主題，讓您可以自由地將您喜歡的主題添加到您的應用程序中。它的樣式也更容易覆蓋。 Rebass 極簡主義，設計時考慮到了風格擴展。

Rebass 在 GitHub 上擁有 7.5K 星、619 個分叉、10K 用戶和 51 位貢獻者。

在維護方面，Rebass 落後於該列表中的所有其他庫，因為它不經常更新。它最近一次更新是在兩年前，目前有很多未解決的問題。它也不提供 RTL 和國際化支持。所有這些可能是因為它在很大程度上是一個人的軍隊，不像這個名單上的其他圖書館，它們背後有巨大的社區。根據 npmjs.com 的數據，它每周有 61,600 次下載。

在 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 的網站：Feather Icons

用 Rebass 創建的羽毛圖標

索環

Grommet 創建於 2015 年，目前在 GitHub 上有 7500 顆星、922 個分叉、298 位貢獻者和 6800 名用戶。根據 npmjs.com，它每周有 26,235 次下載。

在這個庫中，您可以找到日曆、頭像、圖表、頁眉、頁腳、側邊欄、卡片、按鈕、輪播等組件。

儘管 Grommet 沒有 Material UI 那種強大的主題商店，但它提供了兩個工具（都仍處於測試階段），用於設計自定義組件的 Grommet Designer 和用於設計主題的 Grommet Themer。

Grommet 由 HP 創建，並被 Netflix、Uber、Samsung、Sony 等使用。

在 Indeed.com 上搜索“grommet.io”只會產生 4 個結果，而在 LinkedIn Jobs 上則有 10 個結果，儘管它們都是 Grommet 的創建者 HP 的列表。

在 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 Designer，使用 Grommet 創建

溫泉界面

Onsen UI for React 是一個庫，可用於使用 React 輕鬆創建混合移動應用程序。在這個庫中，您會找到常用的移動 UI 組件，如 Button、Carousel、Form、Progress、Range、Popover 等。

在 GitHub 上，它有 8.5K 星、983 個分叉、2.9K 用戶和 109 名貢獻者。根據 npmjs.com 的數據，它每周有 24,351 次下載。

Onsen UI 有一個很棒的文檔。為您提供了 100 多個適用於 iOS 和 Android 平台的不同組件，以及有關如何使用這些組件的學習資源。

在 Indeed.com 上快速搜索“Onsen ui”這一短語僅返回 1 個列表，而在 LinkedIn Jobs 中則返回 1 個，因此它顯然還沒有給組織中的雇主留下印象，即使它是在 2013 年創建的。在 Stack Overflow 上搜索“onsen 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.2K 星、717 個分叉、2.5K 用戶和 115 位貢獻者。根據 npmjs.com 的數據，它每周有 10,382 次下載。

與 AntD 一樣，Evergreen 面向的是企業級產品。該庫提供了 Alert、Autocomplete、Avatar、Badge &Pill、Button、Checkbox、Combobox 等組件。

與 Material UI 和 AntD 不同，Evergreen 的文檔沒有中央搜索功能來幫助您瀏覽它。但是，它有一個乾淨的 UI 並且易於導航。

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 擁有 10.1K 星、1.2K 分叉、231K 用戶和 239 名貢獻者。根據 npmjs.com 的數據，它每周有 374,493 次下載。

在 Indeed.com 上快速搜索“Reactstrap”一詞會返回 3 個列表，而在 LinkedIn Jobs 上會返回 50 個。在 Stack Overflow 上搜索“Reactstrap”會產生 1,015 個結果。

與 React Bootstrap 一樣，Reactstrap 利用 Bootstrap 的 RTL CSS 文件來支持 RTL。

Reactstrap 的文檔運行良好，但不如 Material UI 或 AntD 的好。它的 UI 沒有那麼乾淨和現代，並且沒有在編輯器中編輯組件代碼的選項。 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 構建的項目：Reduction Admin

Reduction Admin，使用 Reactstrap 創建

結論

以下是一個地方的所有統計數據：

GitHub Stars（表示人們對圖書館的喜愛程度）

• Ant 設計 - 74.4K
• 材質界面 - 71K
• 語義 UI - 49.6K
• React Bootstrap - 20K
• 藍圖 - 18.2K
• 常青樹 - 11.2K
• Reactstrap - 10.1K
• 溫泉用戶界面 - 8.5K
• 重低音 – 7.5K
• 索環 - 7.5K

GitHub 用戶（表示社區規模）

• 材質 UI - 687K
• React Bootstrap – 552K
• AntD – 235K
• Reactstrap – 231K
• 語義 UI – 12.6K
• 重低音 – 10K
• 藍圖 - 9.5K
• 索環 - 6.8K
• 溫泉用戶界面 - 2.9K
• 長青2.5K

NPMJS 每週下載量（表示使用情況）

• 材質界面 - 2,222,083
• React Bootstrap - 870,672
• AntD – 744,739
• Reactstrap – 374,493
• 藍圖 - 151,465
• Rebass – 61,600
• 索環 - 26,235
• 溫泉用戶界面 - 24,351
• 常青樹 - 10,382
• 語義用戶界面 - 7,921

Indeed Listings（表示雇主和組織的興趣）

• 材質 UI - 650
• 語義 UI – 170
• AntD – 148
• 索環 - 4
• Reactstrap – 3
• 藍圖 - 2
• 溫泉用戶界面 - 1
• 重低音 - 0

LinkedIn 職位列表（表明雇主和組織的興趣）

• 材質 UI - 791
• 語義 UI – 264
• AntD – 259
• Reactstrap – 50
• 索環 - 10
• 藍圖 - 1
• 溫泉 UI – 1
• 重低音 - 0

堆棧溢出標籤（表示來自社區成員的幫助量）

• 材質 UI - 16,260
• 語義 UI - 6650
• 反應引導 - 4444
• AntD – 3539
• Reactstrap – 1015
• 溫泉用戶界面 - 951
• 索環 - 286
• 藍圖 - 127
• 重低音 - 60
• 常青樹 - 6

文檔質量（主觀類型）

在我看來，Material UI 擁有最好/最全面的文檔。

高級支持

Material UI 是列表中唯一提供高級支持的庫。

RTL 支持

Material UI、React Bootstrap、Reactstrap、AntD 和 Semantic UI 提供 RTL 支持

高級主題

Material UI、AntD 和 Reactstrap 為用戶提供了優質的主題。

國際化支持

在我們的列表中，只有 Material UI 和 Ant Design 提供國際化支持。