這次帶給大家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適合大型項目,多人協作
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是react配合antd組件做出後台系統的詳細內容。更多資訊請關注PHP中文網其他相關文章!