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 };
副作用
不清楚是我用的不对,还是其它什么原因,用上面的方法写的页面,会在一些非必要的情况下刷新页面,比如:屏幕缩放。