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 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
js CSS操作方法集合
Oct 31 Javascript
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
stripos函数知识点实例分享
2019/02/11 PHP
DOM精简教程
2006/10/03 Javascript
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
在Django中创建第一个静态视图
2015/07/15 Python
解决python删除文件的权限错误问题
2018/04/24 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
python使用Matplotlib画饼图
2018/09/25 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python调试神器PySnooper的使用
2019/07/03 Python
如何在django中添加日志功能
2020/02/06 Python
Python数组并集交集补集代码实例
2020/02/18 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
CSMA/CD介质访问控制协议
2015/11/17 面试题
同居协议书范本
2014/04/23 职场文书
保护环境建议书400字
2014/05/13 职场文书
森林病虫害防治方案
2014/06/02 职场文书
教师个人学习总结
2015/02/11 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python