react-router4按需加载(踩坑填坑)


Posted in Javascript onJanuary 06, 2019

react-router4如何去实现按需加载Component,在router4以前,我们是使用getComponent的方式来实现按需加载的,router4中,getComponent方法已经被移除,网上有好几种方案大多都解决的不太彻底,下面我说一下我的方案:

一:创建asyncComponent.js

import React, { Component } from "react";

export default function asyncComponent(importComponent) {
 class AsyncComponent extends Component {
 constructor(props) {
  super(props);

  this.state = {
  component: null
  };
 }

 async componentDidMount() {
  if(this.hasLoadedComponent()){
   return;
  }
  const { default: component } = await importComponent();
  this.setState({
  component: component
  });
 }

 hasLoadedComponent() {
  return this.state.component !== null;
 }
 
 render() {
  const C = this.state.component;

  return C ? <C {...this.props} /> : null;
 }
 }

 return AsyncComponent;
}

二:在引入asyncComponent.js,并导入需要按需加载的模块

import asyncComponent from "utils/asyncComponent"

 const Home = asyncComponent(() => import("./home"))
 const About = asyncComponent(() => import("./about"))

二:render部分

const routes = () => (
 <BrowserRouter>
  <Switch>
   <Route exact path="/" component={Home} />
   <Route exact path="/about" component={About} />
   <Redirect to="/" />
  </Switch>
 </BrowserRouter>
)

三:预览效果

react-router4按需加载(踩坑填坑)

可以看到有一个警告,内容是

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method

这个警告其实是在组件卸载的时候执行了setState,虽然这个警告并不影响正常使用,但是看着总是不爽,所以我们要在组件卸载的时候结束setState,如下:

componentWillUnmount(){
 this.setState = (state,callback)=>{
  return
  }
}

四:完整版asyncComponent.js

import React, { Component } from "react";

export default function asyncComponent(importComponent) {
 class AsyncComponent extends Component {
 constructor(props) {
  super(props);

  this.state = {
  component: null
  };
 }

 async componentDidMount() {
  if(this.hasLoadedComponent()){
   return;
  }
  const { default: component } = await importComponent();
  this.setState({
  component: component
  });
 }

 hasLoadedComponent() {
  return this.state.component !== null;
 }
 componentWillUnmount(){
  this.setState = (state,callback)=>{
  return
  }
 }

 render() {
  const C = this.state.component;

  return C ? <C {...this.props} /> : null;
 }
 }

 return AsyncComponent;
}

五: webpack部分配置需要配置chunkFilename

eturn {
 output: {
  path: path.resolve(CWD, config.build),
  publicPath: config.static[process.env.MODE],
  chunkFilename: 'js/[name]-[chunkhash:8].js',
  filename: 'js/[name].js',
 },

结尾推广一下我的react-native开源项目:https://github.com/duheng/Mozi

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
jquery append与appendTo方法比较
May 24 jQuery
VSCode搭建React Native环境
May 07 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 Javascript
React 实现拖拽功能的示例代码
Jan 06 #Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 #Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 #Javascript
Bootstrap4 gulp 配置详解
Jan 06 #Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 #jQuery
node.js连接mysql与基本用法示例
Jan 05 #Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 #Javascript
You might like
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php session安全问题分析
2011/06/24 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
Gird事件机制初级读本
2007/03/10 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
JS实现简易计算器
2020/02/14 Javascript
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
应届生程序员求职信
2013/11/05 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
课题研究阶段性总结
2015/08/13 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python