本篇文章通过分析react-loadable包的源码，手把手教你实现一个react的异步加载高阶组件
1. 首先我们想象中的react异步加载组件应该如何入参以及暴露哪些API？
// 组件应用
import * as React from 'react';
import ReactDOM from 'react-dom';
import Loadable from '@component/test/Loadable';
import Loading from '@component/test/loading';
const ComponentA = Loadable({
loader: () => import(
/* webpackChunkName: 'componentA' */
'@component/test/componentA.js'),
loading: Loading, //异步组件未加载之前loading组件
delay: 1000, //异步延迟多久再渲染
timeout: 1000, //异步组件加载超时
})
ComponentA.preload(); //预加载异步组件的方式
const ComponentB = Loadable({
loader: () => import(
/* webpackChunkName: 'componentB' */
'@component/test/componentB.js'),
loading: Loading, //异步组件未加载之前loading组件
})
Loadable.preloadAll().then(() => {
//
}).catch(err => {
//
}); //预加载所有的异步组件
const App = (props) => {
const [isDisplay, setIsDisplay] = React.useState(false);
if(isDisplay){
return <React.Fragment>
<ComponentA />
<ComponentB />
</React.Fragment>
}else{
return <input type='button' value='点我' onClick={()=>{setIsDisplay(true)}}/>
}
}
ReactDOM.render(<App />, document.getElementById('app'));
// loading组件
import * as React from 'react';
export default (props) => {
const {error, pastDelay, isLoading, timedOut, retry} = props;
if (props.error) {
return <div>Error! <button onClick={ retry }>Retry</button></div>;
} else if (timedOut) {
return <div>Taking a long time... <button onClick={ retry }>Retry</button></div>;
} else if (props.pastDelay) {
return <div>Loading...</div>;
} else {
return null;
}
}
通过示例可以看到我们需要入参loaded、loading、delay、timeout,同时暴露单个预加载和全部预加载的API,接下来就让我们试着去一步步实现Loadable高阶组件
2.组件实现过程
整个Loaded函数大体如下
// 收集所有需要异步加载的组件 用于预加载
const ALL_INITIALIZERS = [];
function Loadable(opts){
return createLoadableComponent(load, opts);
}
// 静态方法 预加载所有组件
Loadable.preloadAll = function(){
}
接下来实现createLoadableComponent以及load函数
// 预加载单个异步组件
function load(loader){
let promise = loader();
let state = {
loading: true,
loaded: null,
error: null,
}
state.promise = promise.then(loaded => {
state.loading = false;
state.loaded = loaded;
return loaded;
}).catch(err => {
state.loading = false;
state.error = err;
throw err;
})
return state;
}
// 创建异步加载高阶组件
function createLoadableComponent(loadFn, options){
if (!options.loading) {
throw new Error("react-loadable requires a `loading` component");
}
let opts = Object.assign({
loader: null,
loading: null,
delay: 200,
timeout: null,
}, options);
let res = null;
function init(){
if(!res){
res = loadFn(options.loader);
return res.promise;
}
}
ALL_INITIALIZERS.push(init);
return class LoadableComponent extends React{}
}
我们可以看到createLoadableComponent主要功能包括合并默认配置，将异步组件推入预加载数组，并返回LoadableComponent组件;load函数用于加载单个组件并返回该组件的初始加载状态
接着我们实现核心部分LoadableComponent组件
class LoadableComponent extends React.Component{
constructor(props){
super(props);
//组件初始化之前调用init方法下载异步组件
init();
this.state = {
error: res.error,
postDelay: false,
timedOut: false,
loading: res.loading,
loaded: res.loaded
}
this._delay = null;
this._timeout = null;
}
componentWillMount(){
//设置开关保证不多次去重新请求异步组件
this._mounted = true;
this._loadModule();
}
_loadModule(){
if(!res.loading) return;
if(typeof opts.delay === 'number'){
if(opts.delay === 0){
this.setState({pastDelay: true});
}else{
this._delay = setTimeout(()=>{
this.setState({pastDelay: true});
}, opts.delay)
}
}
if(typeof opts.timeout === 'number'){
this._timeout = setTimeout(()=>{
this.setState({timedOut: true});
}, opts.timeout)
}
let update = () => {
if(!this._mounted) return;
this.setState({
error: res.error,
loaded: res.loaded,
loading: res.loading,
});
}
// 接收异步组件的下载结果并重新setState来render
res.promise.then(()=>{
update()
}).catch(err => {
update()
})
}
// 重新加载异步组件
retry(){
this.setState({
error: null,
timedOut: false,
loading: false,
});
res = loadFn(opts.loader);
this._loadModule();
}
// 静态方法 单个组件预加载
static preload(){
init()
}
componentWillUnmount(){
this._mounted = false;
clearTimeout(this._delay);
clearTimeout(this._timeout);
}
render(){
const {loading, error, pastDelay, timedOut, loaded} = this.state;
if(loading || error){
//异步组件还未下载完成的时候渲染loading组件
return React.createElement(opts.loading, {
isLoading: loading,
pastDelay: pastDelay,
timedOut: timedOut,
error: error,
retry: this.retry.bind(this),
})
}else if(loaded){
// 为何此处不直接用React.createElement？
return opts.render(loaded, this.props);
}else{
return null;
}
}
}
可以看到，初始的时候调用init方法启动异步组件的下载，并在_loadModule方法里面接收异步组件的pending结果，待到异步组件下载完毕，重新setState启动render
接下来还有个细节，异步组件并没有直接启动React.createElement去渲染，而是采用opts.render方法，这是因为webpack打包生成的单独异步组件chunk暴露的是一个对象，其default才是对应的组件
实现如下
function resolve(obj) {
return obj && obj.__esModule "htmlcode">
Loadable.preloadAll = function(){
let promises = [];
while(initializers.length){
const init = initializers.pop();
promises.push(init())
}
return Promise.all(promises);
}
整个代码实现如下
const React = require("react");
// 收集所有需要异步加载的组件
const ALL_INITIALIZERS = [];
// 预加载单个异步组件
function load(loader){
let promise = loader();
let state = {
loading: true,
loaded: null,
error: null,
}
state.promise = promise.then(loaded => {
state.loading = false;
state.loaded = loaded;
return loaded;
}).catch(err => {
state.loading = false;
state.error = err;
throw err;
})
return state;
}
function resolve(obj) {
return obj && obj.__esModule "react-loadable requires a `loading` component");
}
let opts = Object.assign({
loader: null,
loading: null,
delay: 200,
timeout: null,
render,
}, options);
let res = null;
function init(){
if(!res){
res = loadFn(options.loader);
return res.promise;
}
}
ALL_INITIALIZERS.push(init);
class LoadableComponent extends React.Component{
constructor(props){
super(props);
init();
this.state = {
error: res.error,
postDelay: false,
timedOut: false,
loading: res.loading,
loaded: res.loaded
}
this._delay = null;
this._timeout = null;
}
componentWillMount(){
this._mounted = true;
this._loadModule();
}
_loadModule(){
if(!res.loading) return;
if(typeof opts.delay === 'number'){
if(opts.delay === 0){
this.setState({pastDelay: true});
}else{
this._delay = setTimeout(()=>{
this.setState({pastDelay: true});
}, opts.delay)
}
}
if(typeof opts.timeout === 'number'){
this._timeout = setTimeout(()=>{
this.setState({timedOut: true});
}, opts.timeout)
}
let update = () => {
if(!this._mounted) return;
this.setState({
error: res.error,
loaded: res.loaded,
loading: res.loading,
});
}
res.promise.then(()=>{
update()
}).catch(err => {
update()
})
}
// 重新加载异步组件
retry(){
this.setState({
error: null,
timedOut: false,
loading: false,
});
res = loadFn(opts.loader);
this._loadModule();
}
static preload(){
init()
}
componentWillUnmount(){
this._mounted = false;
clearTimeout(this._delay);
clearTimeout(this._timeout);
}
render(){
const {loading, error, pastDelay, timedOut, loaded} = this.state;
if(loading || error){
return React.createElement(opts.loading, {
isLoading: loading,
pastDelay: pastDelay,
timedOut: timedOut,
error: error,
retry: this.retry.bind(this),
})
}else if(loaded){
return opts.render(loaded, this.props);
}else{
return null;
}
}
}
return LoadableComponent;
}
function Loadable(opts){
return createLoadableComponent(load, opts);
}
function flushInitializers(initializers){
}
Loadable.preloadAll = function(){
let promises = [];
while(initializers.length){
const init = initializers.pop();
promises.push(init())
}
return Promise.all(promises);
}
export default Loadable;