时间:2021-05-26
react-router4如何去实现按需加载Component,在router4以前,我们是使用getComponent的方式来实现按需加载的,router4中,getComponent方法已经被移除,网上有好几种方案大多都解决的不太彻底,下面我说一下我的方案:
一:创建asyncComponent.js
二:在引入asyncComponent.js,并导入需要按需加载的模块
二:render部分
三:预览效果
可以看到有一个警告,内容是
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,如下:
四:完整版asyncComponent.js
五: webpack部分配置需要配置chunkFilename
结尾推广一下我的react-native开源项目:https://github.com/duheng/Mozi
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文使用的React-router版本为2.8.1ReactRouter自己就有一套按需加载解决方案,将代码拆分成多个小包,在浏览过程中实现按需加载;如过你的项
react-router模块化配置因为公司的需要最近踏进了react坑,一直在挖坑填坑,在路由这一块折腾得不行。直接进入主题,配置react-router模块化
简要介绍:在React-router中,暴露了3个接口,如果结合webpack的codesplitting,就通过切换路由实现按需加载。1.webpack的co
使用antd按需加载使用react-app-rewired对create-react-app的默认配置进行自定义1、yarnaddreact-app-rewir
react我自己还在摸索学习中,今天正好学习一下react-router4嵌套路由的使用方法,顺便留着笔记先直接贴代码importReactfrom'react