這次帶給大家react antd元件做一個完整的後台(附程式碼),react antd元件做後台的注意事項有哪些,下面就是實戰案例,一起來看一下。
前言:此文需要有一定react,redux基礎,具體學習資料請科學上網。
使用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> import('路径')}> {Comp => { return Comp ? <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.children} </content> </admin> // Content组件内部 render() { return ( <p> {this.props.children} </p> ) } // 本demo实现,详见src/routers/router.js <route> ( <admin> {initRouters.map(el => this.deepItem(el, { ...this.props, ...item}))} </admin> )} /></route>
4. 配置通用reducer
多人配合開發,一些業務場景的元件需要狀提升(不理解狀態提升的同學,請科學上網)
import otherReducers from './otherReducers' const App = combineReducers({ rootReducers, ...otherReducers // 其他需要增加的reducers })
5. 登陸驗證
利用withRouter 函數,頁面進行路由跳轉時觸發該函數
const newWithRouter = withRouter(props => { // .... })
若未登錄,則回傳
return <redirect></redirect>
6. 路由攔截
同上,依照路由配置與權限,傳回對應的選單或屏蔽
return <redirect></redirect>
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 <p style="text-align: left;">使用: 在App.js中直接匯入</p><pre class="brush:php;toolbar:false">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中文網其他相關文章!

在react中,canvas用于绘制各种图表、动画等;可以利用“react-konva”插件使用canvas,该插件是一个canvas第三方库,用于使用React操作canvas绘制复杂的画布图形,并提供了元素的事件机制和拖放操作的支持。

在react中,antd是基于Ant Design的React UI组件库,主要用于研发企业级中后台产品;dva是一个基于redux和“redux-saga”的数据流方案,内置了“react-router”和fetch,可理解为应用框架。

React不是双向数据流,而是单向数据流。单向数据流是指数据在某个节点被改动后,只会影响一个方向上的其他节点;React中的表现就是数据主要通过props从父节点传递到子节点,若父级的某个props改变了,React会重渲染所有子节点。

因为在react中需要利用到webpack,而webpack依赖nodejs;webpack是一个模块打包机,在执行打包压缩的时候是依赖nodejs的,没有nodejs就不能使用webpack,所以react需要使用nodejs。

在react中,forceupdate()用于强制使组件跳过shouldComponentUpdate(),直接调用render(),可以触发组件的正常生命周期方法,语法为“component.forceUpdate(callback)”。

react是组件化开发;组件化是React的核心思想,可以开发出一个个独立可复用的小组件来构造应用,任何的应用都会被抽象成一颗组件树,组件化开发也就是将一个页面拆分成一个个小的功能模块,每个功能完成自己这部分独立功能。

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

react和reactdom的区别是:ReactDom只做和浏览器或DOM相关的操作,例如“ReactDOM.findDOMNode()”操作;而react负责除浏览器和DOM以外的相关操作,ReactDom是React的一部分。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

SublimeText3 Linux新版
SublimeText3 Linux最新版

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

WebStorm Mac版
好用的JavaScript開發工具

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!