react-router4按需加载(踩坑填坑)
程序员文章站
2022-07-02 21:43:09
react-router4如何去实现按需加载component,在router4以前,我们是使用getcomponent的方式来实现按需加载的,router4中,getco...
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> )
三:预览效果
可以看到有一个警告,内容是
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: java+mysql模拟实现银行系统