react组件懒加载的四种方式

懒加载 ：为什么？

解决页面假死状态

单页面vue和react,，只有一个HTML,首屏加载慢，后期切换比较快，不利于搜索引擎优化（SU），前端渲染的都不利于

首屏做到500kb才利于用户体验，最大不要超过1兆

##组件的懒加载的4种方法

1、webpack + es6 的 import ( this.props.children 为回调函数 );

2、webpack + es6 的 import 纯粹的高阶组价

3、webpack + es6 的 import +async（高阶函数）

4、webpack + require.ensure (高阶组件)

原理：只有使用到这个组件的时候再去加载

法一

1、webpack + es6 的 import（采用的是this.props.children为回调函数的方式）

lazy.jsx组件中

import React , { Component } from 'react';

export default class  extends Component {

    constructor ( props ) {

        super ( props );

        this.load(props); //调用下面load

        this.state={

            Com:null

        };

    };

    load(props){ //this.props.load()就是调用indexrou.jsx传过来的函数

        props.load().then((Com)=>{

           console.log(Com.default);//得到的就是传过来的函数

            this.setState({

                Com:Com.default?Com.default:null

            });

        });

    };

    render () {

        if(!this.state.Com){

            return null;

        }else{

            return this.props.children(this.state.Com);

        }

    };

};

在router路由里 使用在indexrou.jsx

//组件懒加载：

1、webpack + es6 的 import

{(Com)=><Com/>}就是从这里传的 this.props.children(this.state.Com);

因为不能直接写变量，所以写成()=>import('../components/demo2')

import Load from '../components/lazy';

let Demo2=function(){

    return <Load load={()=>import('../components/demo2')}>

        {(Com)=><Com/>} 

    </Load>;

};

效果：在 Network 的 All 中点击 Demo2 的才会加载，不点不加载

法二

lazy.jsx

2、webpack + es6 的 import 纯粹的高阶组价

import React , { Component } from 'react';

export default function(loading){//传过来一个函数

    return class extends Component {

        constructor ( props ) {

            super ( props );

            this.state={

                Com:null

            };

            this.load();

        };

        load(props){

            loading().then((Com)=>{  //调用函数获取它传过来的路径

                this.setState({

                    Com:Com.default?Com.default:null

                });

            });

        };

        render () {

            let Com=this.state.Com;

            return Com?<Com/>:null;

        };

    };

}

在 router路由里 indexrou.js

import Load from '../components/lazy';

let Demo2=Load(()=>import('../components/demo2'));

法三

lazy.jsx

import React , { Component } from 'react';

3、webpack+es6的import +async（高阶函数）

export default function(loading){

    return class extends Component {

        constructor ( props ) {

            super ( props );

            this.state={

                Com:null

            };

        };
}
        //即使是同步的话执行的也是promise.resolve这个方法，将同步代码包装一层，进行同步

        //await后面接收的是值或promise

        async componentWillMount(){

            let Com=await loading();  //依次执行，只有一个await往下走，Com是有值的

            this.setState({

                Com:Com.default?Com.default:null

            });

        };

        render () {

            let Com=this.state.Com;

            return Com?<Com/>:null;

        };

    };

在router路由里indexrou.jsx

3、webpack+es6的import

import Load from '../components/lazy';

let Demo2=Load(()=>import('../components/demo2'));

法四

lazy.jsx

4、webpack 和 commonjs 的 require.ensure (高阶组价)

import React , { Component } from 'react';

export default function(loading){

    return class extends Component {

        constructor ( props ) {

            super ( props );

            this.state={

                Com:null

            };

        };

        componentWillMount(){

            new Promise((resolve,reject)=>{

                require.ensure([], function(require) {//[]依赖项

                    var c = loading().default;

                    console.log(c);

                    resolve(c);

                });

            }).then((data)=>{

                this.setState({

                    Com:data

                });

            });

        };

        render(){

            let Com=this.state.Com;

            return Com?<Com/>:null;

        };

    };

};

在router路由里indexrou.jsx

4、webpack和commonjs的require.ensure (高阶组价)

import Load from '../components/lazy';

let Demo2=Load(()=>require('../components/demo2'));

(1)

(2)

(3)

(4)