6個常用的React組件庫

2022-01-26 InfoQ

本文最初發布於 maxrozen.com 網站，經原作者授權由 InfoQ 中文站翻譯並分享。

包大小（來自 BundlePhobia）：縮小後 1.2mB，縮小 +gzip 壓縮後 349.2kB，通過搖樹減少體積。

優點：

AntDesign 隨附了大量支持文檔，有一個社區，包括一個帶有預製模板的單獨項目（AntDesignPro）；

缺點：

汙染你的 CSS（期望添加!important 以防止它樣式化你的非 Ant 組件）。

其實我主要把 Bootstrap 看作是一個 UI 庫。它不會幫你贏得任何設計獎項，但可以用來完成一些邊緣項目和最小可行產品。

不過這取決於你要使用它的目的。如果你不熟悉 React，那麼它是一個很好的入門庫。對於經驗更豐富的開發人員來說，他們可能會去研究 styled-components / Emotion。

有兩個流行的庫帶有 Bootstrap 的 React 綁定，我個人僅使用 Reactstrap。

包大小（來自 BundlePhobia）：縮小後 111kB，縮小 +gzip 壓縮後 34.4kB，通過搖樹減少體積包大小（來自 BundlePhobia）：縮小後為 152.1kB，縮小 +gzip 壓縮後 39.4kB，通過搖樹減少體積

優點：

帶有 React 綁定的 Bootstrap 庫，大家都喜歡；它已經流行了足夠長的時間了，因此不必擔心錯誤 / 問題；沒有 jQuery 依賴，因為它已在 React 中完全重新實現。

缺點：

Bulma 與本文介紹的其他庫不太一樣，因為 Bulma 是純 CSS 框架，不需要 JS。你可以選擇直接使用 Bulma 中的類，也可以使用包裝庫，例如 react-bulma-components。

項目連結：react-bulma-components包大小（來自 BundlePhobia）：縮小後 179kB，縮小 +gzip 壓縮 20.1kB

優點：

不會讓你的網站長一副 Bootstrap 的樣子；

缺點：

包大小（來自 BundlePhobia）：縮小後為 326.2kB，縮小 +gzip 壓縮後為 101.2kB，通過搖樹減少體積

優點：

可訪問性：遵循 WAI-ARIA 準則，組件使用 aria 標籤；

缺點：

注意：

它非常接近 v1 版本，因此請注意 v0.8.0 之後的重大更改。

MaterialUI 是我又愛又恨的庫之一。過去，它幫助我扛過了一些非常緊張的項目死線，但到最後我總是儘快把它從所有角落趕走。

過去，你只能通過編寫 JSS 來自定義 MaterialUI 的樣式，但值得慶幸的是，現在可以使用 styled-components 和 Emotion 覆蓋樣式。

包大小（來自 BundlePhobia）：縮小後 325.7kB，縮小 +gizp 壓縮 92kB，通過搖樹減少體積

優點：

缺點：

定製起來既困難又痛苦，但卻很有必要（以改善視覺效果）；你的應用看起來會像谷歌的產品（對於某些人來說，這可能代表一種專業風格）。

包大小（來自 BundlePhobia）：縮小後為 300.8kB，縮小 +gzip 壓縮後為 80.9kB，通過搖樹減少體積。

優點：

用戶很知名（Netflix 內部使用，Amazon 發布的產品也在用）

缺點：

開源項目的潛在不確定性。

查看 issue：

社區運行的 fork：

ReachUI 是一個底層組件庫，允許開發人員在其設計系統中構建可訪問的 React 組件。

沒有可用的包大小，因為每個組件都單獨導出為自己的 npm 包。

Reakit 是另一個底層組件庫。從技術上講它是一個 UI 庫，但不附帶 CSS。因此你仍然需要找到一種樣式解決方案。

包大小（來自 BundlePhobia）：縮小後為 119.9kB，縮小 +gzip 壓縮後為 32.1kB，通過搖樹減少體積。

我關注 Rebass 已經有一段時間了。它是一個功能強大的組件庫，沒有自帶主題，但可以輕鬆改變主題。關於它的實踐示例，請參見其演示。

在編寫這份列表時，我曾試著避免加入商業化的設計系統，但是有些系統（Material UI）已得到廣泛採用，因此沒有它們列表就不完整了。

我還特意省略了 CSS-in-JS（如 styled-components 和 Emotion）以及實用工具 CSS 系統（如 Tailwind），因為它們不是明確的「React 組件庫」，而是用來製作組件的工具。

https://maxrozen.com/guide-to-component-ui-libraries-react/

InfoQ 讀者交流群上線啦！各位小夥伴可以掃描下方二維碼，添加 InfoQ 小助手，回復關鍵字「進群」申請入群。大家可以和 InfoQ 讀者一起暢所欲言，和編輯們零距離接觸，超值的技術禮包等你領取，還有超值活動等你參加，快來加入我們吧！

點個在看少個 bug 👇

相關焦點

  • 28個頂級的React UI組件庫,請查收!
    它基於愈加流行的 CSS 模塊 (使用 SASS 編寫) 、Webpack 和 ES6 構建。這個庫的官網頁面提供了組件演示。地址：https://github.com/bvaughn/react-virtualized這個庫的 Star 數超過 9K，它提供了一系列 React UI 組件，這些組件包含常用的元素、模式和 Web 交互
  • 60+ 實用 React 工具庫,助力你高效開發!
    npm地址：https://www.npmjs.com/package/react-intl8. react-routerreact-router 是個用於 React.js 的路由解決方案（routing solution）。
  • 精通react/vue組件設計之實現一個Tag(標籤)和Empty(空狀態)組件
    "辛勤勞動",而是要根據已有前端的開發經驗,總結出一套自己的高效開發的方法.作為數據驅動的領導者react/vue等MVVM框架的出現,幫我們減少了工作中大量的冗餘代碼, 一切皆組件的思想深得人心.所以, 為了讓工程師們有更多的時間去考慮業務和產品迭代,我們不得不掌握高質量組件設計的思路和方法.所以筆者將花時間去總結各種業務場景下的組件的設計思路和方法,並用原生框架的語法去實現各種常用組件的開發,希望等讓前端新手或者有一定工作經驗的朋友能有所收穫
  • 精通react/vue組件設計之配合React Portals實現一個(Drawer)組件
    通過組件的設計過程,大家會接觸到一個完成健壯的組件設計思路和方法,也能在實現組件的過程逐漸對react/vue的高級知識和技巧有更深的理解和掌握,並且在企業實際工作做遊刃有餘.為了讓工程師們有更多的時間去考慮業務和產品迭代,我們不得不掌握高質量組件設計的思路和方法.所以筆者將花時間去總結各種業務場景下的組件的設計思路和方法,並用原生框架的語法去實現各種常用組件的開發,希望等讓前端新手或者有一定工作經驗的朋友能有所收穫.
  • 《精通react/vue組件設計》之實現一個健壯的警告提示(Alert)組件
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫前言本文是筆者寫組件設計的第七篇文章, 今天帶大家實現一個自帶主題且可關閉的Alert組件, 該組件在諸如Antd或者elementUI等第三方組件庫中都會出現,主要用來提供系統的用戶反饋
  • 《精通react/vue組件設計》之快速實現一個可定製的進度條組件
    而是要根據已有前端的開發經驗,總結出一套自己的高效開發的方法.作為數據驅動的領導者react/vue等MVVM框架的出現,幫我們減少了工作中大量的冗餘代碼, 一切皆組件的思想深得人心.所以, 為了讓工程師們有更多的時間去考慮業務和產品迭代,我們不得不掌握高質量組件設計的思路和方法.所以筆者將花時間去總結各種業務場景下的組件的設計思路和方法,並用原生框架的語法去實現各種常用組件的開發,希望等讓前端新手或者有一定工作經驗的朋友能有所收穫
  • 這幾款ReactJS最優秀的UI框架,你用過幾個? || 附《react中文入門教程》電子版
    Material-UI是一款React組件庫來實現Google的Material Design風格UI界面框架。也是首個React的UI工具集之一。使用它可以快速搭建出賞心悅目的應用界面。Ant-design是阿里巴巴團隊出品的ReactUI組件庫。有自己獨特的設計風格和理念。在支付寶、螞蟻金服等多個阿里項目中投入使用。組件化質量非常高，開箱即用。
  • 「譯」React Router v6 中非常實用的4個API
    以下4個API不僅能幫您提升工作效率，同時還可以改善您的代碼結構。OutletforwardRefuseRoutesuseLocation不論您是React的初學者，還是已經對React了如指掌，相信以下內容都會給予您一定的幫助。
  • 一名 Vue 程式設計師總結的 React 基礎
    u1s1，不知道 react 的生命周期命名為什麼要怎麼長~~~， 小程序，vue 的都比較短。畢竟使用的頻率還是很高的，Hooks 除外。image.png1、constructorconstructor 是類通用的構造函數，常用於初始化，算是生命周期的一環。React 後來的版本中類組件也可以不寫。
  • 前端組件/庫打包利器rollup使用與配置實戰
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫目前主流的前端框架vue和react都採用rollup來打包，為了探索rollup的奧妙，接下來就讓我們一步步來探索，並基於rollup搭建一個庫打包腳手架，來發布自己的庫和組件。
  • 手寫React-Router源碼,深入理解其原理
    這樣我們就完成了一個最簡單的React-Router的應用示例，我們來分析下我們用到了他的哪些API，這些API就是我們今天要手寫的目標，仔細一看，我們好像只用到了幾個組件，這幾個組件都是從react-router-dom導出來的：BrowserRouter: 被我們重命名為了Router，他包裹了整個
  • 2021年你應該知道的9個網頁組件庫
    你還在愁著找不到與框架無關的網頁組件嗎?本文將讓你大有收穫。網頁組件包含各種常用的界面組件，如:表格、樹、聯動下拉框等，可輕鬆構造出令人耳目一新的，具有RIA （Rich Internet Application） 特徵的Web 應用界面。
  • 雲音樂 React Native 體系建設與發展
    廢棄組件RN0.6 版本移除了 2 個組件：Listview 和 navigator-ios。對於這種情況，如果我們用新組件比如 FlatList 重寫，不僅需要理解原來業務邏輯，還要修改源碼，重新測試。所以針對這種情況，團隊採取措施是：不改動現有代碼，從舊版本抽取對應組件。
  • React.js 性能分析
    Profiler 接受一個 onRender 回調函數，當被追蹤的組件以及子代組件發生更新時，該函數就會被調用。下圖是在影片排期應用中使用 Profiler 追蹤各個組件渲染:import { unstable_Profiler as Profiler } from "react";import { render } from "react-dom";
  • React組件之間的8種通訊方式
    首先要說明要選擇哪種通訊策略完全取決於要通訊的組件之間的關係。下表展示了這幾種通訊方式，你可以根據項目實際情況選擇對應的方式。1.PropsProps 是目前為止最常用的方式，用於在組件之間傳遞信息。用 props 可以把數據從父組件傳遞到它的子組件中。Props 是 React 的核心功能，也是 React 的基礎知識。
  • 從 Vue2.0 到 React17 —— React 開發入門
    ，可以使用React Hook，來避免去學習 ES6 中 的 class 語法，還有煩人的this指向問題，從而來降低入門難度。>  );}函數組件接收一個props作為傳入組件參數數據的集合，利用 ES6 解構賦值的功能，來獲取組件的參數數據，並可以給參數數據設置默認值。
  • React 輪播動畫探索
    1.
  • 精通React/Vue系列之帶你實現一個功能強大的通知提醒框
    該組件在諸如Antd或者elementUI等第三方組件庫中也都會出現,主要用來為用戶提供系統通知信息的.我們在調用它時並不像其他組件一樣，通過引入組件標籤來調用。其他業務類型熟悉以上分類法是設計任何組件系統的前提，不管你是從零到一開發前端團隊的UI庫，還是基於已有組件庫二次開發業務組件，以上分類法則同樣適用。
  • React-Router v6 新特性解讀及遷移指南
    新鉤子useRoutes代替react-router-config。1. <Switch>重命名為<Routes>該頂級組件將被重命名。但是，其功能大部分保持不變（嗨，瞎折騰）。
  • React 靈魂 23 問,你能答對幾個?
    6、聊一聊 diff 算法傳統 diff 算法的時間複雜度是 O(n^3)，這在前端 render 中是不可接受的。為了降低時間複雜度，react 的 diff 算法做了一些妥協，放棄了最優解，最終將時間複雜度降低到了 O(n)。那麼 react diff 算法做了哪些妥協呢？