【工具】1099- 推荐 8 个很棒的 React 工具库,强烈建议收藏~
UI组件库 Ant Design
要说 React 最受欢迎的 UI 组件库,那么我第一个想到的就是 Ant Design
,Ant Design
提供了数十种常用的组件,比如 Button
,Menu
,Table
等。
Ant Design
不仅功能强大,还配置灵活,深受广大 React 开发者的喜爱。而且在 github 上已经取得 74.6k+
的 star
![](https://filescdn.proginn.com/392ae2092753705cf7dc283604a94b8d/1eb11baa15b090f8132885a0dc783481.webp)
参考官网: https://ant.design/index-cn
项目地址: https://github.com/ant-design/ant-design
![](https://filescdn.proginn.com/9b49742b309ddc036834ae97c8d46e9a/53aab63cddce47a405b6a570c2c2e6c2.webp)
![](https://filescdn.proginn.com/4870f76ab7aad3d0e7b7461a13d1a792/dce00d6e57a34c1ed89fbc740c56c831.webp)
![](https://filescdn.proginn.com/1db5661437426489b23dd9fb6877b9c2/f1ce6b85e7bcc1e81af257056344cbed.webp)
富文本编辑器 braft-editor
braft-editor
是一个基于 draftjs
的 Web
富文本编辑器,适用于 React 框架,兼容主流现代浏览器。draft-js 是 facebook 开源的一个富文本编译器,braft-editor 在 draft-js 基础上进行了功能的拓展。
braft-editor
在 github 上得到了 4.2k+
的 star
。
![](https://filescdn.proginn.com/c179bdf586f896aab0a37ec3d0f7865f/bf3f8a3634649be86d15990e184292d5.webp)
项目地址: 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 用起来还是很方便的, 支持全屏,拖拽上传 ,代码块 ,引用 等功能。
![](https://filescdn.proginn.com/d989be1d9f5d6442c2df1a962d069d18/2f3eb34c2c19a629e04a9cea087a375b.webp)
状态管理工具 Dvajs
Dvajs 是基于 redux
, react-redux
,redux-saga
的状态管理工具,
在 dva 中,同步触发的 reducers
,异步触发 effects
和订阅监听的 subscriptions
构成了状态管理组织模型。dvajs
在 github
目前获得 15.8k+
star 。
![](https://filescdn.proginn.com/ba27bf225330220b73fcc92beda72214/0bd478595322b5fe28ccf4d9e0f9ff11.webp)
原理图:
![](https://filescdn.proginn.com/8c6784401dd3923c9f9e8da3db657a51/792385370cffdee2e6cc904fbc8bbb30.webp)
参考官网: https://dvajs.com/
项目地址: https://github.com/dvajs/dva
dvajs 上手也是十分简单的。
![](https://filescdn.proginn.com/8cc53240521947981602b3a3580a961d/d39519f1263f557d95afce03f5cb68db.webp)
拖拽库 React dnd
React dnd 是 React 的一个推拽库,用起来还是比较得心应手的。react-dnd
在 github
上得到了 16.4k+
的 star
。
![](https://filescdn.proginn.com/fba5af2e032bca8c666b0d6ff0b61622/212af7771cd575b021be253b4298d8a8.webp)
参考官网: https://react-dnd.github.io/react-dnd/docs/overview
项目地址: https://github.com/react-dnd/react-dnd
![](https://filescdn.proginn.com/d5facaf397871411eea8b5a3f0739d49/cd9cd103dcc76a6150dd9a188f8fb114.webp)
对于上手 react-dnd ,官网已经很详细了,感兴趣的同学,可以尝试一下。
可视化图表 echarts-for-react
echarts-for-react
是使用 React 基于 echarts 封装的图表库,能够满足基本的可视化图表需求。把 echarts 的配置参数通过 React 组件的 props 形式进行传递配置。目前在 github
上获得 3.3k+
star 。
![](https://filescdn.proginn.com/be6f3e6554506f0cf729fa10f7571c86/9fb32818191f0b39c100648b240028ee.webp)
参考官网: https://git.hust.cc/echarts-for-react/examples/simple
项目地址: 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={}
/>
![](https://filescdn.proginn.com/93185e2236891d36466084a01ef69be2/250fe9915d9a807b6671b140065463f8.webp)
markdown 预览器 react-markdown
如果想要让 React 项目展示 md
格式的文档结构,那么 react-markdown
是一个不错的选择。react-markdown 用法非常简单。
我们来看一下 react-markdown
,目前 react-markdown
在 github 上共获得 7.7k+
🌟。
![](https://filescdn.proginn.com/68879e77e629eef5d39fb5d02d8b041b/62e2060ff98c7acffc34bfc676dbf603.webp)
参考官网: http://remarkjs.github.io/react-markdown/
项目地址: 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 项目中,使用链接生成二维码,可以尝试一下 qrcode.react
,它在 github 上共获得 2.6k+
🌟。
![](https://filescdn.proginn.com/0161186e67c46160ac3cc7b0b99557f3/9e0213f76eaa1f4288b0bd3016e815cc.webp)
项目地址: 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
这个插件是笔者开发的,主要是用于一些 React 中需要缓存页面的需求,这里推广一下,目前在 github 上获得 519
颗 🌟。觉得不错的同学可以赏个小星星 🌟。
![](https://filescdn.proginn.com/15b2b275bb5a3140846d13fbf2368390/e6b8fb30ec91b149fdd1f72e89bf3db8.webp)
该插件基于react 16.8+ ,react-router 4+ 开发的 react 缓存组件,可以用于缓存页面组件,类似 vue
的 keepalive
包裹 vue-router
的效果功能。
项目地址+参考文档: https://github.com/GoodLuckAlien/react-keepalive-router
<div>
<Route path="/a" component={ComponentA} />
<Route path="/b" component={ComponentB} />
<KeepaliveRoute path={'/detail'} component={ Detail } />
div>
</KeepaliveRouterSwitch>
总结
今天给大家介绍一些不错的 React 工具库,希望看到的朋友可以尝试着用起来。