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 函数后,在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 就可以看到效果。效果跟以前直接加载组件的一样。
跳转后的截图: