React+webpack 的开发环境配置步骤（五）

React+webpack 的开发环境配置步骤（五）

项目包github库的地址为：https://github.com/BokeChen/webpackReact.git

目录

五、React 的异步

1.React组件按需加载

2.React异步通信

前面讲redux和router的时候并未涉及到组件按需加载及异步通信，在这继续补上。下面所讲的内容都是在上面git包的基础上做更改。

1. React组件按需加载(备注：如果用于移动端app，不要用按需要加载，按需加载有可能会造成手机端闪屏效果)

需要用node.js 安装支持import() 函数的模块:

npm install  babel-plugin-syntax-dynamic-import --save-dev

在.babelrc 文件里面引入syntax-dynamic-import 插件

{
"presets": ["es2015","stage-3","react"],
"plugins": ["syntax-dynamic-import"]
}

在component下增加一个common的文件夹并在其下面添加一个getComponent.jsx ，getcomponent.jsx 定义一个函数用于获取组件。

import React, { Component } from 'react';

class Bundle extends Component {
constructor (...args){
super(...args);
this.state = {
abc:"abc",
mod: null
};
}
componentWillMount() {
this.load(this.props)
}

componentWillReceiveProps(nextProps) {
if (nextProps.load !== this.props.load) {
this.load(nextProps)
}
}

load(props) {
this.setState({
mod: null
})
props.load().then((mod) => {
this.setState({
// handle both es imports and cjs
mod: mod ? mod.default : mod
})
}).catch(err => console.log('Failed to load module', err));
}

render() {
if (!this.state.mod) return false;
return this.props.children(this.state.mod, this.props);
}
}

export default function getComponent(props, ComponentFunc) {
return (
<Bundle load={ComponentFunc} {...props}>
{(Module, props) => <Module {...props}/>}
</Bundle>
)
}

定义好getComponent
4000
函数后，在Config下的Route.jsx 引入该函数，并修改相关的组件加载语句。

import React from 'react';
import ReactDOM from 'react-dom';
import {NavLink,Route,BrowserRouter as Router,HashRouter,Switch,Redirect}  from 'react-router-dom';

import MainComponent from '../../component/Main.jsx';
import getComponent from '../../component/common/getComponent.jsx';

const routes =[
{
path:'/',
exact:true,
component: MainComponent
},
{
path:'/topic',
exact:false,
component: (props) => getComponent(props, ()=> import('../../component/Topic.jsx'))
},
];

const RouteConfig = (
<Switch>
{
routes.map((route,index)=>(
<Route
key ={index}
path={route.path}
exact={route.exact}
component={route.component}
/>
))
}

</Switch>
);

export default RouteConfig;

在项目文件夹根目录下按shift+右键调出指令窗口，敲npm start。在浏览器地址栏敲localhost:8080 就可以看到效果。效果跟以前直接加载组件的一样。



跳转后的截图：