做了N+1個(gè)企業(yè)項(xiàng)目之后, 我總結(jié)了這些React必備插件
為了提高大家開(kāi)發(fā)?React?項(xiàng)目的效率, 筆者結(jié)合自己的實(shí)際工作經(jīng)驗(yàn), 匯總?cè)缦?code style="font-size: 14px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.05);word-break: break-all;">React項(xiàng)目常用插件.
1. 狀態(tài)管理
Redux?
JavaScript?狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理MobX?通過(guò)函數(shù)響應(yīng)式編程使得狀態(tài)管理變得簡(jiǎn)單和可擴(kuò)展
Redux Thunk?
Redux的異步處理中間件Redux Saga?
Redux中間件,用于管理應(yīng)用程序?Side Effect(副作用，例如異步獲取數(shù)據(jù)，訪問(wèn)瀏覽器緩存等)Dva?一個(gè)基于?
redux?和?redux-saga?的數(shù)據(jù)流方案
2. UI組件庫(kù)
Ant design?基于?
Ant Design?設(shè)計(jì)體系的?React UI?組件庫(kù)，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品Ant design mobile?基于?
Ant Design?設(shè)計(jì)體系的?React UI?移動(dòng)端組件庫(kù)MaterialUI?世界最受歡迎的基于質(zhì)感設(shè)計(jì)的
React UI庫(kù)React toolbox?一套使用
CSS模塊功能實(shí)現(xiàn)Google的Material Design規(guī)范的React組件React Virtualized?一個(gè)能渲染大型列表和表格的
React解決方案Fabric UI?微軟開(kāi)源的
UX框架的集合，用于創(chuàng)建共享代碼，設(shè)計(jì)和交互行為的精美的跨平臺(tái)應(yīng)用程序React desktop?基于
React的JavaScript庫(kù)，旨在將本機(jī)桌面體驗(yàn)帶入網(wǎng)絡(luò)，其中包含許多macOS Sierra和Windows 10組件。react-desktop與NW.js和Electron.js完美結(jié)合，但是可以在任何JavaScript驅(qū)動(dòng)的項(xiàng)目中使用Zent?有贊 PC 端?
WebUI?規(guī)范的?React?實(shí)現(xiàn)，提供了一整套基礎(chǔ)的 UI 組件以及一些常用的業(yè)務(wù)組件react-icons?基于
React封裝的豐富的圖標(biāo)庫(kù)
3. 工具類
react-copy-to-clipboard?基于
React的復(fù)制到剪切板組件qrcode.react?基于React的生成二維碼的組件
nprogress?適用于
YouTube，Medium等的頂部進(jìn)度條組件react-syntax-highlighter?基于
React的代碼高亮組件react-contextmenu?右鍵菜單組件
emoji-mart?基于
React的表情庫(kù)react-highlight-words?基于
React的關(guān)鍵字高亮
4. 數(shù)據(jù)可視化
AntV?包含?
G2、G6、F2、L7?以及一套完整的圖表使用和設(shè)計(jì)規(guī)范, 提供強(qiáng)大的數(shù)據(jù)可視化需求G2Plot?基于
G2封裝的開(kāi)箱即用的可視化組件庫(kù)recharts?使用
React和D3構(gòu)建的自定義的圖表庫(kù)Viser?支持多種主流框架的可視化庫(kù)
5. 動(dòng)畫/動(dòng)效果
Halogen?使用
React的加載動(dòng)畫集合react-move?漂亮的，數(shù)據(jù)驅(qū)動(dòng)的
React動(dòng)畫,只需3.5kb（gzip）react-spring?一個(gè)基于彈簧物理學(xué)的動(dòng)畫庫(kù)
Ant Motion?提供了單項(xiàng)，組合動(dòng)畫，以及整套動(dòng)畫解決方案
scenejs?基于
JavaScript和CSS時(shí)間軸的動(dòng)畫庫(kù)react-text-loop?文字輪播動(dòng)畫
6. 拖拽/排序
react-beautiful-dnd?漂亮,可移植性 列表拖拽庫(kù)
react-dnd?可幫助我們構(gòu)建復(fù)雜的拖放界面，同時(shí)保持組件的分離
react-moveable?支持自由拖拽, 縮放, 參考線的靈活強(qiáng)大的拖拽庫(kù)
react-grid-layout?強(qiáng)大的網(wǎng)格拖拽排序縮放庫(kù)
mixitup?強(qiáng)大的列表卡片排序動(dòng)畫庫(kù)
7. 圖像處理
react-image-crop?強(qiáng)大的圖片裁切庫(kù)
react-sparklines?基于數(shù)據(jù)自動(dòng)生成趨勢(shì)線
dom-to-image?基于
dom生成圖片的canvas庫(kù)react-img-editor?圖片編輯器
8. 編輯器相關(guān)
braft-editor?富文本編輯器
powerNice?markdown/富文本編輯器
GGEditor?可視化圖編輯器
react-codemirror2?代碼編輯器
jsoneditor?json編輯器
h5-dooring?H5頁(yè)面編輯器
9. 地圖相關(guān)
google-map-react?谷歌地圖插件
react-amap?高德地圖插件
@uiw/react-baidu-map?百度地圖
10. 腳手架
Create React App?初學(xué)者必備
React傻瓜式腳手架Next.js?構(gòu)建服務(wù)端渲染的
React腳手架umi?企業(yè)級(jí)前端應(yīng)用框架
webpack3_react?兼容
IE9+且提供完整的React全家桶解決方案
最后筆者精心準(zhǔn)備了一個(gè)React實(shí)戰(zhàn)項(xiàng)目, 方便大家學(xué)習(xí)和提高編程水平, 感興趣的朋友可以了解一下.?
點(diǎn)個(gè)在看你最好看