这次给大家带来如何使用react配合antd组件实现管理系统，使用react配合antd组件实现管理系统的注意事项有哪些，下面就是实战案例，一起来看一下。
使用create-react-app脚手架
具体基础配置请参考
配合antd组件实现的管理系统demo,线上地址
开发前反思
1. 按需加载
webpack的 import 动态加载的模块的函数，import(参数)，参数为模块地址。
注意： import 后会返回一个promise对象。
import('/components/chart').then(mud => {
dosomething(mod)
});
本demo构建了异步加载组件bundle,具体代码请见
class bundle extends component {
constructor(props) {
super(props);
this.state = {
mod: null
};
}
unmount = false
componentdidmount = () => {
// 加载组件时，打开全局loading
this.props.dispatch(loading(true))
this.load(this.props)
}
componentwillunmount = () => {
this.unmount = true
}
componentwillreceiveprops(nextprops) {
if (nextprops.load !== this.props.load) {
this.load(nextprops)
}
}
load(props) {
if (this.state.mod) {
return true
}
//注意这里，使用promise对象; mod.default导出默认
props.load().then((mod) => {
if (this.unmount) {
// 离开组件时，不异步执行setstate
this.props.dispatch(loading(false))
return false
}
this.setstate({
mod: mod.default ? mod.default : mod
}, _ => {
// 组件加载完毕，关闭loading
this.props.dispatch(loading(false))
});
});
}
render() {
return this.state.mod ? this.props.children(this.state.mod) : null;
}
}
具体使用
<bundle load={() => import('路径')}>
{comp => {
return comp ? <comp /> : <p>加载中...</p>
}}
</bundle>
2. 全局loading
配合redux，dispatch => reducer更新 => mapstate更新,在根组件进行loading的渲染
详细请见本demo地址 src/routers/router.js——render函数
3. 配置路由对象
项目布局如下
本demo使用的是router4,官方文档演示为单行route（如vue种的router），未有统一配置对象。 管理系统基本围绕着content进行业务开发，构建通用配置有助于开发 构建router.config.js
const routers = [
{
menuname: '主页',
menuico: 'home',
component: 'home/home.js', // 主页
path: '/admin/home' // 主页
},
{
menuname: '用户',
menuico: 'user',
children: [
{
menuname: '用户列表',
component: 'user/list.js', // 主页
path: '/admin/user/list' // 主页
}
]
},
{
menuname: '多级菜单',
menuico: 'setting',
children: [
{
menuname: '多级菜单2',
children: [
{
menuname: '菜单',
component: 'user/list.js', // 主页
path: '/admin/user/list3' // 主页
}
]
}
]
},
{
menuname: '关于我',
menuico: 'smile-o',
component: 'about/about.js', // 主页
path: '/admin/about' // 主页
}
]
实现思路，最外层布局为admin,content被admin包裹，那么可以利用 this.props.children ，把内容打入content中。（利用bundle组件异步加载后塞入组件进行渲染）
<admin>
<content { ...this.props } breadcrumb={this.state.breadcrumb}>
{this.props.children}
</content>
</admin>
// content组件内部
render() {
return (
<p>
{this.props.children}
</p>
)
}
// 本demo实现,详见src/routers/router.js
<route
path="/admin"
render={item => (
<admin {...item} { ...this.props }>
{initrouters.map(el => this.deepitem(el, { ...this.props, ...item}))}
</admin>
)}
/>
4. 配置通用reducer
多人配合开发，一些业务场景的组件需要状提升(不理解状态提升的同学，请科学上网)
import otherreducers from './otherreducers'
const app = combinereducers({
rootreducers,
...otherreducers // 其他需要增加的reducers
})
5. 登陆验证
利用 withrouter 函数，页面进行路由跳转时触发该函数
const newwithrouter = withrouter(props => {
// ....
})
若未登录，则返回
return <redirect to="/login" />
6. 路由拦截
同上，根据路由配置与权限，返回相应的菜单或屏蔽
return <redirect to={其他} />
7 其他配置
7-1. 自定义样式
// 修改webpack.config.dev.js 和 webpack.config-prod.js 配置文件
{
test: /\.(css|less)$/,
// 匹配src的都自动加载css-module
include: [/src/],
exclude: [/theme/],
use: [
require.resolve('style-loader'), {
loader: require.resolve('css-loader'),
options: {
importloaders: 1,
modules: true, // 新增对css modules的支持
localidentname: '[path]_[name][local]_[hash:base64:5]'
}
}, {
loader: require.resolve('postcss-loader'),
options: {
// necessary for external css imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%', 'last 4 versions', 'firefox esr', 'not ie < 9', // react doesn't support ie8 anyway
],
flexbox: 'no-2009'
})
]
}
}, {
loader: require.resolve('less-loader') // compiles less to css
}
]
}, {
// 不匹配node_modules,theme的都不能自动加载css-module
test: /\.(css|less)$/,
include: [/node_modules/,/theme/],
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
importloaders: 1
}
}, {
loader: require.resolve('less-loader') // compiles less to css
}
]
},
使用： 在app.js中直接导入
import './assets/theme/app.less'
7-2. 热更新
步骤一：
// 安装react-hot-loader
npm install --save-dev react-hot-loader
步骤二：
在webpack.config.js 的 entry 值里加上 react-hot-loader/patch
步骤三：
webpackdevserver.config.js中hot设置为true
步骤四： 在webpack.config.dev.js中在babel-loader中plugins加入react-hot-loader/babel
{
test: /\.(js|jsx|mjs)$/,
include: paths.appsrc,
loader: require.resolve('babel-loader'),
options: {
// this is a feature of `babel-loader` for webpack (not babel itself). it
// enables caching results in ./node_modules/.cache/babel-loader/ directory for
// faster rebuilds.
cachedirectory: true,
plugins: [
'react-hot-loader/babel'
]
}
},
步骤五：
重写index.js，app挂载
import { appcontainer } from 'react-hot-loader'
const render = component => {
reactdom.render(
<appcontainer>
<component></component>
</appcontainer>,
document.getelementbyid('root')
)
}
render(app)
if(module.hot) {
module.hot.accept('./app',() => {
render(app);
});
}
7-3. 本地浏览
直接在package.json中 加入
homepage:'.'
后记：使用react与vue的感悟
react是函数式编程，代码难度、学习曲度、装逼指数，社区生态多样性相比vue更高一点。
vue提供了大量的指令降低了开发难度，详细完善的文档，上手更快。
react提供较少的api,相比vue的指令，业务场景的功能需要自己实现，难度更高一点
vue适合中小型项目，单兵、少量人员配合快速开发
react适合大型项目，多人协作
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
如何使用vue实现短信验证性能优化
在vue中使用vue-i18插件实现多语言切换
以上就是如何使用react配合antd组件实现管理系统的详细内容。