使用React Suspense来改善您的React项目

React生态系统不断发展，似乎总有新功能和改进来使开发更加高效和用户友好React Suspense就是这样一种功能，已经在React开发者中变得非常流行在本指南中，您将学习有关React Suspense的所有知识，并检查它的

React的生态系统一直在不断发展，似乎总是有新的功能和增强措施使得开发更加高效和用户友好。

React Suspense是React开发者中非常受欢迎的一个功能。

在本指南中，您将了解有关React Suspense的所有内容，并检查其功能、用例和潜力，以改变您的Web应用程序。

什么是React Suspense?

React Suspense是在React.js版本16.6中发布的一个新功能。通过这个新功能，组件可以在等待异步进程完成时暂停渲染，比如分离代码或获取数据。

Suspense的创建是为了让开发者更容易创建具有改进的加载指示和更协调的用户体验的应用程序。它使得在特定条件满足之前组件树的渲染暂停成为可能，这使得开发者更容易处理异步数据。

在React中加载状态所面临的问题

在使用React Suspense之前，管理加载状态有些棘手。开发者必须使用第三方框架如Redux或Mobx、条件渲染或状态管理来实现加载机制。这经常导致复杂且容易出错的代码。

React Suspense解决了这个问题，提供了更复杂且集成的方法来管理异步操作和加载状态。

React Suspense的关键概念和特性

让我们来谈谈一些概念和特性，帮助您理解React Suspense以及它的工作原理。

1) Suspense组件

React Suspense的一个重要组成部分是Suspense组件。它允许您声明如何处理异步操作挂起时的回退内容，并封装您的组件树的任何部分。

<Suspense fallback={<LeoFallback />}>  <LeoComponent /></Suspense>

在这个用例中，如果LeoComponent尚未准备好，React将显示LeoFallback组件。

2) 使用React.lazy()或lazy()

React有一个称为lazy()的动态导入机制，它允许您以惰性方式加载组件。

基本上，惰性加载是指只有在需要时才加载组件或代码的要求。这个功能最初是在React 16.6中引入的，经常与React Suspense一起使用，通过仅在需要时加载组件来提高Web应用程序的速度。

这对于减少应用程序的加载速度和减小初始包大小非常有帮助。

现在我们将更深入地研究lazy()并了解它的工作原理。

使用lazy()的基本语法

要使用lazy()，您需要按照以下步骤进行：

首先，从React中导入Suspense组件，以及您打算惰性加载的任何组件。

import { Suspense } from 'react';

然后使用lazy()来定义动态导入。对于要缓慢加载的组件，此函数接受一个函数作为参数，该函数生成动态导入语句。

const LeoComponent = lazy(() => import('./LeoComponent'));

在这个用例中，LeoComponent将在需要时惰性加载。动态的import()语句指定了要导入的组件的路径。

接下来，在Suspense元素中包含您想要惰性加载的元素。您可以使用Suspense组件来指定一个备用组件，在惰性加载的组件正在获取时显示。

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

在这个例子中，当LeoComponent正在获取时，将显示回退组件，表示内容正在加载中。

React.lazy() 的优势

1. 提升速度：通过仅在当前视图所需时加载组件，而不是一次性加载所有组件，组件的懒加载能够提升应用程序的速度。
2. 改善用户体验：通过利用 Suspense 显示加载指示，您可以向用户传达应用程序正在主动加载内容的信息，从而改善用户体验。
3. 代码拆分：lazy() 的主要优势之一是它实现了代码拆分。代码拆分的过程涉及将应用程序的代码分解为更小的按需包。这可以减小初始包大小并加快应用程序的加载时间。

通过使用 lazy()，您可以在 React 应用程序中实现代码拆分和组件的懒加载。这是一个很棒的功能。它是优化您的网页应用程序效率和加载时间的有用工具，通过仅在需要时加载组件来改善用户体验。

当然，它也有一些限制和注意事项，但正确使用时，它可以成为 React 开发工具箱中的一个有用工具。

3) 错误边界

称为错误边界的 React 组件能够检测和处理其子树中的错误。由于它们可以轻松地处理在等待异步数据时出现的任何问题，它们对于处理 suspense 是必不可少的。

class ErrorBoundary extends React.Component {  componentDidCatch(error, info) {    // 处理错误  }  render() {    return this.props.children;  }}

4) 什么是并发渲染？

作为 React 中的一部分，React Suspense 是并发模式的一部分，而并发渲染是在此基础上引入的。

并发渲染使得同时执行多个任务成为可能，提高了 React 应用程序的响应能力和效率。它是并发模式的组成部分，这是一个经过试验和改进的功能集，旨在克服传统 React 渲染的一些缺点。

确保用户界面在 React 处理复杂的渲染或其他异步操作时保持流畅和响应是并发渲染的核心目标。

React Suspense 如何工作？

在使用 React Suspense 进行异步操作时，它会按照以下步骤进行：

1. React 加载后，会渲染组件树。
2. 当遇到 Suspense 组件时，React 会检查其子组件是否处于挂起状态。
3. 如果子组件正在等待数据（例如，由于 lazy() 导入或数据获取的结果），React 将显示给定的回退 UI，直到数据准备就绪。
4. 一旦数据可用，React 会平稳地过渡到渲染真实内容。

由于这个过程是自动化的，开发人员可以更轻松地处理异步操作，而无需编写复杂的逻辑。

React Suspense 的使用场景

React Suspense 是一个灵活的工具，可以在各种场景中使用，包括：

1. 数据获取

React Suspense 的数据获取功能使得在 React 应用程序中管理异步数据加载更加简单。React Suspense 允许您在数据可用之前推迟渲染，通过提供回退内容或加载指示来提升用户体验。

我将举一个使用虚拟 API 的示例，演示如何使用 React Suspense 获取数据。

以下是在使用像 React Query 或 Relay 这样的数据获取框架时，如何使用 React Suspense 来管理数据加载的示例：

建立错误边界和 React Suspense

为了在数据获取过程中捕获任何失败，您首先必须建立一个错误边界和一个 React Suspense 组件。以下是如何在 React 中创建自定义的 ErrorBoundary 组件来进行数据获取：

import React from 'react';class ErrorBoundary extends React.Component {  constructor(props) {    super(props);    this.state = { hasError: false };  }  static getDerivedStateFromError(error) {    return { hasError: true };  }  render() {    if (this.state.hasError) {      return <div>错误：出了些问题！</div>;    }    return this.props.children;  }}export default ErrorBoundary;

使用 React Query 获取数据

如果您正在使用 React Query 检索数据，您可以创建一个使用 useQuery 检索数据并将其包装在 Suspense 中的组件：

import React from 'react';import { useQuery } from 'react-query';import ErrorBoundary from './ErrorBoundary';// 定义您的数据获取函数async function fetchData() {  const response = await fetch('https://api.example.com/data');  if (!response.ok) {    throw new Error('网络响应不正常');  }  return response.json();}function DataFetching() {  const { data, isLoading, isError } = useQuery('data', fetchData);  if (isLoading) {    throw new Promise((resolve) => setTimeout(resolve, 2000)); // 模拟加载延迟  }  if (isError) {    throw new Error('在获取数据时出错');  }  return (    <div>      <h1>使用 React Suspense 获取数据</h1>      <p>{data}</p>    </div>  );}function App() {  return (    <div>      <h1>Leo 的应用</h1>      <ErrorBoundary>        <React.Suspense fallback={<div>加载中...</div>}>          <DataFetchingComponent />        </React.Suspense>      </ErrorBoundary>    </div>  );}export default App;

在此示例中，我们使用 React Query 的 useQuery 钩子来获取数据。为了显示加载指示器，我们使用 throw in new Promise 来模拟加载延迟，如果数据仍在加载中（ isLoading 为 true ）。如果发生问题，我们抛出一个错误，以便错误边界可以捕获它。

您可以通过将 DataFetching 组件包装在 Suspense 中来提供一个备用组件，以在加载期间显示。在这个示例中，它只是一个简单的 “加载中…” 消息。

您还需要根据您独特的数据获取需求自定义错误处理、加载指示和数据获取函数。

本示例展示了 React Suspense 如何使状态管理和数据获取更加轻松，从而使代码库更加有组织和易于理解。

这些示例展示了在 React 中使用 Suspense 进行数据获取的场景。

2. React Suspense 中的延迟加载

仅在需要时加载应用程序的组件（延迟加载，也称为代码拆分）可以减小初始包的大小，并加快 React 应用程序的加载速度。

您可以使用 React.lazy() 结合 React Suspense 轻松实现延迟加载。

以下是使用 React suspense 实现延迟加载的步骤：

首先，从 React 中导入 Suspense：

import { Suspense } from 'react';

接下来，在 React 应用程序中创建一个延迟加载的组件。使用 React.lazy() 方法构建一个慢加载组件。提供一个箭头函数来动态导入组件。

const LennyComponent = lazy(() => import('./LennyComponent'));

然后，在您的组件周围包装一个 Suspense。当延迟组件加载时，您可以指定要显示的加载指示或回退组件。

function App() {  return (    <div>      <h1>Leo's App</h1>      <Suspense fallback={<div>加载中...</div>}>        <LennyComponent />      </Suspense>    </div>  );}

该组件可以像您 React 应用程序中的其他组件一样使用。

function LennyComponent() {  return <div>这个组件是懒加载的。</div>;}

为了完成构建您的应用程序，您必须使用开发服务器和类似 Webpack 的工具来构建和提供您的应用程序，以确保代码拆分按预期工作。WebPack 将自动将您的代码分割为片段，以便进行懒加载。

此设置将最小化初始捆绑大小，并通过仅在需要时加载 LazyComponent 来加快加载您的 React 应用程序的速度。当组件正在检索时，用户将看到加载指示（在此示例中为”正在加载…”）。组件轻松加载并在应用程序中呈现。

3. 更好的用户体验

React Suspense 可以通过在数据加载期间显示加载指示器或回退内容来确保流畅的用户体验。这减少了使用您的 React 应用程序的人所感知的加载时间。

例如，假设您有一个组件，它使用 fetch 从 API 获取数据，并且您希望在获取数据时显示加载旋转器。以下是使用 React Suspense 的基本示例：

import React, { Suspense } from 'react';// 检索数据的组件const fetchApiData = () => {  return new Promise((resolve) => {    setTimeout(() => {      resolve('数据已加载！');    }, 2000); // 模拟数据获取的2秒延迟  });};// 使用 Suspense 处理异步数据获取的组件const DataComponent = () => {  const apidata = fetchApiData(); // 这可以是任何异步函数，比如 API 调用  return <div>{apiData}</div>;};// 使用 Suspense 包装组件const App = () => {  return (    <Suspense fallback={<LoadingSpinner />}>      <DataComponent />    </Suspense>  );};// 简单的加载旋转器组件const LoadingSpinner = () => {  return <div>正在加载...</div>;};

在此示例中：

fetchApiData 方法由 DataComponent 组件使用来获取数据。请记住，虽然 fetchApiData 实际上只是返回一个 Promise 的简单函数，但在实际应用中它可能是一个 API 调用。

Suspense 组件需要一个 fallback 参数来封装 App 组件。在运行异步操作时将显示的组件是 fallback 参数。在此示例中，它是 LoadingSpinner 组件。

当渲染 DataComponent 时，React Suspense 将自动处理异步数据获取。如果数据尚不可用，则 LoadingSpinner 组件将被渲染。数据检索后，用户界面会得到更新。

此方法消除了手动加载状态管理的需求，从而实现更流畅的用户体验。这段代码很简单，React Suspense 在这里运行得非常高效。

结论

React Suspense 是 React 生态系统的一个重要补充。它提供了一种更简单、集成的方法来管理异步操作和加载状态。通过使用 Suspense、React.lazy() 和错误边界，您可以使用它设计出加载速度更快、数据获取更高效和用户体验更好的应用程序。

了解任何强大工具的功能、限制和最佳实践是至关重要的。并发模式和 React Suspense 有能力革新 Web 应用程序开发，进一步改善用户体验。但是，随着 React 生态系统的不断发展，跟上最新的进展和行业最佳实践是必要的。

• Asynchronous
• React