大家好，我是若川。持續(xù)組織了5個(gè)月源碼共讀活動(dòng)，感興趣的可以點(diǎn)此加我微信 ruochuan12?參與，每周大家一起學(xué)習(xí)200行左右的源碼，共同進(jìn)步。同時(shí)極力推薦訂閱我寫的《學(xué)習(xí)源碼整體架構(gòu)系列》?包含20余篇源碼文章。

最近看到一些實(shí)用的React工具庫(kù)，總結(jié)了一下分享給大家，避免重復(fù)造輪子。希望對(duì)你有所幫助~

一、基礎(chǔ)

1. React Infinite Scroller

React Infinite Scroller 用于在React項(xiàng)目中無(wú)限滾動(dòng)加載內(nèi)容。

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

2. react-dnd

React DnD是React和Redux核心作者 Dan Abramov創(chuàng)造的一組React 高階組件，可以在保持組件分離的前提下幫助構(gòu)建復(fù)雜的拖放接口。主要用于組件的拖放。

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

3. react-beautiful-dnd

react-beautiful-dnd是一款美觀且簡(jiǎn)單易用的 React 列表拖拽庫(kù)。

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

4. react-icons

使用 react-icons 可以輕松地在 React 項(xiàng)目中包含流行的圖標(biāo)。

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

5. react-share

react-share是一個(gè)React 的社交媒體分享按鈕和分享次數(shù)庫(kù)。

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

6. create-react-app

Create React App 是一個(gè)命令行界面工具，讓您無(wú)需任何配置即可快速創(chuàng)建和運(yùn)行 React 應(yīng)用程序。

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

7. react-intl

React Intl 提供了一個(gè) React 組件和用于國(guó)際化 React Web 應(yīng)用的 Mixin。它提供一個(gè)格式化日期、數(shù)字、字符串消息的描述方式。

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

8. react-router

react-router 是個(gè)用于 React.js 的路由解決方案（routing solution）。它輕松可以同步你的 app 和 URL，同時(shí)給嵌套，轉(zhuǎn)換，和服務(wù)端渲染一流的支持。

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

9. React Virtualized

react-virtualized是一個(gè)以高效渲染大型列表和表格數(shù)據(jù)的響應(yīng)式組件，可以用來(lái)解決長(zhǎng)列表渲染問(wèn)題。

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

二、狀態(tài)管理

1. redux

Redux 是 JavaScript 狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理。可以讓你構(gòu)建一致化的應(yīng)用，運(yùn)行于不同的環(huán)境（客戶端、服務(wù)器、原生應(yīng)用），并且易于測(cè)試。

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

2. react-redux

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

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

3. MobX

MobX是一個(gè)經(jīng)久考驗(yàn)的庫(kù),使得狀態(tài)管理簡(jiǎn)單而且透明、可伸縮的應(yīng)用功能反應(yīng)性編程(TFRP)。

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

4. redux-saga

redux-saga是一個(gè)用于管理應(yīng)用程序 Side Effect（副作用，例如異步獲取數(shù)據(jù)，訪問(wèn)瀏覽器緩存等）的庫(kù)，它的目標(biāo)是讓副作用管理更容易，執(zhí)行更高效，測(cè)試更簡(jiǎn)單，在處理故障時(shí)更容易。

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 設(shè)計(jì)體系的 React UI 組件庫(kù)，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品。

官網(wǎng)地址：https://ant.design/index-cn

2. React Select

React Select 是一個(gè)開箱即用的 Select 控件。

官網(wǎng)地址：https://react-select.com/home

3. React Hot Toast

React Hot Toast 是一個(gè)熱門的通知庫(kù)，包含很多通知的樣式。

官網(wǎng)地址：https://react-hot-toast.com/

4. React Content Loader

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

官網(wǎng)地址：https://skeletonreact.com/

5. Sweet Alert

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

官網(wǎng)地址：https://sweetalert.js.org/

6. draftjs

Draft JS 是一個(gè)富文本編輯器庫(kù)。可以無(wú)縫地融入 React 應(yīng)用程序。

官網(wǎng)地址：https://draftjs.org/

7. react-slick

React Slick是一個(gè)React輪播組件。

官網(wǎng)地址：https://react-slick.neostack.com/

8. Material-UI

Material-UI是一個(gè)簡(jiǎn)單的、可定制的組件庫(kù)，用于構(gòu)建更快、更漂亮、更易使用的 React 應(yīng)用程序。

官網(wǎng)地址：https://mui.com/zh/getting-started/usage/

9. react-bootstrap

React Bootstrap是一個(gè)由 React 構(gòu)建的 Bootstrap 4 組件。

官網(wǎng)地址：https://react-bootstrap.github.io/

10. react-custom-scrollbars

react-custom-scrollbars 是一個(gè)滾動(dòng)條組件庫(kù)，可以在web和移動(dòng)端流暢的使用滾動(dòng)條，并且可以完全自己定制

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

11. react-dropdown

react-dropdown 是一個(gè)簡(jiǎn)單的下拉組件，靈感來(lái)自于react-select。

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

12. react-horizontal-scrolling-menu

react-horizontal-scrolling-menu 是一個(gè)水平滾動(dòng)菜單組件。

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

13. react-calendar

react-calendar 是一個(gè) React 的日歷組件。

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

14. react-datepicker

react-datepicker是一個(gè)日期選擇組件。

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

15. react-table

react-table 是一個(gè)強(qiáng)大的表格組件。

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

16. react-awesome-button

react-awesome-button 是一個(gè)按鈕組件庫(kù)。

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

17. react-compound-slider

react-compound-slider 是一個(gè)滑塊組件。

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

18. react-checkbox-tree

react-checkbox-tree 是一個(gè)復(fù)選框組件。

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

19. recharts

recharts 是一個(gè)React圖表庫(kù)。

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

20. react-modal

react-modal 是一個(gè)靜態(tài)動(dòng)畫庫(kù)組件庫(kù)。

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

21. react-responsive-carousel

react-responsive-carousel 是一個(gè)響應(yīng)式的輪播組件庫(kù)。

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

22. react-image-lightbox

react-image-lightbox 是一個(gè)用于顯示圖片的組件庫(kù)。

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

23. react-tabs

react-tabs 是一個(gè)選項(xiàng)卡組件。

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

24. rebass

Rebass是一個(gè)用于構(gòu)建響應(yīng)式WEB應(yīng)用的React UI工具包，它有60多種可定制的基礎(chǔ)組件，而且風(fēng)格樣式分離，不需要編寫自定義的CSS。

官網(wǎng)地址：https://rebassjs.org/

25. react-suite

React Suite是一套轉(zhuǎn)為后端打造的企業(yè)級(jí)UI組件庫(kù)，它由 HYPERS 前端團(tuán)隊(duì)與 UX 團(tuán)隊(duì)共同打造，有大量的通用組件和功能，而且支持 Typescript 與 Flow, 支持服務(wù)端渲染。

官網(wǎng)地址：https://rsuitejs.com/

四、動(dòng)畫

1. react-spring

react-spring是基于spring-physics（彈簧物理）的react動(dòng)畫庫(kù)，動(dòng)畫效果更加流暢、自然。

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

2. react-motion

react-motion是一個(gè)強(qiáng)大的react動(dòng)畫庫(kù)。npm地址：https://www.npmjs.com/package/react-motion

3. react-transition-group

react-transition-group是一個(gè)專為動(dòng)畫設(shè)計(jì)的庫(kù)。

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

4. react-spinner

react-spinner用來(lái)創(chuàng)建加載組件。

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

五、HTTP

1. Axios

Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。

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

2. apisauce

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

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

3. SuperAgent

SuperAgent 是一個(gè)輕量的Ajax API，服務(wù)器端（Node.js）客戶端（瀏覽器端）均可使用，SuperAgent具有學(xué)習(xí)曲線低、使用簡(jiǎn)單、可讀性好的特點(diǎn),可作為客戶端請(qǐng)求代理模塊使用，當(dāng)想處理get,post,put,delete,head請(qǐng)求時(shí)，可以考慮使用SuperAgent。

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

六、CSS

1. styled-components

styled-components 可以在 JavaScript 代碼中使用 CSS 來(lái)設(shè)置 React 組件的樣式。通過(guò)這個(gè)庫(kù)可以自定義組件的樣式，它會(huì)將給定的樣式包裝成一個(gè)組件，可以直接使用這個(gè)組件，也不需要組件和樣式之間的映射，即創(chuàng)建后就是一個(gè)正常的React 組件。

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

2. emotion

emotion是JS庫(kù)中一種高效靈活的CSS。基于JS庫(kù)中的許多其他CSS，它允許您使用字符串或?qū)ο髽邮娇焖僭O(shè)置應(yīng)用程序樣式。它具有可預(yù)測(cè)的組成，以避免CSS的特殊性問(wèn)題。

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

七、測(cè)試

1. @testing-library/react

React Testing Library 基于DOM Testing Library的基礎(chǔ)上添加一些API，主要用于測(cè)試React組件。該庫(kù)在使用過(guò)程并不關(guān)注組件的內(nèi)部實(shí)現(xiàn)，而是更關(guān)注測(cè)試。該庫(kù)基于react-dom和react-dom/test-utils，是以上兩者的輕量實(shí)現(xiàn)。

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

2. Enzyme

Enzyme 來(lái)自 airbnb 公司，是一個(gè)用于 React 的 JavaScript 測(cè)試工具，方便你判斷、操縱和遍歷 React Components 輸出。

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

八、表單

1. react-hook-form

React Hook Form是一個(gè)高性能、靈活、易拓展、易于使用的表單校驗(yàn)庫(kù)，用于React Web＆Native的表單驗(yàn)證。

官網(wǎng)地址：https://react-hook-form.com/

2. Formik

Formik是由React組件和hooks組成，它內(nèi)置了表單的state管理操作，無(wú)需我們?cè)趩为?dú)為表單建立state，同時(shí)使用了Context，能夠讓表單組件多層嵌套，不再需要我們一層層傳遞。

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

3. react-use-form-state

react-use-form-state是一個(gè)小型 React Hook，它使用原生表單輸入元素來(lái)簡(jiǎn)化管理表單的狀態(tài)。

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

九、自定義Hooks

1. use-clippy

use-clippy 是一個(gè)用 TypeScript 實(shí)現(xiàn)的自定義 React Hook，可以用于讀取和寫入用戶的剪貼板。

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

2. react-window-communication-hook

react-window-communication-hook 可以實(shí)現(xiàn)在瀏覽器上下文（窗口、選項(xiàng)卡、iframes）之間進(jìn)行通信。

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

3. react-speech-kit

react-speech-kit 是一個(gè)用于瀏覽器內(nèi)語(yǔ)音識(shí)別和語(yǔ)音合成的 React hook。簡(jiǎn)單來(lái)說(shuō)就是可以將聲音識(shí)別為文字，將文字合成為語(yǔ)音。

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

4. react-script-hook

react-script-hook是一個(gè)用于動(dòng)態(tài)加載（并在加載時(shí)通知）外部腳本的鉤子。

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

5. use-mouse-action

use-mouse-action 是一個(gè)有三個(gè)React hook的庫(kù)，用于偵聽元素或 JSX 元素上的鼠標(biāo)事件。包括鼠標(biāo)操作、鼠標(biāo)按下、鼠標(biāo)抬起事件。

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

6. @rehooks/online-status

@rehooks/online-status 用于檢查網(wǎng)絡(luò)狀態(tài)以確定用戶是否已連接到網(wǎng)絡(luò)。

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

7. @rehooks/document-title

@rehooks/document-title 用于更新頁(yè)面標(biāo)題（顯示在瀏覽器的選項(xiàng)卡中）。

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

8. useHooks

自定義hook庫(kù)，包含很多實(shí)用的Hooks。

官網(wǎng)地址：https://usehooks.com/

9. react-hanger

react-hanger是一個(gè)自定義React Hooks庫(kù)，它包含很多實(shí)用的自定義hooks。

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

·················?若川簡(jiǎn)介?·················

你好，我是若川，畢業(yè)于江西高校。現(xiàn)在是一名前端開發(fā)“工程師”。寫有《學(xué)習(xí)源碼整體架構(gòu)系列》20余篇，在知乎、掘金收獲超百萬(wàn)閱讀。
從2014年起，每年都會(huì)寫一篇年度總結(jié)，已經(jīng)寫了7篇，點(diǎn)擊查看年度總結(jié)。
同時(shí)，最近組織了源碼共讀活動(dòng)，幫助3000+前端人學(xué)會(huì)看源碼。公眾號(hào)愿景：幫助5年內(nèi)前端人走向前列。

識(shí)別上方二維碼加我微信、拉你進(jìn)源碼共讀群

今日話題

略。分享、收藏、點(diǎn)贊、在看我的文章就是對(duì)我最大的支持～

總結(jié)

以上是生活随笔為你收集整理的60+ 实用 React 工具库，助力你高效开发！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。