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

2,366 阅读4分钟

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

由于最近github实在打不开,只能将源码放在码云上面了点击下载源码