基于webpack4搭建的react项目框架
介绍
框架介绍,使用webpac构建的react单页面应用,集成antd。使用webpack-dev-server启动本地服务,加入热更新便于开发调试。使用bundle-loader进行代码切割懒加载
手动搭建,不使用cli,大量注释适合初学者对webpack的理解学习,对react项目的深入了解
启动
git clone https://gitee.com/wjj0720/react-demo.git
cd react-demo
yarn
yarn start
打包
yarn build
目录结构
+node_modules
-src
+asset
+Layout
+pages
+redux
+utils
+app.js
+index.html
+index.js
.babelrc
package.json
postcss.config.js
webpack.config.js //webpack 配置
bundle-loader 懒加载使用
// webpack.config.js 配置
module: {
rules: [
{
test: /\.bundle\.js$/,
use: {
loader: 'bundle-loader',
options: {
name: '[name]',
lazy: true
}
}
}
]
}
// 页面引入组件
import Home from "bundle-loader?lazy&name=[name]!./Home";
// 组件使用 因为组件懒加载 是通过异步的形式引入 所以不能再页面直接以标签的形式使用 需要做使用封装
import React, {Component} from 'react'
import { withRouter } from 'react-router-dom'
class LazyLoad extends Component {
state = {
LoadOver: null
}
componentWillMount() {
this.props.Loading(c => {
this.setState({
LoadOver: withRouter(c.default)
})
})
}
render() {
let {LoadOver} = this.state;
return (
LoadOver ? <LoadOver/> : <div>加载动画</div>
)
}
}
export default LazyLoad
// 通过封装的懒加载组件过度 增加加载动画
<LazyLoad Loading={Home} />
路由配置
框架按照模块划分,pages文件夹下具有route.js 即为一个模块
// 通过require.context读取模块下路由文件
const files = require.context('./pages', true, /route\.js$/)
let routers = files.keys().reduce((routers, route) => {
let router = files(route).default
return routers.concat(router)
}, [])
// 模块路由文件格式
import User from "bundle-loader?lazy&name=[name]!./User";
export default [
{
path: '/user',
component: User
},
{
path: '/user/:id',
component: User
}
]
redux 使用介绍
// ---------创建 --------
// 为了不免action、reducer 在不同文件 来回切换 对象的形式创建
// createReducer 将书写格式创建成rudex认识的reducer
export function createReducer({state: initState, reducer}) {
return (state = initState, action) => {
return reducer.hasOwnProperty(action.type) ? reducer[action.type](state, action) : state
}
}
// 创建页面级别的store
const User_Info_fetch_Memo = 'User_Info_fetch_Memo'
const store = {
// 初始化数据
state: {
memo: 9,
test: 0
},
action: {
async fetchMemo (params) {
return {
type: User_Info_fetch_Memo,
callAPI: {url: 'http://stage-mapi.yimifudao.com/statistics/cc/kpi', params, config: {}},
payload: params
}
},
...
},
reducer: {
[User_Info_fetch_Memo] (prevState = {}, {payload}) {
console.log('reducer--->',payload)
return {
...prevState,
memo: payload.memo
}
},
...
}
}
export default createReducer(store)
export const action = store.action
// 最终在模块界别组合 [当然模块也有公共的数据(见Home模块下的demo写法)]
import {combineReducers} from 'redux'
import info from './Info/store'
export default combineReducers({
info,
。。。
})
// 最终rudex文件夹下的store.js 会去取所有模块下的store.js 组成一个大的store也就是我们最终仓库
// --------使用------
// 首先在app.js中将store和app关联
import { createStore } from 'redux'
import { Provider } from 'react-redux'
// reducer即我们最终
import reducer from './redux/store.js'
// 用户异步action的中间件
import middleware from './utils/middleware.js'
let store = createStore(reducer, middleware)
<Provider store={store}>
。。。
</Provider>
// 然后组件调用 只需要在组件导出时候 使用connent链接即可
import React, {Component} from 'react'
import {connect} from 'react-redux'
// 从页面级别的store中导出action
import {action} from './store'
class Demo extends Component {
const handle = () => {
// 触发action
this.props.dispatch(action.fetchMemo({}))
}
render () {
console.log(this.props.test)
return <div onClick={this.handle}>ss</div>
}
}
export default connect(state => ({
test: state.user.memo.test
}) )(demo)
关于redux中间件
// 与其说redux中间件不如说action中间件
// 中间件执行时机 即每个action触发之前执行
//
import { applyMiddleware } from 'redux'
import fetchProxy from './fetchProxy';
// 中间件 是三个嵌套的函数 第一个入参为整个store 第二个为store.dispatch 第三个为本次触发的action
// 简单封装的中间件 没有对请求失败做过多处理 目的在与项错误处理机制给到页面处理
const middleware = ({getState}) => next => async action => {
// 此时的aciton还没有被执行
const {type, callAPI, payload} = await action
// 没有异步请求直接返回action
if (!callAPI) return next({type, payload})
// 请求数据
const res = await fetchProxy(callAPI)
// 请求数据失败 提示
if (res.status !== 200) return console.log('网络错误!')
// 请求成功 返回data
return next({type, payload: res.data})
}
export default applyMiddleware(middleware)
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
LC3|视角 开源大数据生态下的高性能分布式文件系统
背景介绍 盘古是阿里云自主研发的高可靠、高可用、高性能分布式文件系统,距今已经有将近10年的历史。盘古1.0作为阿里云的统一存储核心,稳定高效的支撑着阿里云ECS、NAS、OSS、OTS、ODPS、ADS等多条业务线的迅猛发展。但最近几年,基于如下两方面的原因,盘古还是重新设计实现了第二代存储引擎盘古2.0,其不只为阿里云,也为集团、蚂蚁金服的多种业务提供了更佳优异的存储服务 底层硬件的快速发展 最近两三年时间,分布式存储相关硬件的性能爆发式提升 存储介质经历了HDD、SATA SSD及NVME SSD的快速进化,IOPS提高了两个数量级,latency降低了两个数量级,4K顺序写性能低至7us,内存接口的optane存储即将进入ns时代 网络从千兆网、万兆网飞速发展到了25G、40G、50G甚至100G级别。网络一跳的耗时低至5us 底层硬
- 下一篇
SD-WAN的四大错误观念
当任何技术或服务被大量销售时,可能都会出现一些让人担忧或误解的问题。在SD-WAN环境中,供应商在推销IT管理功能时,SD-WAN可能因为过分被吹捧而偏离它最初的作用。 SD-WAN经常被认为广域网定价的救世主。但是,和每项技术一样,在看待SD-WAN的优势时需要理智地思考。 错误观念1:互联网连接是万能药 第一个误解是SD-WAN是一种基于互联网的技术,不能使用其他类型的WAN接口。 人们希望SD-WAN框架可以使用到任何网络连接类型,并具有安全性和流量优先级。然而,SD-WAN的产品开发实际情况并不是这样。 SD-WAN确实可以节约成本,特别是与MPLS等第3层虚拟专用路由网络相比。为了实现成本节约,SD-WAN体系结构使用了因特网连接形式的低成本连接。但随着“互联网低成本”营销的大量增加,IT团队开始相信SD-WAN只支持基于互联网的连接。但是事实上,SD-WAN供应商或提供商可以根据自己的需要定制他们的产品。 然而,当前大多数网络的架构都是基于不同的MPLS组合、虚拟专用局域网服务等。这种混合网络架构可帮助企业将其业务需求与设计正确相结合。 除了节约成本之外,SD-WAN的优势...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7,8上快速安装Gitea,搭建Git服务器
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- CentOS关闭SELinux安全模块
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Red5直播服务器,属于Java语言的直播服务器