react-router4怎么实现按需加载

这篇文章给大家分享的是有关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怎么实现按需加载”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！