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


Posted in Javascript onApril 07, 2020

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

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

Javascript 相关文章推荐
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
AngularJS实现路由实例
Feb 12 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
vue 虚拟DOM的原理
Oct 03 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 Javascript
javascript绘制简单钟表效果
Apr 07 #Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 #Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 #jQuery
js实现登录时记住密码的方法分析
Apr 05 #Javascript
Vue插件之滑动验证码用法详解
Apr 05 #Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 #Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 #jQuery
You might like
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
PHP经典的给图片加水印程序
2006/12/06 PHP
快速开发一个PHP扩展图文教程
2008/12/12 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
django加载本地html的方法
2018/05/27 Python
python八皇后问题的解决方法
2018/09/27 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
Python连接mysql方法及常用参数
2020/09/01 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
交通安全寄语大全
2014/04/08 职场文书
经济国贸专业求职信
2014/06/18 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
房屋所有权证明
2015/06/19 职场文书
客户答谢会致辞
2015/07/30 职场文书
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python