react配合antd組件實現(xiàn)的管理系統(tǒng)示例代碼

更新時間：2018年04月24日 09:32:00 作者：doudouyoutangtang

這篇文章主要介紹了react配合antd組件實現(xiàn)的管理系統(tǒng)示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言：此文需要有一定react，redux基礎，具體學習資料請科學上網。

使用create-react-app腳手架

具體基礎配置請參考

配合antd組件實現(xiàn)的管理系統(tǒng)demo,線上地址

開發(fā)前反思

1. 按需加載

webpack的 import 動態(tài)加載的模塊的函數(shù)，import(參數(shù))，參數(shù)為模塊地址。

注意： 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) {
       // 離開組件時，不異步執(zhí)行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 /> : <div>加載中...</div>
  }}
 </Bundle>

2. 全局loading

配合redux，dispatch => reducer更新 => mapstate更新,在根組件進行l(wèi)oading的渲染

詳細請見本demo地址 src/routers/router.js——render函數(shù)

3. 配置路由對象

項目布局如下

本demo使用的是router4,官方文檔演示為單行Route（如vue種的router），未有統(tǒng)一配置對象。管理系統(tǒng)基本圍繞著content進行業(yè)務開發(fā)，構建通用配置有助于開發(fā) 構建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' // 主頁
 }
]

實現(xiàn)思路，最外層布局為Admin,content被Admin包裹，那么可以利用 this.props.children ，把內容打入content中。（利用bundle組件異步加載后塞入組件進行渲染）

<Admin>
  <Content { ...this.props } breadcrumb={this.state.breadcrumb}>
    {this.props.children}
  </Content>
</Admin>
// Content組件內部
render() {
  return (
    <div> 
      {this.props.children}
    </div>
  )
}
// 本demo實現(xiàn),詳見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

多人配合開發(fā)，一些業(yè)務場景的組件需要狀提升(不理解狀態(tài)提升的同學，請科學上網)

import otherReducers from './otherReducers'
const App = combineReducers({
  rootReducers,
  ...otherReducers // 其他需要增加的reducers
})

5. 登陸驗證

利用 withRouter 函數(shù)，頁面進行路由跳轉時觸發(fā)該函數(shù)

const newWithRouter = withRouter(props => {
  // ....
})

若未登錄，則返回

return <Redirect to="/login" />

6. 路由攔截

同上，根據(jù)路由配置與權限，返回相應的菜單或屏蔽

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是函數(shù)式編程，代碼難度、學習曲度、裝逼指數(shù)，社區(qū)生態(tài)多樣性相比vue更高一點。

vue提供了大量的指令降低了開發(fā)難度，詳細完善的文檔，上手更快。

react提供較少的api,相比vue的指令，業(yè)務場景的功能需要自己實現(xiàn)，難度更高一點

vue適合中小型項目，單兵、少量人員配合快速開發(fā)

react適合大型項目，多人協(xié)作

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

react
antd

React合成事件原理解析
事件是在編程時系統(tǒng)內發(fā)生的動作或者發(fā)生的事情，而開發(fā)者可以某種方式對事件做出回應，而這里有幾個先決條件，這篇文章主要介紹了React合成事件原理解析,需要的朋友可以參考下
2022-07-07
React 子組件向父組件傳值的方法
本篇文章主要介紹了React 子組件向父組件傳值的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
react 生命周期實例分析
這篇文章主要介紹了react 生命周期,結合實例形式分析了react 生命周期基本原理、操作步驟與注意事項,需要的朋友可以參考下
2020-05-05
簡談創(chuàng)建React Component的幾種方式
這篇文章主要介紹了創(chuàng)建React Component的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下
2019-06-06
在?React?Native?中給第三方庫打補丁的過程解析
這篇文章主要介紹了在?React?Native?中給第三方庫打補丁的過程解析,有時使用了某個React Native 第三方庫，可是它有些問題，我們不得不修改它的源碼，本文介紹如何修改源碼又不會意外丟失修改結果的方法，需要的朋友可以參考下
2022-08-08
詳解React如何優(yōu)雅地根據(jù)prop更新state值
這篇文章主要為大家詳細介紹了React如何優(yōu)雅地實現(xiàn)根據(jù)prop更新state值,文中的示例代碼講解詳細,具有一定的參考價值,感興趣的小伙伴可以了解下
2023-11-11
ReactRouter的實現(xiàn)方法
這篇文章主要介紹了ReactRouter的實現(xiàn),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-01-01
react中的axios模塊你了解嗎
這篇文章主要為大家詳細介紹了react中的axios模塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
React組件三大屬性之state,props,refs
這篇文章主要介紹了React組件三大屬性之state,props,refs,文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-07-07
React18新增特性介紹
react歷次版本迭代主要想解決的是兩類導致網頁卡頓的問題，分別是cpu密集型任務和io密集型任務導致的卡頓問題，react18新增特性就是為了解決上述問題
2022-09-09