ReactJS - lazy()

延迟加载（Lazy loading）是一种 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';

// 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;

输出

在浏览器中，导航到 http://localhost: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（在本例中为简单的“Loading...”message），同时正在加载组件。

总结

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