資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會學
時尚研究
法律研究ReactJS 中的延遲載入
在本文中，我們將學習如何對我們應用程式的頁面進行延遲載入，以使我們的 React 應用程式更加最佳化。
React 應用程式會在與製作 React 應用程式投入生產準備就緒之前，與預先安裝的捆綁器（如 webpack）打包在一起。載入此已打包專案時，它會一次載入整個原始碼，即使是使用者很少訪問的那些頁面也是如此。因此，為了防止一次性載入整個應用程式，我們使用延遲載入的概念來縮短 DOM 載入時間，並提高應用程式的速度。
語法
const OtherComponent = React.lazy(() => import('./OtherComponent'));在此，OtherComponent 是將要延遲載入的元件。
示例
在此示例中，我們將構建一個載入元件的路由應用程式。
App.jsx
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react -router-dom';
const About = lazy(() => import('./About'));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route path="/about" component={About} />
<Route
path="/"
exact
render={() => (
<div>
<h1>This is the main page</h1>
<a href="/about">Click here</a>
</div>
)}
/>
</Switch>
</Suspense>
</Router>
);
export default App;About.js
import React from 'react';
const About = () => {
return (
<div>
<h1>This is the about section</h1>
</div>
);
};
export default About;在以上示例中，當用戶單擊“單擊此處”按鈕時，about.js 指令碼將延遲載入，並相應地更新 DOM。
輸出
這將產生以下結果。
更新於： 18-3-2021
4K+ 瀏覽
廣告