介绍
框架介绍，使用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";
// 组件使用 因为组件懒加载 是通过异步的形式引入 所以不能再页面直接以标签的形式使用 需要做使用封装
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 "htmlcode">
// 通过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";
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) "htmlcode">
// 与其说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)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。