React 高级组件 import() 按需异步加载 asyncComponent

import()方法返回的是一个Promise，Promise的返回值只能通过then()来读取，所以你会发现官方的3种使用场景全都是在then()里面操作。

 

 

 

 

asyncComponent.jsx

import React, { Component } from 'react';
 
const asyncComponent = (importComponent) => {
  return class extends Component {
    constructor() {
      super();
      this.state = {
        component: null
      }
    }
    componentDidMount() {
      importComponent()
        .then(cmp => {
          this.setState({ component: cmp.default });
        });
    }
    render() {
      const C = this.state.component;
      return C ? <C {...this.props} /> : null;
    }
  }
};
 
export default asyncComponent;

 

app.jsx

import React, { Component } from 'react';
// 路由依赖
import { HashRouter, Route, Switch } from 'react-router-dom';
// 异步组件
import AsyncComponent from './asyncComponent.jsx';
// 组件页面
const Home = AsyncComponent(() => import(/* webpackChunkName: "Home" */ './Home/index.jsx'));
const City = AsyncComponent(() => import(/* webpackChunkName: "City" */ './City/index.jsx'));
const Search = AsyncComponent(() => import(/* webpackChunkName: "Search" */ './Search/index.jsx'));
const User = AsyncComponent(() => import(/* webpackChunkName: "User" */ './User/index.jsx'));
const NotFound = AsyncComponent(() => import(/* webpackChunkName: "NotFound" */ './NotFound/index.jsx'));
const Detail = AsyncComponent(() => import(/* webpackChunkName: "Detail" */ './Detail/index.jsx'));
const Login = AsyncComponent(() => import(/* webpackChunkName: "Login" */ './Login/index.jsx'));
// 全局样式
import '@/static/css/common.less';
import '@/static/css/font.css';
 
class App extends Component {
  constructor() {
    super();
  }
  render() {
    return (
      <HashRouter>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/city" component={City} />
          <Route path="/Search/:category/:keyword?" component={Search} />
          <Route path="/User" component={User} />
          <Route path="/Detail/:id" component={Detail} />
          <Route path="/login/:router?" component={Login} />
          <Route path="*" component={NotFound} />
        </Switch>
      </HashRouter>
    );
  }
}
 
export default App;

 

 

 

 

 

 

 

 

 

---

 

 

react按需加载asyncComponent&&react-loadable

 

1.asyncComponent

最简单的情况是，我们只需要异步引入视图(容器)组件，不必考虑reducers和state的更新。
这时候我们可以构造一个asyncComponent 函数：

 

 

    import { asyncComponent } from 'react-async-component';
    
    const AsyncHome = asyncComponent(() => import("./containers/Home"));
    <Route path="/" exact component={AsyncHome} />

 

 

2.react-loadable

当我们用asyncComponent的时候，会希望在加载时显示一些loading组件，有一个简单的插件react-loadable

 

 

    import Loadable from 'react-loadable';
    
    const AsyncHome = Loadable({
      loader:() =>import('./pages').then(module => module.UserList),
      loading: Loading,    //加载进度条
      delay: 300       //默认的延迟是 200ms
    });
    <Route path="/" exact component={AsyncHome} />
    <Route path="/commodity/afterSale" component={AfterSale} exact/>  //exact表示初始化入口路径（默认路径）
    
    //Loading.js加载进度条内容如下：
    import React,{Component} from 'react';
    import {Icon,Spin} from 'antd';
    class Loading extends Component{
      render(){
        const antIcon = <Icon type="loading" style={this.props.style} spin />
        return(
          <div>
            <Spin indicator={antIcon}/>
          </div>
        )
      }
    }
    export default Loading