React router动态加载组件之适配器模式的应用详解


Posted in Javascript onSeptember 12, 2018

前言

本文讲述怎么实现动态加载组件,并借此阐述适配器模式。

一、普通路由例子

import Center from 'page/center';
import Data from 'page/data';

function App(){
 return (
  <Router>
   <Switch>
   <Route exact path="/" render={() => (<Redirect to="/center" />)} />
   <Route path="/data" component={Data} />
   <Route path="/center" component={Center} />
   <Route render={() => <h1 style={{ textAlign: 'center', marginTop: '160px', color:'rgba(255, 255, 255, 0.7)' }}>页面不见了</h1>} />
   </Switch>
  </Router>
 );
}

以上是最常见的React router。在简单的单页应用中,这样写是ok的。因为打包后的单一js文件bundle.js也不过200k左右,gzip之后,对加载性能并没有太大的影响。

 但是,当产品经历多次迭代后,追加的页面导致bundle.js的体积不断变大。这时候,优化就变得很有必要。

二、如何优化

优化使用到的一个重要理念就是——按需加载。

可以结合例子进行理解为:只加载当前页面需要用到的组件。

比如当前访问的是/center页,那么只需要加载Center组件即可。不需要加载Data组件。

业界目前实现的方案有以下几种:

•react-router的动态路由getComponent方法(router4已不支持)
•使用react-loadable小工具库
•自定义高阶组件进行按需加载

而这些方案共通的点,就是利用webpack的code splitting功能(webpack1使用require.ensure,webpack2/webpack3使用import),将代码进行分割。

接下来,将介绍如何用自定义高阶组件实现按需加载。

三、自定义高阶组件

3.1 webpack的import方法

webpack将import()看做一个分割点并将其请求的module打包为一个独立的chunk。import()以模块名称作为参数名并且返回一个Promise对象。

因为import()返回的是Promise对象,所以不能直接给<Router/>使用。

3.2 采用适配器模式封装import()

适配器模式(Adapter):将一个类的接口转换成客户希望的另外一个接口。Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。

当前场景,需要解决的是,使用import()异步加载组件后,如何将加载的组件交给React进行更新。
 方法也很容易,就是利用state。当异步加载好组件后,调用setState方法,就可以通知到。
 那么,依照这个思路,新建个高阶组件,运用适配器模式,来对import()进行封装。

3.3 实现异步加载方法asyncComponent

import React from 'react';
export const asyncComponent = loadComponent => (
 class AsyncComponent extends React.Component {
  constructor(...args){
   super(...args);
   this.state = {
    Component: null,
   };
   this.hasLoadedComponent = this.hasLoadedComponent.bind(this);
  }
  componentWillMount() {
   if(this.hasLoadedComponent()){
    return;
   }
   loadComponent()
    .then(module => module.default ? module.default : module)
    .then(Component => {
     this.setState({
      Component
     });
    })
    .catch(error => {
     /*eslint-disable*/
     console.error('cannot load Component in <AsyncComponent>');
     /*eslint-enable*/
     throw error;
    })
  }
  hasLoadedComponent() {
   return this.state.Component !== null;
  }
  render(){
   const {
    Component
   } = this.state;
   return (Component) ? <Component {...this.props} /> : null;
  }
 }
);
// 使用方式
const Center = asyncComponent(()=>import(/* webpackChunkName: 'pageCenter' */'page/center'));

如例子所示,新建一个asyncComponent方法,用于接收import()返回的Promise对象。

当componentWillMount时(服务端渲染也有该生命周期方法),执行import(),并将异步加载的组件,set入state,触发组件重新渲染。

3.4 释疑

•state.Component初始化

this.state = {
 Component: null,
};

这里的null,主要用于判断异步组件是否已经加载。

•module.default ? module.default : module

这里是为了兼容具名和default两种export写法。

•return (Component) ? <Component {...this.props} /> : null;

这里的null,其实可以用<LoadingComponent />代替。作用是:当异步组件还没加载好时,起到占位的作用。
this.props是通过AsyncComponent组件透传给异步组件的。

3.5 修改webpack构建

output: {
 path: config.build.assetsRoot,
 filename: utils.assetsPath('js/[name].[chunkhash].js'),
 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

在输出项中,增加chunkFilename即可。

四、小结

自定义高阶组件的好处,是可以按最少的改动,来优化已有的旧项目。

像上面的例子,只需要改变import组件的方式即可。花最少的代价,就可以得到页面性能的提升。

 其实,react-loadable也是按这种思路去实现的,只不过增加了很多附属的功能点而已。

以上所述是小编给大家介绍的React router动态加载组件之适配器模式的应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
微信小程序实现tab左右切换效果
Nov 15 #Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 #Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 #Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 #Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 #Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 #Javascript
js监听html页面的上下滚动事件方法
Sep 11 #Javascript
You might like
如何选购合适的收音机
2021/03/01 无线电
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
js模糊查询实例分享
2016/12/26 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
vue实现购物车的监听
2020/04/20 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
python端口扫描系统实现方法
2014/11/19 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python中异常重试的解决方案详解
2017/05/05 Python
python使用thrift教程的方法示例
2019/03/21 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
python实现QQ批量登录功能
2019/06/19 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
python中有关时间日期格式转换问题
2019/12/25 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
Foreo国际站:Foreo International
2018/10/29 全球购物
园林毕业生自我鉴定范文
2013/12/29 职场文书
单位创先争优活动方案
2014/01/26 职场文书
大学军训感言1500字
2014/03/09 职场文书
幸福中国演讲稿
2014/09/12 职场文书
婚姻出轨保证书
2015/05/08 职场文书
被委托人身份证明
2015/08/07 职场文书
java开发双人五子棋游戏
2022/05/06 Java/Android