这篇文章给大家分享的是有关react-router4怎么实现按需加载的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
一：创建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-router4怎么实现按需加载”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
