react-router4如何去實(shí)現(xiàn)按需加載Component统刮，在router4以前紊遵，我們是使用getComponent的方式來實(shí)現(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ù)覽效果
可以看到有一個(gè)警告鞭衩，內(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
這個(gè)警告其實(shí)是在組件卸載的時(shí)候執(zhí)行了setState学搜，雖然這個(gè)警告并不影響正常使用娃善，但是看著總是不爽，所以我們要在組件卸載的時(shí)候結(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開源項(xiàng)目：
https://github.com/duheng/Mozi
