react-router4怎么實現(xiàn)按需加載

這篇文章給大家分享的是有關(guān)react-router4怎么實現(xiàn)按需加載的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

一：創(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ù)覽效果

可以看到有一個警告，內(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

這個警告其實是在組件卸載的時候執(zhí)行了setState，雖然這個警告并不影響正常使用，但是看著總是不爽，所以我們要在組件卸載的時候結(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',
 },

感謝各位的閱讀！關(guān)于“react-router4怎么實現(xiàn)按需加載”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！