60+ 實用 React 工具庫,助力你高效開發!

2022-01-28 若川視野

大家好，我是若川。持續組織了5個月源碼共讀活動，感興趣的可以點此加我微信 ruochuan12 參與，每周大家一起學習200行左右的源碼，共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20餘篇源碼文章。

最近看到一些實用的React工具庫，總結了一下分享給大家，避免重複造輪子。希望對你有所幫助~

一、基礎1. React Infinite Scroller

React Infinite Scroller 用於在React項目中無限滾動加載內容。

npm地址：https://www.npmjs.com/package/react-infinite-scroller

2. react-dnd

React DnD是React和Redux核心作者 Dan Abramov創造的一組React 高階組件，可以在保持組件分離的前提下幫助構建複雜的拖放接口。主要用於組件的拖放。

npm地址：https://www.npmjs.com/package/react-dnd

3. react-beautiful-dnd

react-beautiful-dnd是一款美觀且簡單易用的 React 列表拖拽庫。

npm地址：https://www.npmjs.com/package/react-beautiful-dnd

4. react-icons

使用 react-icons 可以輕鬆地在 React 項目中包含流行的圖標。

npm地址：https://www.npmjs.com/package/react-icons

5. react-share

react-share是一個React 的社交媒體分享按鈕和分享次數庫。

npm地址：https://www.npmjs.com/package/react-share

6. create-react-app

Create React App 是一個命令行界面工具，讓您無需任何配置即可快速創建和運行 React 應用程式。

npm地址：https://www.npmjs.com/package/create-react-app

7. react-intl

React Intl 提供了一個 React 組件和用於國際化 React Web 應用的 Mixin。它提供一個格式化日期、數字、字符串消息的描述方式。

npm地址：https://www.npmjs.com/package/react-intl

8. react-router

react-router 是個用於 React.js 的路由解決方案（routing solution）。它輕鬆可以同步你的 app 和 URL，同時給嵌套，轉換，和服務端渲染一流的支持。

npm地址：https://www.npmjs.com/package/react-router

9. React Virtualized

react-virtualized是一個以高效渲染大型列表和表格數據的響應式組件，可以用來解決長列表渲染問題。

npm地址：https://www.npmjs.com/package/react-virtualized

二、狀態管理1. redux

Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。可以讓你構建一致化的應用，運行於不同的環境（客戶端、伺服器、原生應用），並且易於測試。

npm地址：https://www.npmjs.com/package/redux

2. react-redux

Redux 官方提供的 React 綁定庫。具有高效且靈活的特性。

npm地址：https://www.npmjs.com/package/react-redux

3. MobX

MobX是一個經久考驗的庫,使得狀態管理簡單而且透明、可伸縮的應用功能反應性編程(TFRP)。

npm地址：https://www.npmjs.com/package/mobx

4. redux-saga

redux-saga是一個用於管理應用程式 Side Effect（副作用，例如異步獲取數據，訪問瀏覽器緩存等）的庫，它的目標是讓副作用管理更容易，執行更高效，測試更簡單，在處理故障時更容易。

npm地址：https://www.npmjs.com/package/redux-saga

5. redux-thunk

Redux 的 Thunk 中間件。

npm地址：https://www.npmjs.com/package/redux-thunk

三、組件1. Ant Design

antd 是基於 Ant Design 設計體系的 React UI 組件庫，主要用於研發企業級中後臺產品。

官網地址：https://ant.design/index-cn

2. React Select

React Select 是一個開箱即用的 Select 控制項。

官網地址：https://react-select.com/home

3. React Hot Toast

React Hot Toast 是一個熱門的通知庫，包含很多通知的樣式。

官網地址：https://react-hot-toast.com/

4. React Content Loader

React Content Loader 可以用於生成列表加載佔位組件。

官網地址：https://skeletonreact.com/

5. Sweet Alert

Sweet Alert是一個彈窗組件，包含很多彈窗樣式。

官網地址：https://sweetalert.js.org/

6. draftjs

Draft JS 是一個富文本編輯器庫。可以無縫地融入 React 應用程式。

官網地址：https://draftjs.org/

7. react-slick

React Slick是一個React輪播組件。

官網地址：https://react-slick.neostack.com/

8. Material-UI

Material-UI是一個簡單的、可定製的組件庫，用於構建更快、更漂亮、更易使用的 React 應用程式。

官網地址：https://mui.com/zh/getting-started/usage/

9. react-bootstrap

React Bootstrap是一個由 React 構建的 Bootstrap 4 組件。

官網地址：https://react-bootstrap.github.io/

10. react-custom-scrollbars

react-custom-scrollbars 是一個滾動條組件庫，可以在web和移動端流暢的使用滾動條，並且可以完全自己定製

npm地址：https://www.npmjs.com/package/react-custom-scrollbars

11. react-dropdown

react-dropdown 是一個簡單的下拉組件，靈感來自於react-select。

npm地址：https://www.npmjs.com/package/react-dropdown

12. react-horizontal-scrolling-menu

react-horizontal-scrolling-menu 是一個水平滾動菜單組件。

npm地址：https://www.npmjs.com/package/react-horizontal-scrolling-menu

13. react-calendar

react-calendar 是一個 React 的日曆組件。

npm地址：https://www.npmjs.com/package/react-calendar

14. react-datepicker

react-datepicker是一個日期選擇組件。

npm地址：https://www.npmjs.com/package/react-datepicker

15. react-table

react-table 是一個強大的表格組件。

npm地址：https://www.npmjs.com/package/react-table

16. react-awesome-button

react-awesome-button 是一個按鈕組件庫。

npm地址：https://www.npmjs.com/package/react-awesome-button

17. react-compound-slider

react-compound-slider 是一個滑塊組件。

npm地址：https://www.npmjs.com/package/react-compound-slider

18. react-checkbox-tree

react-checkbox-tree 是一個複選框組件。

npm地址：https://www.npmjs.com/package/react-checkbox-tree

19. recharts

recharts 是一個React圖表庫。

npm地址：https://www.npmjs.com/package/recharts

20. react-modal

react-modal 是一個靜態動畫庫組件庫。

npm地址：https://www.npmjs.com/package/react-modal

21. react-responsive-carousel

react-responsive-carousel 是一個響應式的輪播組件庫。

npm地址：https://www.npmjs.com/package/react-responsive-carousel

22. react-image-lightbox

react-image-lightbox 是一個用於顯示圖片的組件庫。

npm地址：https://www.npmjs.com/package/react-image-lightbox

23. react-tabs

react-tabs 是一個選項卡組件。

npm地址：https://www.npmjs.com/package/react-tabs

24. rebass

Rebass是一個用於構建響應式WEB應用的React UI工具包，它有60多種可定製的基礎組件，而且風格樣式分離，不需要編寫自定義的CSS。

官網地址：https://rebassjs.org/

25. react-suite

React Suite是一套轉為後端打造的企業級UI組件庫，它由 HYPERS 前端團隊與 UX 團隊共同打造，有大量的通用組件和功能，而且支持 Typescript 與 Flow, 支持服務端渲染。

官網地址：https://rsuitejs.com/

四、動畫1. react-spring

react-spring是基於spring-physics（彈簧物理）的react動畫庫，動畫效果更加流暢、自然。

npm地址：https://www.npmjs.com/package/react-spring

2. react-motion

react-motion是一個強大的react動畫庫。npm地址：https://www.npmjs.com/package/react-motion

3. react-transition-group

react-transition-group是一個專為動畫設計的庫。

npm地址：https://www.npmjs.com/package/react-transition-group

4. react-spinner

react-spinner用來創建加載組件。

npm地址：https://www.npmjs.com/package/react-spinner

五、HTTP1. Axios

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

npm地址：https://www.npmjs.com/package/axios

2. apisauce

apisauce 是一個建立在 axios 之上的 http 客戶端。官方介紹：Axios + standardized errors + request/response transforms.

npm地址：https://www.npmjs.com/package/apisauce

3. SuperAgent

SuperAgent 是一個輕量的Ajax API，伺服器端（Node.js）客戶端（瀏覽器端）均可使用，SuperAgent具有學習曲線低、使用簡單、可讀性好的特點,可作為客戶端請求代理模塊使用，當想處理get,post,put,delete,head請求時，可以考慮使用SuperAgent。

npm地址：https://www.npmjs.com/package/superagent

六、CSS1. styled-components

styled-components 可以在 JavaScript 代碼中使用 CSS 來設置 React 組件的樣式。通過這個庫可以自定義組件的樣式，它會將給定的樣式包裝成一個組件，可以直接使用這個組件，也不需要組件和樣式之間的映射，即創建後就是一個正常的React 組件。

npm地址：https://www.npmjs.com/package/styled-components

2. emotion

emotion是JS庫中一種高效靈活的CSS。基於JS庫中的許多其他CSS，它允許您使用字符串或對象樣式快速設置應用程式樣式。它具有可預測的組成，以避免CSS的特殊性問題。

npm地址：https://www.npmjs.com/package/emotion

七、測試1. @testing-library/react

React Testing Library 基於DOM Testing Library的基礎上添加一些API，主要用於測試React組件。該庫在使用過程並不關注組件的內部實現，而是更關注測試。該庫基於react-dom和react-dom/test-utils，是以上兩者的輕量實現。

npm地址：https://www.npmjs.com/package/@testing-library/react

2. Enzyme

Enzyme 來自 airbnb 公司，是一個用於 React 的 JavaScript 測試工具，方便你判斷、操縱和遍歷 React Components 輸出。

npm地址：https://www.npmjs.com/package/enzyme

八、表單1. react-hook-form

React Hook Form是一個高性能、靈活、易拓展、易於使用的表單校驗庫，用於React Web＆Native的表單驗證。

官網地址：https://react-hook-form.com/

2. Formik

Formik是由React組件和hooks組成，它內置了表單的state管理操作，無需我們在單獨為表單建立state，同時使用了Context，能夠讓表單組件多層嵌套，不再需要我們一層層傳遞。

npm地址：https://www.npmjs.com/package/formik

3. react-use-form-state

react-use-form-state是一個小型 React Hook，它使用原生表單輸入元素來簡化管理表單的狀態。

npm地址：https://www.npmjs.com/package/react-use-form-state

九、自定義Hooks1. use-clippy

use-clippy 是一個用 TypeScript 實現的自定義 React Hook，可以用於讀取和寫入用戶的剪貼板。

npm地址：https://www.npmjs.com/package/use-clippy

2. react-window-communication-hook

react-window-communication-hook 可以實現在瀏覽器上下文（窗口、選項卡、iframes）之間進行通信。

npm地址：https://www.npmjs.com/package/react-window-communication-hook

3. react-speech-kit

react-speech-kit 是一個用於瀏覽器內語音識別和語音合成的 React hook。簡單來說就是可以將聲音識別為文字，將文字合成為語音。

npm地址：https://www.npmjs.com/package/react-speech-kit

4. react-script-hook

react-script-hook是一個用於動態加載（並在加載時通知）外部腳本的鉤子。

npm地址：https://www.npmjs.com/package/react-script-hook

5. use-mouse-action

use-mouse-action 是一個有三個React hook的庫，用於偵聽元素或 JSX 元素上的滑鼠事件。包括滑鼠操作、滑鼠按下、滑鼠抬起事件。

npm地址：https://www.npmjs.com/package/use-mouse-action

6. @rehooks/online-status

@rehooks/online-status 用於檢查網絡狀態以確定用戶是否已連接到網絡。

npm 地址：https://www.npmjs.com/package/@rehooks/online-status

7. @rehooks/document-title

@rehooks/document-title 用於更新頁面標題（顯示在瀏覽器的選項卡中）。

npm地址：https://www.npmjs.com/package/@rehooks/document-title

8. useHooks

自定義hook庫，包含很多實用的Hooks。

官網地址：https://usehooks.com/

9. react-hanger

react-hanger是一個自定義React Hooks庫，它包含很多實用的自定義hooks。

npm地址：https://www.npmjs.com/package/react-hanger

相關焦點

  • 前端高效開發必備的 js 庫梳理
    作者： 徐小夕 來源：趣談前端之前有很多人問學好前端需要學習哪些 js 庫, 主流框架應該學 vue 還是 react ? 針對這些問題, 筆者來說說自己的看法和學習總結。首先我覺得在學習任何知識之前必須要有一個明確的學習目標, 知道自己為什麼要學它, 而不是看網上說的一股腦的給你灌輸各種知識, 讓你學習各種庫, 從而不斷的製造大家的焦慮感。前端由於入行門檻低, 更新換代很快, 每年都會有大量新的框架和庫出現, 也有大量庫被淘汰(比如 JQuery, 但是學習它的設計思想很有必要).
  • 2021 年你必須知道的 React 庫
    聲明：本文為譯文，原文連結：https://www.robinwieruch.de/react-librariesReact 已經誕生很久了，自從它誕生開始，圍繞組件驅動形成了一個非常全面的生態，但是來自其他程式語言或者框架的開發人員很難找到要構建一個 React 系統的所有組件。
  • 2021 年你應該知道的 React 庫
    聲明：本文為譯文，原文連結：https://www.robinwieruch.de/react-librariesReact 已經誕生很久了，自從它誕生開始，圍繞組件驅動形成了一個非常全面的生態，但是來自其他程式語言或者框架的開發人員很難找到要構建一個 React 系統的所有組件。
  • 2020 年你必須知道的 React 庫
    聲明：本文為譯文，原文連結：https://www.robinwieruch.de/react-librariesReact 已經誕生很久了，自從它誕生開始，圍繞組件驅動形成了一個非常全面的生態，但是來自其他程式語言或者框架的開發人員很難找到要構建一個 React 系統的所有組件。
  • 2019年,React 開發人員應該掌握的 22 種神奇工具
    （https://url.leanapp.cn/Q1JbLRB）是啟動開發 React 項目最快的方法（擁有開箱即用的現代功能）。還有什麼能比 npx create-react-app 更簡單的呢？我在 Medium 上的教程（以及 Dev.to）都是用 create-react-app 構建 React 接口界面的，只是因為它又快又簡單。
  • 11個讓你的React 應用程式更上一層樓的庫
    在這裡，與你分享11個React項目中有效且易於實現的庫，我列出的這 11 個庫，都是開箱即用的庫，它們可將你的 React 應用程式提升到一個新的水平。無論你是嘗試轉換時區還是相互比較日期/時間，你都一定會從這個庫中找到一些用處。有超過 200 多種功能適用於所有場合。
  • React Status 中文周刊 #32 - Svelte VS React
    Ian Lavery在 React 中集成 Google Maps — 全面為你講述你想要了解的一切內容，豐富了 Map 的開發體驗，這是也是許多用戶的期望。🛠  代碼與工具react-ssr-prepass：React 局部服務端渲染器 — 通過使用預傳（prepass）和暫停（pausing）的方式直到返回 Promise 的 resolved 為止，此庫提供了使用 Suspense 非常實用的方式，以實現複雜的取值邏輯。
  • 十大最受歡迎的 React Native 應用開發編輯器
    擴展ReactNative Tools - 此擴展為React Native 項目提供了開發環境。你可以調試代碼，從命令終端快速運行 react-native 命令，並使用 IntelliSense 瀏覽 React Native API 的對象、函數和參數。5.
  • React Status 中文周刊 #8 - 100 行代碼實現 Facebook 的 Recoil React 庫
    我們被簡介種草：「這個庫只做一件小事，並且把它做得很好。」為了你更容易上手，我們封裝了這個 靈活又有趣的庫。Rik Schenninkreact-xr: 創建 VR/AR 應用的工具庫 — 如果你相信VR/AR 是 UI 設計和實現領域的下一個爆點，最好試試這個工具。
  • 入門 | 從Android到React Native開發
    本文並非講解入門基礎，更多是給Android原生開發學習和理解React Native，前半部分主要是閒談和安利，後半部分是相關的入門，請緊張的往下看Σ（・□・；）請收起你不屑的眼神因為現在許多主流的應用都有React Native的影子，它對比原生開發更為靈活，對比H5體驗更為高效，而且跨平臺的支持特性。
  • 十一個優質React Hook庫, 收藏備用
    自最初發布以來已經有一段時間了，這意味著有很多支持庫。在搜索與React相關的內容時，很難不說「 hook」。如果你們還沒有使用它的話，應該儘快將它們加入代碼庫。它們將使您的編碼生活變得更加輕鬆和愉快。在React開發中，保持乾淨的代碼風格，可讀性，可維護性，更少的代碼行以及可重用性至關重要。本篇文章將向您介紹應立即開始使用的十一個React Hook庫。
  • 實用教學工具合集,助力打造高效英語課堂!
    今日小編特別甄選了一些免費實用的教學工具，以幫助老師們在微課製作、教學備課、課堂管理、測試發布等場景中輕鬆切換，高效產出！iSlide是一款基於PowerPoint的插件工具，包含38個設計輔助功能，8大在線資源庫超30萬專業PPT模板/素材。即便不懂設計，也能高效創建各類專業PPT。
  • React Status 中文周刊 #2 - 使用 React 編寫 CLI 工具
    Jerry NaviAnt Design Pro：開箱即用的中臺前端/設計解決方案 — 這個流行而成熟的庫可能包含你項目所需的全部內容Chandransh SrivastavaFlutter 和 React Native 性能概覽 — 以數據為基礎的客觀比較，將 React Native 與 Google 開源的頗具競爭力的跨平臺開發工具
  • 5個很棒的 React.js 庫,值得你親手試試!
    隨之而來的是越來越多的庫的發布，給我們帶來了新的可能性，但最重要的是讓開發這工作變得越來越簡單。在本文中，介紹 5 個 React 庫，希望能給你帶來一些幫助。1. react-portal 我認為React中的 Portals(傳送門) 對大多數人來說都很熟悉，即使它們很少被使用。
  • 如何用 React Native 開發一款電商 App?
    編者按：React Native愈發火爆，如果你尚未接觸過，不如看看本文作者的入門指南，他會帶你體驗基於RN平臺開發一款電子商務搜索類App的奇妙旅程！本文編譯自Hackernoon，原文標題為：Building an e-commerce search app with react native，推薦有一定編程基礎的讀者閱讀。
  • React Status 中文周刊 #33 - 如何為 React 應用選擇狀態管理庫
    本周有許多很有意思的教程和庫，比如 Spectacle 可以使用 React 編寫 PPT。
  • 「首席架構師推薦」關於React生態系統的一系列精選資源(2)
    React路由react-router - React的聲明性路由navi - React的聲明性異步路由curi - 用於單頁面應用程式的JavaScript路由器React組件庫material-ui - React組件，可以更快，更輕鬆地進行Web開發ant-design
  • React Status 中文周刊 #28 - 震驚!React 每周 npm 下載量突破 1000 萬次
    電腦閱讀，請訪問 https://docschina.org/weekly/react🔥 本周熱門ReacType 5.0：可視化搭建 React 應用原型的工具 — 我們在第 198 期簡單提及過 ReacType，而這次是 ReacType 的大版本發布，
  • 可能是最詳細的React組件庫搭建總結
    Table of Contents generated with DocToc概覽本文包含以下內容：prepare: 組件庫前期開發準備工作。 react-dom @types/react @types/react-dom --dev # 開發時依賴，宿主環境一定存在yarn add prop-types            # 運行時依賴，宿主環境可能不存在 安裝本組件庫時一起安裝此處依舊安裝了prop-types這個庫，因為無法保證宿主環境也使用typescript，從而能夠進行靜態檢查，故使用
  • React Status 中文周刊 #52 - Recoil 0.4.0 版本正式發布
    它也是出自 Facebook 團隊，注意不是 React 團隊。本次發布帶來了一些新功能，Bug 修復和性能優化。Colin Armstrong使用 AWS Amplify 構造一款具備「使用授權」及「身份驗證」的 React 應用 — 又一篇非常有深度的來自 Ali 的標誌性教程。