专栏首页leon的专栏React router动态加载组件-适配器模式的应用

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

前言

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

一、普通路由例子

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(),并将异步加载的组件,setstate,触发组件重新渲染。

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也是按这种思路去实现的,只不过增加了很多附属的功能点而已。

参考

  1. 基于webpack Code Splitting实现react组件的按需加载
  2. react中使用webpack2的import()异步加载组件的实现

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 移动前端开发和web前端开发的区别

    既然都是前端开发,两者肯定有紧密的联系,移动前端开发和web前端开发其实都属于前端开发的范围,目前前端发展的趋势就是大前端,可以说是包罗万象,当然也就包含PC端...

    用户5827212
  • 聊聊sharding-jdbc的AbstractDataSourceAdapter

    本文主要研究一下sharding-jdbc的AbstractDataSourceAdapter

    codecraft
  • TensorFlow.js:零基础在小程序上实现机器学习

    微信日前官宣小程序支持AR功能。欧莱雅集团旗下阿玛尼美妆的官方微信小程序——“阿玛尼美妆官方精品商城”成为首个支持动态AR试妆的小程序,标志着全新的线上零售体验...

    新智元
  • 游戏数据埋点二三事

    ? 导语:本文宽泛的梳理了游戏产品数据相关的数据埋点内容,包含游戏数据埋点的一些原则和技巧。主要面向刚刚接触游戏数据业务的新人,希望这篇文章能有所帮助。 数据...

    腾讯技术工程官方号
  • 利用thinkphp实现分页

    通常在数据查询后都会对数据集进行分页操作,ThinkPHP也提供了分页类来对数据分页提供支持。分页类目录:/Thinkphp/Library/Org/Bjy/P...

    公众号php_pachong
  • Hello React

      至此,Mac环境下react基于脚手架的开发环境已搭建完成。运行项目( npm start)后,浏览器会自动打开本地页面http://localhost:3...

    流眸
  • vue-cli 脚手架升级踩坑记录

      随vue技术逐渐成熟,开发者们热爱的脚手架vue-cli也一步步升级优化。在体验度不断上升的过程中,也必不可少的要踩一些坑。  本篇主要记录下在vue-cl...

    流眸
  • 每日一个小算法之判断回文数20190811

    判断是不是回文数 判断一个整数是否是回文数。回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数。 示例 1: 输入: 121 输出: true 示例 ...

    凯哥Java
  • 最近学到的前后端分离知识

    前后端分离这个词相信大家都听过,不知道大家是怎么理解的呢。前阵子看项目的时候,有一段实现硬是没看懂,下面来给大家说一下一段愚蠢的经历哈。

    Java3y
  • 开源工作流引擎 Workflow Core 的研究和使用教程

    Workflow Core 中,用于构建工作流的类继承 IWorkflow,代表一条有任务规则的工作流,可以表示工作流任务的开始或者 Do() 方法,或工作流分...

    痴者工良

扫码关注云+社区

领取腾讯云代金券