react懒加载-蒲公英云

react懒加载

在这里插入图片描述
新建lazy文件夹和lazy/index.js文件，内容如下

import React from 'react';
const asyncComponent = (importComponent) => {
  return class extends React.Component {
    constructor() {
      super();
      this.state = {
        component: null
      }
    }
    componentDidMount() {
      importComponent()
        .then(cmp => {
          this.setState({ component: cmp.default });
        });
    }
    render() {
      const C = this.state.component;
      return C ? <C {...this.props} /> : null;
    }
  }
};
export default asyncComponent;

route/index.js修改如下

import React from 'react';
import {Switch, Route} from "react-router-dom";
import asyncComponent from '../lazy';
import Home2 from '../pages/Home2';
import OnePage from '../pages/OnePage';
import TwoPage from '../pages/TwoPage';
import This from '../pages/This';
import Mount from '../pages/Mount';
import HooksTest1 from '../hooks/test1';
//import HooksUseState from '../hooks/useState';
const HooksUseState = asyncComponent(() => import ('../hooks/useState'));
const Routers = (
    <Switch>
        <Route path="/" exact component={Home2} />
        <Route path="/onePage" component={OnePage} />
        <Route path="/twoPage/:id" component={TwoPage} />
        <Route path="/this" component={This} />
        <Route path="/mount"  component={Mount} />
        <Route path="/hooksTest1" component={HooksTest1} />
        <Route path="/hooksUseState" component={HooksUseState} />
    </Switch>
);
export default Routers

//import HooksUseState from ‘…/hooks/useState’;
const HooksUseState = asyncComponent(() => import (’…/hooks/useState’));
修改的就是这两行第一行是普通加载方式、改成第二行就是懒加载了，只需要把import asyncComponent from ‘…/lazy’;引入进来就可以用了，其他页面如果需要就这样改就OK了