站長資訊網(wǎng)
react懶加載是指不會預(yù)加載，而是需要使用某段代碼，某個組件或者某張圖片時才加載；之所以需要懶加載，是因為在首屏同時加載過多的內(nèi)容，會導(dǎo)致卡頓不流暢響應(yīng)速度慢、用戶等待時間過長等問題，對此可以使用懶加載機制來進行優(yōu)化。
本教程操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。
什么是react懶加載？
React懶加載
一、懶加載是什么？為什么需要懶加載？
懶加載：不會預(yù)加載，而是需要使用某段代碼，某個組件或者某張圖片時，才加載他們（延遲加載）
原因：頁面多，內(nèi)容豐富，頁面長，圖片多。在首屏同時加載過多的內(nèi)容，會導(dǎo)致卡頓不流暢響應(yīng)速度慢、用戶等待時間過長等問題。對此我們常用懶加載機制來進行優(yōu)化。
二、使用懶加載
使用React.lazy加載
//OtherComponent.js 文件內(nèi)容 import React from 'react' const OtherComponent = ()=>{ return ( <div> 我已加載 </div> ) } export default OtherComponent // App.js 文件內(nèi)容 import React from 'react'; import './App.css'; //使用React.lazy導(dǎo)入OtherComponent組件 const OtherComponent = React.lazy(() => import('./OtherComponent')); function App() { return ( <div className="App"> <OtherComponent/> </div> ); } export default App;
登錄后復(fù)制
但是這樣頁面會報錯。這個報錯提示我們，在React使用了lazy之后，會存在一個加載中的空檔期，React不知道在這個空檔期中該顯示什么內(nèi)容，所以需要我們指定。接下來就要使用到Suspense加載指示器。
import React, { Suspense, Component } from 'react'; import './App.css'; //使用React.lazy導(dǎo)入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> ) } }
登錄后復(fù)制
推薦學習：《react視頻教程》
