React 中的 suspense 、lazy 。异步加载页面，和遇到的问题。

React 中平时一般引入组件都是：

import Demo from "../pages/Demo/Demo";

　　注意：import ... 一定要写在文件的最上方，不然会报错

我们也可以使用 React.lazy 提供的懒加载方法动态加载组件，例如：

import React, { lazy, Suspense } from 'react';

const MyEcharts = lazy(() => import("../pages/Demo/compontent/MyEcharts"));

给加载完成之前，加一个加载中的动画：

　　有了懒加载 React.lazy，如果需要再来一个加载中的动画，就要用到 Suspense 。

　　Suspense 组件的 fallback 方法用于组件没有加载完成时页面的显示，可以更好的交互。

<React.Suspense fallback={'加载中'}>
    <OtherComponent />
</React.Suspense>

举个完整的 router.js 例子：

import React, { lazy, Suspense } from 'react';
import { Route, Switch } from "react-router-dom";
// import Demo from "../pages/Demo/Demo";
const Demo = lazy(() => import("../pages/Demo/Demo"));
// import CssIndex from "../pages/CSSAbout/CssIndex";
const CssIndex = lazy(() => import("../pages/CSSAbout/CssIndex"));
// import MyEcharts from "../pages/Demo/compontent/MyEcharts";
const MyEcharts = lazy(() => import("../pages/Demo/compontent/MyEcharts"));
// import loading from "../assets/imgs/日历1.png";
const loading = require("../assets/imgs/loading.png");

let routerData = [
  {
    path:'/',
    component: CssIndex
  },
  {
    path:'/CssIndex',
    component: CssIndex
  },
  {
    path:'/MyDatePicker',
    component: Demo
  },
  {
    path:'/MyEcharts',
    component: MyEcharts
  }
];

function SubRoute() {
  return (
      <Switch>
      {
        routerData.map((e,i)=>{
          return <Route exact path={e.path} component={WaitingCompontent(e.component)} key={i}/>
        })
      }
      </Switch>
  )
}

function WaitingCompontent(WarpComponent) {
  return props => {
    return (
      <Suspense fallback={<img src={loading} alt="" className="page-loading" />}>
        <WarpComponent {...props} />
      </Suspense>
    )
  }
}

export {
  SubRoute,
  routerData
};

副作用

　　不清楚是我用的不对，还是其它什么原因，用上面的方法写的页面，会在一些非必要的情况下刷新页面，比如：屏幕缩放。