[JavaScript知识库]React 懒加载

方式一：封装工具组件

import React, { Component } from 'react';

function Asynccom(fn){
    return class Asy extends Component {
        constructor(props){
            super(props);
            this.state = {
                Component:null
            }
        }
        componentDidMount(){
            fn().then(res=>{
                this.setState({ Component:res.default})
            })
        }
        render(){
            let {Component} = this.state ;
            return (
                Component ? <Component {...this.props}></Component>:null
            )
        }
    }
}

export default Asynccom ;

组件中使用

//引入懒加载模块
import Asyncom from "../utile/Asyncom"
let Cart = Asynccom(() => import('../view/Cart')

方式二? 安装库

//  npm i --save-dev react-loadable

import LoadAble from 'react-loadable'

function loading() {

     return (
        <div>正在加载。。。</div>
        )
    }

let Cart = LoadAble({
    loader:() => import('../view/Cart'),
    loading:loading
    )}