ReactJS - lazy()

延迟加载是一种 React 方法，它允许我们延迟加载组件的代码，直到需要它为止。延迟加载允许我们在代码准备好使用时才加载特定的代码片段，而不是在程序启动时加载所有内容。

语法

import { lazy } from 'react';

const MyComponent = lazy(load)

参数

load − 它是一个返回 Promise 的函数。React 只会在我们第一次尝试渲染组件时调用此函数。

返回值

lazy 函数返回一个 React 组件供我们的程序使用。尝试在代码仍在加载时渲染代码将导致它暂停，我们可以使用 <Suspense>显示加载消息。

示例

示例 1

现在我们将创建一个具有延迟加载的完整应用程序，该应用程序需要多个文件和配置。这是一个使用延迟加载组件的 React 项目的简单示例。因此，我们将创建 2 个名为 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;

输出

在浏览器中，导航到 http://localhost:3000，我们应该会看到我们的延迟加载组件。

这是一个简单的例子，延迟加载通常用于较大的组件或路由以获得更好的性能。此外，对于多页应用程序中更复杂的延迟加载，请考虑利用 React Router 等技术。

示例 2

让我们创建一个基本的 React 应用程序，使用延迟加载方法呈现动态列表。我们将有一个主组件 (ItemList) 和将同时加载的单个项目组件。

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

// 延迟加载 Item 组件
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;

// 添加固定延迟
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;

输出

在浏览器中，导航到 http://localhost:3000，我们应该看到延迟加载的项目列表。

此示例展示了如何使用延迟加载来提高应用程序的初始加载性能，尤其是在处理大量组件列表时。

示例 3

让我们创建另一个示例，其中我们将使用延迟方法来加载包含图像的组件。

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'

// 延迟加载组件
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;

// 添加固定延迟
function delayForDemo(promise) {
   return new Promise(resolve => {
      setTimeout(resolve, 2000);
   }).then(() => promise);
}