React.js 延遲載入：解釋-js教程-PHP中文網

React.js 延遲載入：解釋

DDD

發布： 2024-09-14 14:30:03

原創

960 人瀏覽過

有備忘單和範例的完整指南

簡介

延遲載入是 Web 開發中有效的效能最佳化技術，特別是對於像 React 這樣的函式庫和框架。它涉及僅在需要時加載元件或資源，無論是響應用戶操作還是當元素即將在螢幕上顯示時。這可以減少應用程式的初始載入時間，減少資源消耗，並改善用戶體驗，特別是在效能有限或網路連線速度較慢的裝置上。

React 中的延遲載入如何運作

React主要透過React.lazy函數實現延遲載入。它通常與 React.Suspense 結合使用，後者處理載入狀態和回退 UI。以下是了解如何在 React 應用程式中實現延遲載入的關鍵步驟。

React.js Lazy Loading: EXPLAINED
1.使用 React.lazy 動態導入

React.lazy 僅在需要時才啟用元件的動態匯入。結果是一個承諾，解析為包含預設 React 元件的模組。

const DelayedComponent = React.lazy(() => import('./DelayedComponent'));

登入後複製

在此範例中，只有當 React 第一次嘗試渲染 DelayedComponent 時才會載入它。

2。用 React.Suspense 包裝

為了處理載入狀態，React.Suspense 用於包裝延遲載入的元件。這允許您在元件載入時顯示後備內容（例如，載入微調器）。

import React, { Suspense } from 'react';

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading content...</div>}>
        <DelayedComponent />
      </Suspense>
    </div>
  );
}

登入後複製

在上面的程式碼片段中，在顯示之前等待 DelayedComponent 載入。如果載入需要時間，用戶將看到「正在載入內容...」。

3。錯誤處理

對於延遲加載，在發生故障（例如網路中斷）時，錯誤處理至關重要。如果載入過程中出現問題，您可以顯示錯誤訊息或後備元件。

4。與路由整合

延遲載入在路由上下文中特別有用，其中根據 URL 載入不同的螢幕或元件。使用像 React Router 這樣的路由器，您可以使用 React.lazy 為每個路由動態載入元件。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense } from 'react';

const HomeView = React.lazy(() => import('./HomeView'));
const AboutView = React.lazy(() => import('./AboutView'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading views...</div>}>
        <Switch>
          <Route path="/about" component={AboutView} />
          <Route path="/" component={HomeView} />
        </Switch>
      </Suspense>
    </Router>
  );
}

登入後複製

在這種情況下，HomeView 和 AboutView 僅在存取各自的路由時才會載入。