朝阳凌源网站建设,北大青鸟培训机构官网,重庆大渡口网站建设解决方案,软件开发涵盖网站开发吗react lazyLoad学习记录1.lazyLoad用处2.使用2.1 react-router-dom5版本写法2.2 react-router-dom6版本写法1.lazyLoad用处
默认例如首页#xff0c;如果有好十几个甚至百个路由#xff0c;react是会默认一下全部把路由组件一下全部加载的#xff0c;极可能造成页面卡顿。r…
react lazyLoad学习记录1.lazyLoad用处2.使用2.1 react-router-dom5版本写法2.2 react-router-dom6版本写法1.lazyLoad用处
默认例如首页如果有好十几个甚至百个路由react是会默认一下全部把路由组件一下全部加载的极可能造成页面卡顿。react lazyLoad就可以解决这个问题。
2.使用
我用的react版本是18,注意在主index.js中React.StrictMode要去掉不然会出现路由变化了控制台也不报错但是页面不跳转的问题.
2.1 react-router-dom5版本写法
import React, { Component,lazy,Suspense} from react
import {NavLink,Route} from react-router-domimport Loading from ./Loading
const Home lazy(() import(./Home) )
const About lazy(() import(./About))export default class Demo extends Component {render() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8div classNamepage-headerh2React Router Demo/h2/div/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-group{/* 在React中靠路由链接实现切换组件--编写路由链接 */}NavLink classNamelist-group-item to/aboutAbout/NavLinkNavLink classNamelist-group-item to/homeHome/NavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-body{/* fallback可以写一个组件,但是这个组件就不能懒加载了本来的作用就是如果网络等原因导致页面空白的话就用组件来替代 */}Suspense fallback{Loading/}{/* 注册路由 */}Route path/about component{About}/Route path/home component{Home}//Suspense/div/div/div/div/div)}
}
2.2 react-router-dom6版本写法
主要是引入和Suspense的改变
import React, { Component, lazy, Suspense } from react;
import { NavLink, Route,Routes } from react-router-dom;import Loading from ./Loading;
const Home lazy(() import(./Home));
const About lazy(() import(./About));export default class Demo extends Component {render() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8div classNamepage-headerh2React Router Demo/h2/div/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-group{/* 在React中靠路由链接实现切换组件--编写路由链接 */}NavLink classNamelist-group-item to/aboutAbout/NavLinkNavLink classNamelist-group-item to/homeHome/NavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-body{/* fallback可以写一个组件,但是这个组件就不能懒加载了本来的作用就是如果网络等原因导致页面空白的话就用组件来替代 */}Suspense fallback{Loading /}{/* 注册路由 */}RoutesRoute path/about element{About/} /Route path/home element{Home/} //Routes/Suspense/div/div/div/div/div);}
}
需要注意的是lazyLoad只有在第一次请求那个路由组件才会去调用资源请求第二次就不会再去调用的了有缓存。
