reactlazyLoad加载使用详解
短信预约 -IT技能 免费直播动态提醒
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-dom'
import Loading from './Loading'
const Home = lazy(()=> import('./Home') )
const About = lazy(()=> import('./About'))
export default class Demo extends Component {
render() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>React Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{}
<NavLink className="list-group-item" to="/about">About</NavLink>
<NavLink className="list-group-item" to="/home">Home</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{}
<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 (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header">
<h2>React Router Demo</h2>
</div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{}
<NavLink className="list-group-item" to="/about">
About
</NavLink>
<NavLink className="list-group-item" to="/home">
Home
</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{}
<Suspense fallback={<Loading />}>
{}
<Routes>
<Route path="/about" element={<About/>} />
<Route path="/home" element={<Home/>} />
</Routes>
</Suspense>
</div>
</div>
</div>
</div>
</div>
);
}
}
需要注意的是，lazyLoad只有在第一次请求那个路由组件才会去调用资源请求，第二次就不会再去调用的了，有缓存。
到此这篇关于react lazyLoad加载使用详解的文章就介绍到这了,更多相关react lazyLoad内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
