react-router4按需加載(踩坑填坑)
react-router4如何去實現(xiàn)按需加載Component,在router4以前,我們是使用getComponent的方式來實現(xiàn)按需加載的,router4中,getComponent方法已經(jīng)被移除,網(wǎng)上有好幾種方案大多都解決的不太徹底,下面我說一下我的方案:
一:創(chuàng)建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,并導(dǎo)入需要按需加載的模塊
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> )
三:預(yù)覽效果
可以看到有一個警告,內(nèi)容是
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
這個警告其實是在組件卸載的時候執(zhí)行了setState,雖然這個警告并不影響正常使用,但是看著總是不爽,所以我們要在組件卸載的時候結(jié)束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', },
結(jié)尾推廣一下我的react-native開源項目:https://github.com/duheng/Mozi
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解React中傳入組件的props改變時更新組件的幾種實現(xiàn)方法
這篇文章主要介紹了詳解React中傳入組件的props改變時更新組件的幾種實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09使用React Native創(chuàng)建以太坊錢包實現(xiàn)轉(zhuǎn)賬等功能
這篇文章主要介紹了使用React Native創(chuàng)建以太坊錢包,實現(xiàn)轉(zhuǎn)賬等功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07React?程序設(shè)計簡單的輕量級自動完成搜索框應(yīng)用
這篇文章主要為大家介紹了React?程序設(shè)計簡單的輕量級自動完成搜索框應(yīng)用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10React Native設(shè)備信息查看調(diào)試詳解
這篇文章主要為大家介紹了React Native設(shè)備信息查看調(diào)試詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11