使用 React Lazy 和 Suspense 提高性能

React是一个用于构建用户界面的流行JavaScript库，它提供了许多用于提高应用程序性能的功能。其中一个特性是延迟加载，它允许您仅在需要时加载应用程序的某些部分，而不是一次加载全部。结合 Suspense 组件，您可以轻松地在 React 应用中实现延迟加载，以提高性能并提供更好的用户体验。React Lazy 和 Suspense 与 React 16.6 及更高版本兼容，因此您需要拥有支持这些功能（16.6 或更高版本）的 React 版本才能使用它们。

在这篇博文中，我们将大致了解如何在 React 应用程序中使用React.lazy和Suspense实现延迟加载。我们将涵盖延迟加载路由、列表中的组件等主题。到本文结束时，您应该很好地了解如何使用这些强大的功能来优化您的 React 应用程序。

什么是延迟加载？

延迟加载是一种仅在需要时加载 Web 应用程序部分的技术，而不是一次全部加载。这可以通过减少最初需要加载的代码量来提高应用程序的性能。

在 React 应用程序中，您可以使用React.lazy组件来创建组件的延迟加载版本。呈现延迟加载的组件时，直到需要时才加载组件的代码。

React.lazy以下是您可以如何使用延迟加载组件的示例：

import React, { lazy } from "react";

const LazyComponent = lazy(() => import("./LazyComponent"));

function MyApp() {
  return <LazyComponent />;
}

在此示例中，LazyComponent只有在需要时才会加载。

什么是悬念？

在lazy-loaded加载组件时，您可能希望向用户显示后备组件。这就是 Suspense 组件的用武之地。

Suspenselazy-loaded允许您在加载组件时指定要渲染的回退组件。下面是一个示例，说明在加载组件时如何使用 Suspense 显示加载消息lazy-loaded：

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

const LazyComponent = lazy(() => import("./LazyComponent"));

function MyApp() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

在此示例中，Suspense组件将在加载时呈现“正在加载…”消息LazyComponent。

使用 React Lazy 和 Suspense 延迟加载路由

在具有多个路由的 React 应用程序中，您可以使用React.lazy和 Suspense 组件为每个路由延迟加载组件。这可以通过仅在用户访问路由时加载路由代码来提高应用程序的性能。

要设置延迟加载的路由，您需要React.lazy在 react-router-dom 库的 Route 组件中使用和 Suspense 组件。这是一个如何设置延迟加载路由的示例：

import { Route, Switch } from "react-router-dom";
import React, { Suspense, lazy } from "react";

const LazyComponent = lazy(() => import("./LazyComponent"));

function MyApp() {
  return (
    <Switch>
      <Route
        path="/lazy"
        render={() => (
          <Suspense fallback={<div>Loading...</div>}>
            <LazyComponent />
          </Suspense>
        )}
      />
      {/* Other routes */}
    </Switch>
  );
}

在这个例子中，LazyComponent只会在/lazy访问路由时加载。该组件将在加载Suspense组件时呈现一条消息。"Loading..."

React.lazy您可以通过在 Switch 组件中包含多个 Route 组件和 Suspense来设置多个延迟加载的路由。

使用和 Suspense 延迟加载路由React.lazy可以通过仅在需要时加载路由代码来帮助提高 React 应用程序的性能。这可以提供更好的用户体验，尤其是对于连接速度较慢的用户。

延迟加载列表中的组件

如果您有一个要延迟加载的组件列表，则可以使用React.lazy和Suspensecomponents 根据需要延迟加载每个组件。

下面是一个如何设置延迟加载组件列表的示例：

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

const LazyComponent = lazy(() => import("./LazyComponent"));

function MyList() {
  const items = [1, 2, 3, 4, 5];

  return (
    <ul>
      {items.map((item) => (
        <Suspense key={item} fallback={<div>Loading...</div>}>
          <LazyComponent />
        </Suspense>
      ))}
    </ul>
  );
}

在此示例中，每个组件都LazyComponent将在需要时加载，并且Suspense组件将在加载组件时呈现一条"Loading..."消息。

包起来

在这篇博文中，我们了解了如何使用React.lazy和 Suspense 在 React 应用程序中实现延迟加载。我们已经了解了如何延迟加载组件和路由，以及如何在Suspense加载延迟加载组件时使用组件显示回退组件。

延迟加载可以通过减少最初需要加载的代码量来帮助提高 React 应用程序的性能。当与Suspense组件结合使用时，您可以通过在加载惰性加载组件时显示回退组件来提供更好的用户体验。

本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。