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 相关文章推荐
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
vue组件与复用详解
Apr 08 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
一个手写的vue放大镜效果
Aug 09 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下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php共享内存段示例分享
2014/01/20 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
Python的Django框架中的数据过滤功能
2015/07/17 Python
Django的session中对于用户验证的支持
2015/07/23 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
Python实现的质因式分解算法示例
2018/05/03 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
Python numpy数组转置与轴变换
2019/11/15 Python
多个python文件调用logging模块报错误
2020/02/12 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
Python实现播放和录制声音的功能
2020/08/12 Python
java关于string最常出现的面试题整理
2021/01/18 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
在校生党员自我评价
2013/09/25 职场文书
校长就职演讲稿
2014/01/06 职场文书
德劲DE1108畅想
2021/04/22 无线电
Python中的套接字编程是什么?
2021/06/21 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL