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 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
JS一次前端面试经历记录
Mar 19 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递归创建多级目录
2015/11/05 PHP
PHP序列化操作方法分析
2016/09/28 PHP
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
javascript 闭包详解
2015/07/02 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
Python中多线程thread与threading的实现方法
2014/08/18 Python
python 连接sqlite及简单操作
2017/06/30 Python
django定期执行任务(实例讲解)
2017/11/03 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
html5调用摄像头实例代码
2021/06/28 HTML / CSS
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
Python+pyaudio实现音频控制示例详解
2022/07/23 Python