ReactJS - lazy()

---

---

延遲載入是 React 中的一種方法，允許我們延遲載入元件的程式碼，直到需要它為止。延遲載入允許我們僅在準備好使用時載入程式碼的特定部分，而不是在程式啟動時載入所有內容。

語法

import { lazy } from 'react';

const MyComponent = lazy(load)

引數

load − 它是一個返回 Promise 的函式。React 只會在我們第一次嘗試渲染元件時呼叫此函式。

返回值

lazy 函式返回一個可在我們的程式中使用的 React 元件。嘗試在程式碼仍在載入時渲染它會導致掛起，我們可以使用 <Suspense> 來顯示載入訊息。

示例

示例 1

現在我們將建立一個使用延遲載入的完整應用程式，該應用程式需要多個檔案和配置。這是一個使用延遲載入元件的 React 專案的簡單示例。因此，我們將建立兩個名為 ComponentA 和 ComponentB 的元件。然後，我們將把這些元件呼叫到名為 App 的主元件中。

ComponentA.js

import React from 'react';

const ComponentA = () => {
   return <div>This is Component A</div>;
};

export default ComponentA;

ComponentB.js

import React from 'react';

const ComponentB = () => {
return <div>This is Component B</div>;
};

export default ComponentB;

App.js

import React, { lazy, Suspense } from 'react';

const ComponentA = lazy(() => import('./ComponentA'));
const ComponentB = lazy(() => import('./ComponentB'));

const App = () => {
   return (
      <div>
         <h1>Lazy Loading App</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <ComponentA />
            <ComponentB />
         </Suspense>
      </div>
   );
};

export default App;

輸出

在瀏覽器中，導航到 https://:3000，我們應該看到延遲載入的元件。

這是一個簡單的例子，延遲載入經常用於較大的元件或路由以提高效能。此外，對於多頁應用程式中更復雜的延遲載入，請考慮利用 React Router 等技術。

示例 2

讓我們建立一個基本的 React 應用，它使用延遲載入方法渲染動態專案列表。我們將有一個主元件 (ItemList) 和將併發載入的單個專案元件。

// src/ItemList.js
import React, { lazy, Suspense } from 'react';
import Loading from './Loading';

// Lazy load Item component
const Item = lazy(() => delayForDemo(import('./Item')));

const itemsData = [
   { id: 1, name: 'Item 1' },
   { id: 2, name: 'Item 2' },
   { id: 3, name: 'Item 3' },
];

const ItemList = () => {
   return (
      <div>
         <h2>Item List</h2>
         <Suspense fallback={<Loading />}>
         {itemsData.map((item) => (
            <Item key={item.id} name={item.name} />
         ))}
         </Suspense>
      </div>
   );
};

export default ItemList;

// Add a fixed delay 
function delayForDemo(promise) {
   return new Promise(resolve => {
      setTimeout(resolve, 2000);
   }).then(() => promise);
}

Loading.js

export default function Loading() {
   return <p><i>Loading...</i></p>;
}

src/App.js

import React from 'react';
import ItemList from './ItemList';

function App() {
   return (
      <div>
         <h1>Lazy Loading Example</h1>
         <ItemList />
      </div>
   );
}

export default App;

輸出

在瀏覽器中，導航到 https://:3000，我們應該看到延遲載入的專案列表。

此示例演示瞭如何使用延遲載入來提高應用程式的初始載入效能，尤其是在處理大量元件列表時。

示例 3

讓我們再建立一個示例，我們將使用 lazy 方法載入包含影像的元件。

LazyComponent.js

import React from 'react';

const LazyComponent = () => {
   return (
      <div>
         <p>This component contains a image:</p>
         <img
         src="https://via.placeholder.com/300"
         alt="Lazy Loaded Image"
         />
      </div>
   );
};

export default LazyComponent;

Loading.js

export default function Loading() {
   return <p><i>Loading...</i></p>;
}

App.js

import React, { lazy, Suspense } from 'react';
import './App.css'

// Lazy load the component
const LazyComponent = lazy(() => delayForDemo(import('./LazyComponent')));

const App = () => {
   return (
      <div className='App'>
         <h1>Lazy Loading Example</h1>
         <p>This is the main component.</p>
         
         {/* Suspense to handle the lazy loading */}
         <Suspense fallback={<div>Loading...</div>}>
            <LazyComponent />
         </Suspense>
      </div>
   );
};

export default App;

// Add a fixed delay
function delayForDemo(promise) {
   return new Promise(resolve => {
      setTimeout(resolve, 2000);
   }).then(() => promise);
}

輸出

在此示例中，LazyComponent 元件包含從源載入的影像。我們使用 lazy 方法在 App 元件中載入此元件。

和以前一樣，Suspense 元件處理延遲元件的非同步載入，並在載入元件時顯示回退 UI（在本例中為簡單的“載入中...”訊息）。

總結

React 中的延遲載入透過僅載入所需的程式碼來提高效能，使我們的應用程式更快、更高效。我們使用延遲載入方法建立了兩個簡單的應用程式。這些都是非常簡單的例子，延遲載入經常用於較大的元件或路由以提高效能。