做了N+1個(gè)企業(yè)項(xiàng)目之后, 我總結(jié)了這些React必備插件
為了提高大家開發(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ù)測化的狀態(tài)管理MobX 通過函數(shù)響應(yīng)式編程使得狀態(tài)管理變得簡單和可擴(kuò)展
Redux Thunk
Redux的異步處理中間件Redux Saga
Redux中間件,用于管理應(yīng)用程序Side Effect(副作用，例如異步獲取數(shù)據(jù)，訪問瀏覽器緩存等)Dva 一個(gè)基于
redux和redux-saga的數(shù)據(jù)流方案
2. UI組件庫
Ant design 基于
Ant Design設(shè)計(jì)體系的React UI組件庫，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品Ant design mobile 基于
Ant Design設(shè)計(jì)體系的React UI移動(dòng)端組件庫MaterialUI 世界最受歡迎的基于質(zhì)感設(shè)計(jì)的
React UI庫React toolbox 一套使用
CSS模塊功能實(shí)現(xiàn)Google的Material Design規(guī)范的React組件React Virtualized 一個(gè)能渲染大型列表和表格的
React解決方案Fabric UI 微軟開源的
UX框架的集合，用于創(chuàng)建共享代碼，設(shè)計(jì)和交互行為的精美的跨平臺應(yīng)用程序React desktop 基于
React的JavaScript庫，旨在將本機(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)庫
3. 工具類
react-copy-to-clipboard 基于
React的復(fù)制到剪切板組件qrcode.react 基于React的生成二維碼的組件
nprogress 適用于
YouTube，Medium等的頂部進(jìn)度條組件react-syntax-highlighter 基于
React的代碼高亮組件react-contextmenu 右鍵菜單組件
emoji-mart 基于
React的表情庫react-highlight-words 基于
React的關(guān)鍵字高亮
4. 數(shù)據(jù)可視化
AntV 包含
G2、G6、F2、L7以及一套完整的圖表使用和設(shè)計(jì)規(guī)范, 提供強(qiáng)大的數(shù)據(jù)可視化需求G2Plot 基于
G2封裝的開箱即用的可視化組件庫recharts 使用
React和D3構(gòu)建的自定義的圖表庫Viser 支持多種主流框架的可視化庫
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)畫庫
Ant Motion 提供了單項(xiàng)，組合動(dòng)畫，以及整套動(dòng)畫解決方案
scenejs 基于
JavaScript和CSS時(shí)間軸的動(dòng)畫庫react-text-loop 文字輪播動(dòng)畫
6. 拖拽/排序
react-beautiful-dnd 漂亮,可移植性 列表拖拽庫
react-dnd 可幫助我們構(gòu)建復(fù)雜的拖放界面，同時(shí)保持組件的分離
react-moveable 支持自由拖拽, 縮放, 參考線的靈活強(qiáng)大的拖拽庫
react-grid-layout 強(qiáng)大的網(wǎng)格拖拽排序縮放庫
mixitup 強(qiáng)大的列表卡片排序動(dòng)畫庫
7. 圖像處理
react-image-crop 強(qiáng)大的圖片裁切庫
react-sparklines 基于數(shù)據(jù)自動(dòng)生成趨勢線
dom-to-image 基于
dom生成圖片的canvas庫react-img-editor 圖片編輯器
8. 編輯器相關(guān)
braft-editor 富文本編輯器
powerNice markdown/富文本編輯器
GGEditor 可視化圖編輯器
react-codemirror2 代碼編輯器
jsoneditor json編輯器
h5-dooring H5頁面編輯器
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è)級前端應(yīng)用框架
webpack3_react 兼容
IE9+且提供完整的React全家桶解決方案
最后筆者精心準(zhǔn)備了一個(gè)React實(shí)戰(zhàn)項(xiàng)目, 方便大家學(xué)習(xí)和提高編程水平, 感興趣的朋友可以了解一下.
點(diǎn)個(gè)在看你最好看