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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
