60+ 實用 React 工具庫，助力你高效開發！

大家好，我是若川。持續組織了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

五、HTTP

1. 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

六、CSS

1. 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

九、自定義Hooks

1. 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

·················?若川簡介?·················

你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助3000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。