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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
javascript实现异形滚动轮播
Nov 28 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三元运算符的结合性介绍
2012/01/10 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
javascript 得到变量类型的函数
2010/05/19 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
python基础教程之常用运算符
2014/08/29 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
python主线程捕获子线程的方法
2018/06/17 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
python中re模块知识点总结
2021/01/17 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
.net面试题
2015/12/22 面试题
工作态度检讨书
2014/02/11 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
团日活动总结模板
2014/06/25 职场文书
美术社团活动总结
2014/06/27 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
2019入党申请书格式
2019/06/25 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python