React 中的异步派生

我们遇到了问题，异步很难。

假设您有一个简单的 GET API，一个接收 searchText 作为参数的搜索。您使用您偏好的 http 请求工具调用它并得到一个承诺，它解析为您正在搜索的任何内容的列表。

如何在 React 组件中调用它？

首先，需要注意一件事，我所描述的可以建模为：

result = await searchAPI(searchText);

让我们在这里了解一下概念。 这是一个推导。对于每个版本的 searchText，您可以获得不同的结果。但这里有一些问题：

• 这是外部数据。
• 它返回一个承诺。

如何在 React 中将其称为派生？

使用第三方库，例如 TanStack Query 和 SWR 解决了我们的问题。它们为我们提供了可以在 React 组件中使用的钩子，接收我们的状态和属性，并在 API 发生变化时重新计算（重新获取）。看这个例子：

const { data: searchResult, loading } = useQuery({queryKey: [search, searchText],queryFn: getSearch,});

好的，我们解决了异步推导，对吧？

其实不是。

顺便说一句，我总是建议只使用其中一个库，它们很棒，并且可以在更复杂的情况下节省大量时间（例如重新获取、重试、缓存控制等），但我们不能指望第三个- 解决 React 概念问题的聚会。

再次回到反应性，我们需要有一种方法来处理派生模型中的异步情况。 React 应该为我们提供一个针对这种情况的原语。嗯，直到版本 18 之前我们都没有它，但在版本 19 中就不同了。

“使用”案例

React 19 引入了一个名为 use 的新原语。是的，命名有点令人困惑，但它在 React 反应模型中的作用非常重要。有了它，我们可以在组件渲染期间解决承诺。 缺失的推导。

在此之前，在组件渲染期间调用 fetch 的唯一方法是使用 useEffect，调用 Promise 并在 then 子句中，使用响应中的值设置状态。这在某种程度上是有效的，但我们在使用效果来实现这一点时遇到了所有问题。
use 原语允许我们在组件渲染期间解析 Promise，允许我们使用状态和 props 来创建 Promise，然后解析这些 Promise 并将其用于我们的函数和 JSX。

const useCountTotal = (count: number) => {
  const countTotalPromise = useMemo(() => genericPromise(count), [count]);


  const result = use(countTotalPromise);


  return result;
}


function AsyncDerivation({count}: { count: number}) {
  const result = useCountTotal(count);

  return (
    <div>Total count is: {result}</div>
  )
}

在我写这篇文章的时候，我们还没有 React 19 的最终版本。有一些警告，并且该原语可能会在未来发展以在更多地方工作。

原始使用的一个具体问题是它需要与 Suspense 一起使用，这是有充分理由的。

异步和 React 组件

await 的概念很好，但是与 React 组件结合时有一个缺陷。您不能只在渲染期间使用await。 React 调用组件来获取 JSX 响应，并在流程中使用它来渲染 UI。

如果我们可以在等待中停止所有事情，React 就无法访问该组件的子组件并继续其工作，直到树的末尾。我们会停止渲染流程并使 UI 不更新并冻结。

如何解决？

我们可以看一下我在本文中使用的两个示例。第一个采用返回标志（例如加载）的方法，而不是阻塞渲染流。当承诺得到解决时，它会引发重新渲染，更新标志，加载变为 false 并且数据接收响应数据。

使用方式不同。它的行为确实类似于await 原语，因此组件渲染流会在那里停止，直到解决。

等等，等等，你说这是一个问题，对吗？

拯救悬念来了。当您使用 use 原语时，它将被包装在 Suspense 组件中，渲染流将停止等待 use 分辨率，并且用户将获得在 UI 上渲染的后备（通常是加载旋转器或骨架，表明我们正在那里加载一些东西）。

当使用承诺得到解决后，我们将继续渲染并相应地更新 UI。无需使用useEffect。

结论

use 原语对于旨在使用 Suspense 和处理异步行为的库作者来说非常有用。对于应用程序开发人员来说，它修复了基本反应性模型中的另一种情况，这非常适合简单的用例。由于它封装了 Promise，因此它不仅限于 http 请求，还适用于所有异步情况和外部 API 使用，这可以为生态系统添加更多资源。

以上是React 中的异步派生的详细内容。更多信息请关注PHP中文网其他相关文章！