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ù)覽效果

image.png

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