什么是懒加载?
懒加载顾名思义就是延时加载，即当对象需要用到的时候再去加载。
react中组件的懒加载的4种方法
-
webpack+es6的import（this.props.children为回调函数）
-
webpack+es6的import纯粹的高阶组件
-
webpack+es6的import +async（高阶函数）
-
webpack+require.ensure (高阶组件)
方法一：webpack+es6的import（this.props.children为回调函数）
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);
}
};
};
在路由中使用：
import Load from '../components/lazy';
let Demo2=function(){
return <Load load={()=>import('../components/demo2')}>
{(Com)=><Com/>}
</Load>;
};
方法二：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;
};
};
}
在路由中使用：
import Load from '../components/lazy';
let Demo2=Load(()=>import('../components/demo2'));
方法三：webpack+es6的import +async（高阶函数）
import React , { Component } from 'react'
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;
};
};
}
在路由中使用：
import Load from '../components/lazy';
let Demo2=Load(()=>import('../components/demo2'));
方法四：webpack+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;
};
};
}
在路由中使用：
import Load from '../components/lazy';
let Demo2=Load(()=>require('../components/demo2'));
网友评论