手把手教您实现react异步加载高阶组件(2)

可以看到，初始的时候调用init方法启动异步组件的下载，并在_loadModule方法里面接收异步组件的pending结果，待到异步组件下载完毕，重新setState启动render

接下来还有个细节，异步组件并没有直接启动React.createElement去渲染，而是采用opts.render方法，这是因为webpack打包生成的单独异步组件chunk暴露的是一个对象，其default才是对应的组件

实现如下

function resolve(obj) { return obj && obj.__esModule ? obj.default : obj; } function render(loaded, props) { return React.createElement(resolve(loaded), props); }

最后实现全部预加载方法

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 ? obj.default : obj; } function render(loaded, props) { return React.createElement(resolve(loaded), props); } // 创建异步加载高阶组件 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, 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;

到此这篇关于手把手教您实现react异步加载高阶组件的文章就介绍到这了,更多相关react异步加载高阶组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章: