React 中的异步派生-js教程-PHP中文网

React 中的异步派生

花韻仙語

发布： 2024-11-07 14:40:01

转载

462人浏览过

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中文网其它相关文章！