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
};

副作用

　　不清楚是我用的不對，還是其它什么原因，用上面的方法寫的頁面，會在一些非必要的情況下刷新頁面，比如：屏幕縮放。