所属分类：web前端开发
react懒加载是指不会预加载，而是需要使用某段代码，某个组件或者某张图片时才加载；之所以需要懒加载，是因为在首屏同时加载过多的内容，会导致卡顿不流畅响应速度慢、用户等待时间过长等问题，对此可以使用懒加载机制来进行优化。
本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。
什么是react懒加载？
React懒加载
一、懒加载是什么？为什么需要懒加载？
懒加载：不会预加载，而是需要使用某段代码，某个组件或者某张图片时，才加载他们（延迟加载）
原因：页面多，内容丰富，页面长，图片多。在首屏同时加载过多的内容，会导致卡顿不流畅响应速度慢、用户等待时间过长等问题。对此我们常用懒加载机制来进行优化。
二、使用懒加载
使用React.lazy加载
微博登录
QQ登录//OtherComponent.js 文件内容
import React from 'react'
const OtherComponent = ()=>{
return (
<div>
我已加载
</div>
)
}
export default OtherComponent
// App.js 文件内容
import React from 'react';
import './App.css';
//使用React.lazy导入OtherComponent组件
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function App() {
return (
<div className="App">
<OtherComponent/>
</div>
);
}
export default App;登录后复制但是这样页面会报错。这个报错提示我们，在React使用了lazy之后，会存在一个加载中的空档期，React不知道在这个空档期中该显示什么内容，所以需要我们指定。接下来就要使用到Suspense加载指示器。
import React, { Suspense, Component } from 'react';
import './App.css';
//使用React.lazy导入OtherComponent组件
const OtherComponent = React.lazy(() => import('./OtherComponent'));
export default class App extends Component {
state = {
visible: false
}
render() {
return (
<div className="App">
<button onClick={() => {
this.setState({ visible: true })
}}>
</button>
加载OtherComponent组件
<Suspense fallback={<div>Loading...</div>}>
{
this.state.visible
?
<OtherComponent />
:
null
}
</Suspense>
</div>
)
}
}登录后复制推荐学习：《react视频教程》
以上就是什么是react懒加载的详细内容，更多请关注zzsucai.com其它相关文章！
