本篇文章通过分析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; } } }