如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力

环境：react 16.11.0

实现组件的懒加载以及加载中状态的处理

//利用Suspense进行组件加载中状态的渲染管理
import React ,{useState,useEffect,Suspense} from 'react';

//需要被按需加载的组件，只有渲染了才会加载
const ComButton = React.lazy(() => import('@/components/comButton'));

class App extends React.Component{
  render(){
    return (
    <div>
      {/*这里用到了Suspense，当ComButton组件加载中的时候，则显示fallback内渲染的内容*/}
      <Suspense fallback={<div>Loading...</div>}>
        <ComButton text="确定" ></ComButton>
      </Suspense>

    </div>
    );
  }
}
export default App;

实现路由页面的懒加载

import React,{Suspense} from 'react';

const PageHome = React.lazy(() => import('@/page/home'));
const PageAbout = React.lazy(() => import('@/page/about'));
const PageHelp = React.lazy(() => import('@/page/help'));


const BasicRoute = () => (
    <HashRouter getUserConfirmation={(message, callback) => {
      // this is the default behavior
      const allowTransition = window.confirm(message);
      callback(allowTransition);
    }}>
        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
              <Route exact path="/" component={PageHome}/>
              <Route exact path="/about" component={PageAbout}/>
              <Route exact path="/help" component={PageHelp}/>
        </Switch>
        </Suspense>
    </HashRouter>
);


export default BasicRoute;

如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力