如何在 React 中使用 Suspense 来改进异步渲染

React 中的悬念

React Suspense 是一项强大的功能，允许开发人员通过在加载组件或数据时显示后备 UI 来优雅地处理异步渲染。它与 React.lazy、并发渲染 和 数据获取 解决方案（例如 React Query、Relay 或自定义实现）协同工作。

---

悬念如何运作

1. Placeholder Fallback：Suspense 环绕需要等待异步操作的组件。等待时，它会显示后备 UI（例如加载微调器）。
2. 自动渲染：异步操作完成后，渲染真实的组件或数据。

---

基本语法

import React, { Suspense } from "react";

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

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

export default App;

• React.Suspense：包裹延迟加载的组件。
• fallback：指定等待组件加载时显示的 UI。

---

悬念的用例

1. 延迟加载组件：使用 React.lazy 动态加载组件。
2. 数据获取：与 Relay 或 React Query 等库结合使用时管理异步数据加载。
3. 并发渲染：优化并发 React 模式下的渲染。

---

示例 1：带有悬念的延迟加载

无悬念

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

HeavyComponent 同步加载，增加了初始加载时间。

有悬念

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading Heavy Component...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

现在，HeavyComponent 仅在需要时加载，在加载过程中显示回退。

---

示例 2：具有多个惰性组件的 Suspense

import React, { Suspense } from "react";

const ComponentA = React.lazy(() => import("./ComponentA"));
const ComponentB = React.lazy(() => import("./ComponentB"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading Components...</div>}>
        <ComponentA />
        <ComponentB />
      </Suspense>
    </div>
  );
}

export default App;

后备 UI 将显示，直到两个组件完成加载。

---

示例 3：数据获取的暂停（实验）

当与 Relay 或 React Query 等库集成时，React Suspense 对于异步数据获取也很有用。

React 查询示例

import React, { Suspense } from "react";
import { useQuery } from "react-query";

function DataComponent() {
  const { data } = useQuery("fetchData", fetchData);

  return <div>{data}</div>;
}

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

export default App;

---

带有悬念的错误处理

如果在加载组件或数据的过程中发生错误，React Suspense 不提供内置的错误处理。为此，请使用错误边界。

import React, { Suspense } from "react";

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

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

export default App;

---

使用悬念的最佳实践

1. 简单回退：使用轻量级占位符来避免性能开销。
2. 与错误边界结合：确保正确处理组件或数据加载失败。
3. 智能分块：将您的应用程序划分为逻辑块以获得更好的性能。

---

悬念的好处

1. 改进的用户体验：通过显示后备 UI 确保应用程序保持响应。
2. 减小捆绑包大小：与代码分割配合使用，可优化捆绑包大小。
3. 简化的异步处理：以更具声明性的方式管理加载状态。

---

高级运用：嵌套悬念

您可以嵌套多个 Suspense 组件，以对后备状态进行精细控制。

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

---

悬念的局限性

1. 数据获取支持：直接获取数据的实验功能。
2. 无错误处理：需要额外的错误处理机制，例如错误边界。
3. 浏览器兼容性：需要支持 ES6 模块和承诺的现代浏览器。

---

结论

React Suspense 是一个用于管理 React 应用程序中异步渲染的多功能工具。它简化了加载状态的处理，通过延迟加载增强了性能，并与代码分割和错误处理技术相结合，创造了更流畅的用户体验。

---

以上是如何在 React 中使用 Suspense 来改进异步渲染的详细内容。更多信息请关注PHP中文网其他相关文章！