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>
)
三：預覽效果
image.png
可以看到有一個警告，內容是
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
