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 相关文章推荐
CSS和Javascript简单复习资料
Jun 29 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
原生js简单实现放大镜特效
May 16 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
vue element table中自定义一些input的验证操作
Jul 18 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
php xml 入门学习资料
2011/01/01 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
python邮件发送smtplib使用详解
2020/06/16 Python
Django之路由层的实现
2019/09/09 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
四年级语文教学反思
2014/02/05 职场文书
仓库主管岗位职责
2014/03/02 职场文书
运动会加油稿20字
2014/11/15 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
在校生证明
2015/06/17 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
为Java项目添加Redis缓存的方法
2021/05/18 Redis
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
JS封装cavans多种滤镜组件
2022/02/15 Javascript
Nginx的gzip相关介绍
2022/05/11 Servers