• 「React Bootstrap：」一個(gè)與 Bootstrap 框架集成的實(shí)用的 React UI 庫。
• 「Grommet：」如果您想在設(shè)計(jì)中實(shí)現(xiàn)可訪問性，這個(gè) React UI 組件庫非常有用。
• 「Blueprint：」對(duì)于桌面 React 應(yīng)用程序，您需要查看 Blueprint 的產(chǎn)品。
• 「Ant Design：」這個(gè)庫的設(shè)計(jì)重點(diǎn)是與用戶的聯(lián)系：這是每個(gè)設(shè)計(jì)師都想實(shí)現(xiàn)的。
• **Onsen UI React:**如果你想構(gòu)建一個(gè)移動(dòng) React 應(yīng)用程序，這個(gè)庫將涵蓋 UI 設(shè)計(jì)。
• **Rebass:**這個(gè)庫的獨(dú)特之處在于你可以在你的代碼中使用樣式化的道具，而不需要打開第二個(gè)樣式表。
• **Semantic UI React:**顧名思義，這個(gè) React 庫集成了語義 UI 開發(fā)框架。
• **MUI:**為了實(shí)現(xiàn)類似Google 的 Material Design 的外觀，MUI 是一個(gè)很好的選擇——特別是考慮到它的實(shí)現(xiàn)簡潔明了。

事實(shí)上，庫的數(shù)量遠(yuǎn)不止八個(gè)。但是，我們認(rèn)為這些代表了市場上最高的質(zhì)量。更重要的是，它們沒有任何順序——所以請(qǐng)隨意閱讀每一個(gè)，看看它們是如何比較的。

1、React Bootstrap

首先，我們有React Bootstrap。這是較舊的 React UI 庫之一，這意味著您為 UI 設(shè)計(jì)奠定了良好的基礎(chǔ)。

該庫具有以下特點(diǎn)：

1. 使用TypeScript。
2. 使用 Bootstrap 樣式表，將能夠?qū)⑺cBootstrap 主題一起使用。

你可以通過如下指令快速引入該包

npm install react-bootstrap bootstrap

React Bootstrap 使用“variants”來創(chuàng)建不同的元素：

function TypesExample() {
  return (
    <>
      <Button variant="primary">Primary</Button>{' '}
      <Button variant="secondary">Secondary</Button>{' '}
      <Button variant="success">Success</Button>{' '}
      <Button variant="warning">Warning</Button>{' '}
      <Button variant="danger">Danger</Button>{' '}
      <Button variant="info">Info</Button>{' '}
      <Button variant="light">Light</Button>{' '}
      <Button variant="dark">Dark</Button>
      <Button variant="link">Link</Button>
    </>
  );
}

export default TypesExample;

此示例將創(chuàng)建一系列的樣式按鈕：

總的來說，React Bootstrap 使用起來很直觀，并且會(huì)幫助創(chuàng)建看起來很棒的 UI 元素。

2、Grommet

在我們最好的 React UI 組件庫和框架列表中，下一個(gè)是Grommet。這提倡簡化的方法，如果將它與 React Bootstrap 進(jìn)行比較，它會(huì)提供更多的功能。

該框架不需要很長的設(shè)計(jì)周期就可以開始工作。例如，您有Grommet Themer來幫助您將組件庫與您的配色方案相匹配。更重要的是，您擁有專用的Grommet Designer，它使用簡單的構(gòu)建器來創(chuàng)建您的組件設(shè)計(jì)。

使用 npm 或 Yarn 可以輕松安裝：

npm install grommet grommet-icons styled-components --save

可以使用以下方式創(chuàng)建一個(gè)簡單的光滑按鈕

export default () => (
  <SandboxComponent>
    <Button label='Submit' onClick={() => {}} />
  </SandboxComponent>
);

總而言之，我們喜歡 Grommet 的酷炫默認(rèn)設(shè)計(jì)、可訪問性特性和其他設(shè)計(jì)工具。

3、Blueprint UI

如果您想要一個(gè)簡潔又實(shí)用的 React UI 組件庫，Blueprint UI可能是適合您的工具包。

](https://www.designbombs.com/wp-content/uploads/2023/01/blueprint-ui.png)

你不會(huì)希望在移動(dòng)優(yōu)先的應(yīng)用程序中使用 Blueprint。這是一種開發(fā)在瀏覽器中運(yùn)行的桌面應(yīng)用程序的方法: 復(fù)雜度越高越好！

你可以通過如下指令快速引入該包

npm add @blueprintjs/core react react-dom

通過以下代碼可以創(chuàng)建一個(gè)按鈕：

<Button intent="success" text="button content" notallow={incrementCounter} />

我們認(rèn)為 Blueprint UI 是一種簡單易用的工具，非常適合快速啟動(dòng)設(shè)計(jì)。

4、Ant Design

Ant Design自稱是世界上第二受歡迎的 React UI 框架。即便如此，它仍然是你項(xiàng)目的首選。

Ant Design 的設(shè)計(jì)理念就是清晰。您可以在其默認(rèn)設(shè)計(jì)和工具包含中均可以看到這一點(diǎn)。例如，你有一個(gè)前端主題工具，還有豐富而現(xiàn)代的組件，看起來很漂亮。

你可以通過如下指令快速引入該包

npm install antd

要?jiǎng)?chuàng)建一個(gè)按鈕，您只需要最少的行數(shù)：

import { Button } from 'antd';

const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
  </>
);

結(jié)果是一個(gè)直觀、簡單且簡潔的按鈕：

總的來說，Ant Design 可以幫助你創(chuàng)建現(xiàn)代設(shè)計(jì)，在我們看來，它是最好的 React UI 組件庫和框架之一。

5、Onsen UI React

Onsen UI React是移動(dòng)應(yīng)用程序的組件庫。

它同時(shí)支持 Android 和 iOS，這意味著您擁有適用于 Material 和 Flat 設(shè)計(jì)的專用組件。更好的是，Onsen UI React 將自動(dòng)檢測您的設(shè)計(jì)適用于哪個(gè)平臺(tái)并相應(yīng)地進(jìn)行調(diào)整。

通過以下指令將引入該包。

npm install onsenui react-onsenui --save

您將使用VOns<element>組件和修飾符來創(chuàng)建元素：

<v-ons-button>Normal</v-ons-button>
<v-ons-button modifier="quiet">Quiet</v-ons-button>
<v-ons-button modifier="outline">Outline</v-ons-button>
<v-ons-button modifier="cta">Call to action</v-ons-button>
<v-ons-button modifier="large">Large</v-ons-button>

加上一些樣式，您將有一些漂亮的按鈕可以添加到您的項(xiàng)目中：

對(duì)于移動(dòng)應(yīng)用程序，您找不到許多容易使用的庫：所以強(qiáng)烈推薦使用該 React UI 組件庫。

6、Rebass

樣式對(duì)于任何UI設(shè)計(jì)來說顯然都非常重要。Rebass試圖使用styled props，以便您可以將其編碼到React UI中。

Rebass 這個(gè) React UI 庫的設(shè)計(jì)理念是盡量減少需要編寫的 CSS 代碼。這樣可以讓開發(fā)者在開發(fā)過程中更接近最終的設(shè)計(jì)效果，而不需要進(jìn)行第二輪的 CSS 樣式調(diào)整。此外，Rebass 提供了一組原始組件，這些組件也具有良好的外觀效果，并且整個(gè)庫非常輕量級(jí)。因此，Rebass 非常靈活、可擴(kuò)展，而且容易與您的項(xiàng)目集成。

通過以下指令引入該包：

npm i rebass

通過以下方式添加一個(gè)按鈕：

<Button variant='primary' mr={2}>Primary</Button>

Rebass for React 類似于 Bootstrap for CSS，但具有更好的標(biāo)記和一流的設(shè)計(jì)選項(xiàng)。該庫將幫助您進(jìn)行組件設(shè)計(jì)，而不是 HTML 和 CSS 設(shè)計(jì)。

7、Semantic UI React

與 React Bootstrap 非常相似，Semantic UI React是其父開發(fā)框架的擴(kuò)展。

如果你選擇使用 Semantic UI，這將是最好的 React UI 組件庫和框架之一。更好的是，您將能夠快速集成它，并且使用起來很直觀。此外，Semantic UI還提供了一些強(qiáng)大的功能，例如增強(qiáng)、簡寫屬性和自動(dòng)控制狀態(tài)。這意味著您可以創(chuàng)建組件，并且它們將自我管理其狀態(tài)，無需您的輸入。

通過以下指令引入該包：

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

簡單使用

const ButtonExampleButton = () => <Button>Click Here</Button>

如果您選擇使用Semantic UI，這個(gè) React UI 組件庫將最適合您的項(xiàng)目。

8、MUI

幾年前，Google's Material Design曾出現(xiàn)在公眾視野中一段時(shí)間。這個(gè)想法是將布局和設(shè)計(jì)選擇標(biāo)準(zhǔn)化,以達(dá)到 Google 認(rèn)為的“corrent”。在不討論這種方法的優(yōu)缺點(diǎn)的情況下，MUI是最好的 React UI 組件庫和框架之一，可以幫助您以這種風(fēng)格進(jìn)行創(chuàng)建。

MUI 是一個(gè)工具箱而不是一個(gè)簡單的庫。例如，您有MUI Core，還有用于高級(jí)用例的MUI X。當(dāng)您需要樹視圖、數(shù)據(jù)選擇器、數(shù)據(jù)網(wǎng)格等時(shí)，這就是您要使用的工具。此外，還提供了 UI 布局模板和設(shè)計(jì)工具包可以幫助您完成項(xiàng)目。

引入所需要的包：

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

簡單使用：

<Button variant="contained">Contained</Button>

考慮到可用性、實(shí)現(xiàn)和結(jié)果的綜合因素，選擇 MUI 是沒有錯(cuò)的。如果您需要將應(yīng)用程序與 Google 的設(shè)計(jì)風(fēng)格進(jìn)行整合，那么 MUI 是理想的選擇。

總的老說

React是用來幫助你加快編碼速度的的一個(gè)庫，React UI能夠進(jìn)一步提速，如果你基于Google的設(shè)計(jì)原則進(jìn)行設(shè)計(jì)可以使用MUI；如果開發(fā)面向移動(dòng)設(shè)備的UI設(shè)計(jì)可以使用Onsen UI React；如果開發(fā)桌面應(yīng)用程序可以首選Blueprint UI。庫雖然很多，但是大部分人首選還是Antd。

參考文檔：https://www.designbombs.com/best-react-ui-component-libraries-frameworks/。