React懒加载/动态加载（Suspense +lazy(））简单实例

两种页面嵌套的方式，一种是父子组件，一种是懒加载

1、原本需要用父子组件来实现页面嵌套，如果嵌套的组件不多，可以直接用visible控制子组件的可见。
2、但是如果无法确定嵌套的是哪个子组件，且子组件又很多的时候，可以使用懒加载

1、父子组件（可略，只用来做例子对比）

父页面

import React,{Component} from "react";
import {Button} from "antd"
import LazyLoadsOne from './LazyLoadsOne' //直接导入子组件
import LazyLoadsTwo from './LazyLoadsTwo'
class LazyLoads extends Component{
    constructor(props){
        super(props);
        this.state = {
            visible:true,
        }
    }

    genghuanZujian=(vis)=>{
        this.setState({visible:!vis})
    }
    render() {
        const {visible} =this.state;
        return(
            <div>
                <h2>这是父组件</h2>
                <Button type="primary" onClick={()=>{this.genghuanZujian(visible)}} >普通更换组件</Button>
                {visible&&<LazyLoadsOne/>}
                {!visible&&<LazyLoadsTwo/>}
            </div>
        )
    }

}
export default LazyLoads;

子页面

import React from "react";
const LazyLoadsOne = ()=>{
    return(
        <div>
            <h2>
                这是子页面One
        </h2>

        </div>
    );

};
export default LazyLoadsOne;

import React from "react";
const LazyLoadsTwo = ()=>{
    return(
        <div>
            <h2>
                这是子页面Two
        </h2>


        </div>
    );

};
export default LazyLoadsTwo;

2、使用懒加载

1、新建一个文件PageUtil.js，用于存放子组件地址

export function getPage(pageCode) {
    switch (pageCode) {
        case 'LazyLoadsOne':
            return React.lazy(()=>import('./LazyLoadsOne'));
        case 'LazyLoadsTwo':
            return React.lazy(()=>import('./LazyLoadsTwo'));
        case 'LazyOne':
            return React.lazy(()=>import('./LazyOne'));
        case 'LazyTwo':
            return React.lazy(()=>import('./LazyTwo'));
        default:
            return null;
    }
}

父页面

import React,{Component,Suspense} from "react";
import {Button,Spin,Form,Input} from "antd"
import {getPage} from './PageUtil'
class OneForm extends Component{
    constructor(props){
        super(props);
        this.state = {}
    }
    lazyGenghuanZujian=(e)=>{
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                let arrs = [11,22,33];
                const pageData = arrs;

                //当使用一个在浏览器中不存在的标签或以小写开头的组件名时，会报"The tag is unrecognized in this browser"React警告。
                //组件名首字母大写是React用来区分我们编写的组件和存在于浏览器中的内置标签的惯例
                const Zujian = getPage(values.note);//获取到工具类的子组件地址
                this.setState({
                    pageContent :<Zujian data={pageData} onRef={e=>this.Zujian = e}/>
                })
            }
        });
    }

    //父调用子的方法
    fuDiaoZi = () =>{
        //使用回调函数作为参数，可以可以直接拿到子组件的结果，然后在父组件的回调里做一些处理
        this.Zujian.fuDiaoZi((res)=>{
            this.Zujian.setState({test:'我没变'})
        })
    }

    render() {
        const {pageContent} = this.state;
        const { getFieldDecorator } = this.props.form;
        return(
            <div>
                <h2>这是父组件</h2>
                <Form onSubmit={this.lazyGenghuanZujian}>
                <Form.Item label="请输入要加载的模块">
                        {getFieldDecorator('note', {
                            rules: [{ required: true, message: 'Please input your note!' }],
                        })(<Input />)}
                </Form.Item>
                <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
                   <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                </Form.Item>
                    <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
                        <Button type="primary" onClick={this.fuDiaoZi}>
                            调用子组件的方法
                        </Button>
                    </Form.Item>
                </Form>
                <Suspense fallback={<Spin/>} >
                    {pageContent}
                </Suspense>
            </div>
        )
    }

}

const LazyLoads = Form.create()(OneForm)
export default LazyLoads;

子组件1

import React from "react"
import {Form} from "antd";
class LazyOne extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            test:'我我我',
        };
    }

    componentDidMount() {
        //使用onRef绑定
        this.props.onRef && this.props.onRef(this)
    }

    fuDiaoZi=(func)=>{
        this.setState({test:'我变了'});
        setTimeout(func,1000)

    }

    render() {
        const {test} = this.state;
        return(
            <div>
                <h2>LazyOne111111</h2>
                <p>
                    {test}
                </p>
            </div>
        )
    }
}
const LazyOnes = Form.create()(LazyOne)
export default LazyOnes;