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://127.0.0.1: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://127.0.0.1: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 中的延迟加载通过仅加载所需的代码来提高性能，使我们的应用程序更快、更高效。我们使用延迟加载方法创建了两个简单的应用程序。这些都是非常简单的例子，延迟加载经常用于较大的组件或路由以提高性能。