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

跳转后的截图：