先放上程序，新建一个components。
import React, { Component,lazy,Suspense } from 'react';
export default class Index extends Component {
constructor(props) {
super(props);
this.state = {
};
}
_renderLazy = ()=>{
let Lazy;
const {component,delay,...other} = this.props;
if(!component || component.constructor.name !=='Promise'){
Lazy = import('./error');
}
Lazy = lazy(()=>{
return new Promise(resolve =>{
setTimeout(()=>{
resolve(component);
},delay||200)
})
})
return <Lazy {...other}/>
}
render() {
return (
<div>
<Suspense fallback={<div>加载中...</div>}>
{this._renderLazy()}
</Suspense>
</div>
)
}
}
使用方法:
image.png
说明
1.源码中，LazyOut传入一个组件，这个可以达到按需引入的目的，默认延迟200ms加载
2.必须传入一个Promise对象，如果组件有错误，会引入并渲染.error的内容。
3.建议将需要懒加载的组件，写成变量的形式，可以懒加载图片，列表，echats等。
4.使用react中的Suspense 和 Lazy
