站長(zhǎng)資訊網(wǎng)
react懶加載是指不會(huì)預(yù)加載，而是需要使用某段代碼，某個(gè)組件或者某張圖片時(shí)才加載；之所以需要懶加載，是因?yàn)樵谑灼镣瑫r(shí)加載過(guò)多的內(nèi)容，會(huì)導(dǎo)致卡頓不流暢響應(yīng)速度慢、用戶等待時(shí)間過(guò)長(zhǎng)等問(wèn)題，對(duì)此可以使用懶加載機(jī)制來(lái)進(jìn)行優(yōu)化。
本教程操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。
什么是react懶加載？
React懶加載
一、懶加載是什么？為什么需要懶加載？
懶加載：不會(huì)預(yù)加載，而是需要使用某段代碼，某個(gè)組件或者某張圖片時(shí)，才加載他們（延遲加載）
原因：頁(yè)面多，內(nèi)容豐富，頁(yè)面長(zhǎng)，圖片多。在首屏同時(shí)加載過(guò)多的內(nèi)容，會(huì)導(dǎo)致卡頓不流暢響應(yīng)速度慢、用戶等待時(shí)間過(guò)長(zhǎng)等問(wèn)題。對(duì)此我們常用懶加載機(jī)制來(lái)進(jìn)行優(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ù)制
但是這樣頁(yè)面會(huì)報(bào)錯(cuò)。這個(gè)報(bào)錯(cuò)提示我們，在React使用了lazy之后，會(huì)存在一個(gè)加載中的空檔期，React不知道在這個(gè)空檔期中該顯示什么內(nèi)容，所以需要我們指定。接下來(lá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ù)制
推薦學(xué)習(xí)：《react視頻教程》
