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

副作用

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

 

 

 

posted @ 2020-03-11 16:49  真的想不出来  阅读(2429)  评论(0编辑  收藏  举报