本教程操作環境：Windows10系統、react18.0.0版、Dell G3電腦。
什么是react懶加載？
(資料圖)
React懶加載
一、懶加載是什么？為什么需要懶加載？
懶加載：不會預加載，而是需要使用某段代碼，某個組件或者某張圖片時，才加載他們（延遲加載）
原因：頁面多，內容豐富，頁面長，圖片多。在首屏同時加載過多的內容，會導致卡頓不流暢響應速度慢、用戶等待時間過長等問題。對此我們常用懶加載機制來進行優化。
二、使用懶加載
使用React.lazy加載
//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懶加載的詳細內容，更多請關注php中文網其它相關文章！
關鍵詞： React
營業執照公示信息