我们遇到了一个问题,异步很难。
假设您有一个简单的 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 使用,这可以为生态系统添加更多资源。