了解 React 中遗留的 Promise 抛出行为

React 是一个强大且多功能的 JavaScript 库，用于构建用户界面。 Suspense 是其现代功能之一，允许组件优雅地处理异步数据。然而，React 中“遗留 Promise 抛出行为”的概念经常引起开发人员的困惑。这篇博文旨在分解这种行为的含义、它如何适应 React 的渲染过程，以及为什么在使用并发功能时理解这一点很重要。

什么是遗留承诺抛出行为？

遗留 Promise 抛出行为是指 React 组件在渲染期间“抛出”promise 的机制。这告诉 React 组件正在等待一些异步数据被解析，然后才能完全渲染。

当抛出 Promise 时，React 会暂停组件树该部分的渲染，并使用 Suspense 渲染后备 UI（如果已定义）。一旦 Promise 解析，React 就会使用解析后的数据重新渲染组件。

遗留承诺抛出的主要特点：

1. 在渲染期间抛出 Promise：组件可以通过抛出 Promise 来指示它们正在等待数据。
2. 与 Suspense 集成：此行为与 Suspense 无缝配合以显示后备内容。
3. 异步数据处理：它提供了一种声明式方式来处理 React 渲染生命周期内的异步数据获取。

它是如何运作的？

让我们一步步看看这个行为是如何运作的：

1. 组件抛出 Promise：在渲染过程中，组件遇到 Promise 并抛出它。
2. 渲染暂停：React 暂停组件树该分支的渲染。
3. 后备 UI：如果存在 Suspense 边界，React 会渲染后备 UI。
4. Promise 解决：一旦 Promise 解决，React 就会恢复渲染并集成已解决的数据。

遗留 Promise 抛出的示例

import React, { Suspense } from 'react';

// Simulated fetch function
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Data loaded!"), 2000);
  });
}

// Component that throws a promise
function AsyncComponent() {
  const data = useData(); // Custom hook
  return <div>{data}</div>;
}

function useData() {
  const promise = fetchData();
  if (!promise._result) {
    throw promise;
  }
  return promise._result;
}

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

export default App;

说明：

1. 获取数据：useData 钩子使用 fetchData 函数异步获取数据。
2. 抛出 Promise：如果数据尚不可用，则抛出 Promise。
3. Suspense Fallback：Suspense 组件显示“正在加载...”，直到承诺解决。
4. 已解析数据：一旦 Promise 解析，AsyncComponent 就会渲染加载的数据。

现代 React 和并发特性

React 18 引入了并发渲染，它改进了 Promise 抛出的工作方式。主要改进包括：

1. 时间切片：React 的并发渲染将工作分割成更小的块，即使在等待异步数据时也能保持 UI 响应。
2. 受控的悬念边界：悬念边界更优雅地处理承诺抛出。
3. 改进的错误处理：针对无法获取数据的组件提供更好的错误边界。

最佳实践

虽然传统的 Promise Throwing 是 Suspense 的基础，但开发人员应该使用现代库和模式以获得更好的体验：

使用 React Query 或 SWR

React Query 和 SWR 等库为数据获取、缓存和同步提供了强大的解决方案，无需手动抛出 Promise。

利用 Hook（React 18）

React 18 引入了 use hook（实验性），用于以更简洁、声明性的方式处理 Promise。

import React, { Suspense } from 'react';

// Simulated fetch function
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Data loaded!"), 2000);
  });
}

// Component that throws a promise
function AsyncComponent() {
  const data = useData(); // Custom hook
  return <div>{data}</div>;
}

function useData() {
  const promise = fetchData();
  if (!promise._result) {
    throw promise;
  }
  return promise._result;
}

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

export default App;

避免直接抛出 Promise

手动抛出 Promise 可能会导致意外问题，尤其是在非并发环境中。相反，依靠抽象这些复杂性的库或实用程序。

包裹悬念以实现可重用性

将 Suspense 逻辑封装在可重用组件中，以获得更清晰的代码：

function AsyncComponent() {
  const data = use(fetchData());
  return <div>{data}</div>;
}

结论

遗留的 Promise 抛出行为是 React Suspense 功能的基石，可在渲染过程中无缝处理异步数据。然而，随着 React 的发展，管理异步操作的工具和模式也在不断发展。通过理解这种行为并利用现代实践，开发人员可以创建高效、响应迅速且可维护的应用程序。

以上是了解 React 中遗留的 Promise 抛出行为的详细内容。更多信息请关注PHP中文网其他相关文章！