推薦 8 個(gè)很棒的 React 工具庫，強(qiáng)烈建議收藏～
大廠技術(shù) 高級(jí)前端 Node進(jìn)階
點(diǎn)擊上方 程序員成長指北，關(guān)注公眾號(hào)
回復(fù)1，加入高級(jí)Node交流群
UI組件庫 Ant Design
要說 React 最受歡迎的 UI 組件庫，那么我第一個(gè)想到的就是 Ant Design，Ant Design 提供了數(shù)十種常用的組件，比如 Button，Menu ，Table 等。
Ant Design不僅功能強(qiáng)大，還配置靈活，深受廣大 React 開發(fā)者的喜愛。而且在 github 上已經(jīng)取得 74.6k+ 的 star
-
參考官網(wǎng)： https://ant.design/index-cn -
項(xiàng)目地址： https://github.com/ant-design/ant-design
富文本編輯器 braft-editor
braft-editor 是一個(gè)基于 draftjs 的 Web 富文本編輯器，適用于 React 框架，兼容主流現(xiàn)代瀏覽器。draft-js 是 facebook 開源的一個(gè)富文本編譯器，braft-editor 在 draft-js 基礎(chǔ)上進(jìn)行了功能的拓展。
braft-editor 在 github 上得到了 4.2k+ 的 star。
-
項(xiàng)目地址： https://github.com/margox/braft-editor
我們看一下 braft-editor 的基本使用。
# Install using yarn
yarn add braft-editor
# Install using npm
npm install braft-editor --save
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
export default function BraftEditorDemo(){
const [ editorState , setEditorState ] = useState(null)
const handleEditorChange = ()=>{ /* 富文本 */
}
return <div className="box" >
<BraftEditor
onChange={handleEditorChange}
value={editorState}
/>
</div>
}
BraftEditor 用起來還是很方便的， 支持全屏，拖拽上傳 ，代碼塊 ，引用 等功能。
狀態(tài)管理工具 Dvajs
Dvajs 是基于 redux ， react-redux ，redux-saga 的狀態(tài)管理工具，
在 dva 中，同步觸發(fā)的 reducers ，異步觸發(fā) effects 和訂閱監(jiān)聽的 subscriptions 構(gòu)成了狀態(tài)管理組織模型。dvajs 在 github 目前獲得 15.8k+ star 。
原理圖：
-
參考官網(wǎng)： https://dvajs.com/ -
項(xiàng)目地址： https://github.com/dvajs/dva
dvajs 上手也是十分簡(jiǎn)單的。
拖拽庫 React dnd
React dnd 是 React 的一個(gè)推拽庫，用起來還是比較得心應(yīng)手的。react-dnd 在 github 上得到了 16.4k+ 的 star。
-
參考官網(wǎng)： https://react-dnd.github.io/react-dnd/docs/overview -
項(xiàng)目地址： https://github.com/react-dnd/react-dnd
對(duì)于上手 react-dnd ，官網(wǎng)已經(jīng)很詳細(xì)了，感興趣的同學(xué)，可以嘗試一下。
可視化圖表 echarts-for-react
echarts-for-react 是使用 React 基于 echarts 封裝的圖表庫，能夠滿足基本的可視化圖表需求。把 echarts 的配置參數(shù)通過 React 組件的 props 形式進(jìn)行傳遞配置。目前在 github 上獲得 3.3k+ star 。
-
參考官網(wǎng)： https://git.hust.cc/echarts-for-react/examples/simple -
項(xiàng)目地址： https://github.com/hustcc/echarts-for-react
快速上手：
npm install --save echarts-for-react
import React from 'react';
import ReactECharts from 'echarts-for-react';
// or var ReactECharts = require('echarts-for-react');
<ReactECharts
option={this.getOption()}
notMerge={true}
lazyUpdate={true}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict}
opts={}
/>
markdown 預(yù)覽器 react-markdown
如果想要讓 React 項(xiàng)目展示 md 格式的文檔結(jié)構(gòu)，那么 react-markdown 是一個(gè)不錯(cuò)的選擇。react-markdown 用法非常簡(jiǎn)單。
我們來看一下 react-markdown ，目前 react-markdown 在 github 上共獲得 7.7k+ ??。
-
參考官網(wǎng)： http://remarkjs.github.io/react-markdown/ -
項(xiàng)目地址： https://github.com/remarkjs/react-markdown
使用：
import React from 'react'
import ReactMarkdown from 'react-markdown'
import ReactDom from 'react-dom'
import remarkGfm from 'remark-gfm'
ReactDom.render(
<ReactMarkdown remarkPlugins={[[remarkGfm, {singleTilde: false}]]}>
This ~is not~ strikethrough, but ~~this is~~!
</ReactMarkdown>,
document.body
)
展示效果：
二維碼展示 qrcode.react
如果想在 React 項(xiàng)目中，使用鏈接生成二維碼，可以嘗試一下 qrcode.react，它在 github 上共獲得 2.6k+ ??。
-
項(xiàng)目地址： https://github.com/zpao/qrcode.react
上手：
import QRCode from 'qrcode.react'
export default function Index(){
return <div>
<QRCode fgColor={'pink'} size={100} value="https://juejin.cn/user/2418581313687390" />
<QRCode fgColor={'blue'} size={200} value="https://juejin.cn/user/2418581313687390" />
<QRCode size={300} value="https://juejin.cn/user/2418581313687390" />
</div>
}
效果：
緩存頁面 React-keepalive-router
這個(gè)插件是筆者開發(fā)的，主要是用于一些 React 中需要緩存頁面的需求，這里推廣一下，目前在 github 上獲得 519顆 ??。覺得不錯(cuò)的同學(xué)可以賞個(gè)小星星 ??。
該插件基于react 16.8+ ,react-router 4+ 開發(fā)的 react 緩存組件，可以用于緩存頁面組件，類似 vue 的 keepalive 包裹 vue-router 的效果功能。
-
項(xiàng)目地址+參考文檔： https://github.com/GoodLuckAlien/react-keepalive-router
<KeepaliveRouterSwitch withoutRoute >
<div>
<Route path="/a" component={ComponentA} />
<Route path="/b" component={ComponentB} />
<KeepaliveRoute path={'/detail'} component={ Detail } />
</div>
</KeepaliveRouterSwitch>
總結(jié)
今天給大家介紹一些不錯(cuò)的 React 工具庫，希望看到的朋友可以嘗試著用起來。
我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對(duì)Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
“分享、點(diǎn)贊、在看” 支持一波??