一种使用优雅的前端api调用方式

350 阅读4分钟

优点和缺点/何时使用反应查询库。

什么是react-query,解决什么痛点?

什么是react-query,解决什么痛点?即使库已更改名称(改为 TanStack Query),我们仍会在这里将其称为 react-query,好吗?

在图书馆的网站上,它被描述为:“React 应用程序缺少的数据获取库,但用更专业的术语来说,它使得在 React 应用程序中获取、缓存、同步和更新服务器状态变得非常容易。”

我们可以将其解释为:“我是一个库,可以帮助您使用我自己的钩子更有效地获取数据,将数据存储在缓存中以获得更好的性能,创建更可靠的加载屏幕。此外,我使代码更具可读性和更简单处理。”

图片描述

还有什么其他方法可以做到这一点?

如果你在项目中使用过 React,你可能遇到过以下语法:

图片描述

解释代码将是:

导入 axios 并为每个功能(错误、数据和加载...)创建辅助状态:

图片描述

使用 useEffect 调用我们的函数来命中 API,并在每次加载组件(或屏幕)时将此数据带到我们的数据状态中。

但首先,我们设置了两个错误和加载状态,给人的印象是“正在加载...”和“没有错误”,这是一个谎言,因为发生的事情是“我还没有访问 API然而,我不知道那里发生了什么。”

这样,您的函数做的第一件事不是访问 API,而是设置各种状态。

我建议阅读“为什么 useEffect 是进行 API 调用的坏地方”: https: //articles.wesionary.team/why-useeffect-is-a-bad-place-to-make-api-calls-98a606735c1c

图片描述

最后在我们的 JSX 返回语句中使用这些数据和状态:

图片描述

虽然可能不完全准确,但这个逻辑仍然有效!而且,如果您的应用没有大量用户和请求,我相信这段代码将达到其目的而不会出现重大问题。

React-Query 解决了什么痛点?

错误处理:React Query 提供了一种集成的方式来处理服务器请求错误。这可以帮助您轻松处理常见的错误场景,例如网络故障和服务器错误。
有了这个,再见 setIsError 及其派生。现在,使用 React Query 自己的钩子控制错误和加载状态变得更好了:

我们还可以创建一个名为“hooks”的文件夹,并为每个端点或 API 请求填充挂钩。有了这个,我们不一定需要这个不优雅的 useEffect 主体在​​每个组件/屏幕中调用一个新的函数。

简化代码:React Query 可以通过减少处理服务器响应所需编写的样板代码量来帮助简化代码。

👉🏽 对我来说,图书馆的关键区别是:

缓存:

React Query 的缓存层可以通过减少检索数据所需的网络请求数量来帮助提高应用程序性能。这可以提高应用程序的响应速度,并大大降低服务器负载。

乐观更新:React Query 允许您使用乐观更新来更新缓存,这意味着您可以在等待服务器响应之前更新用户界面。这可以使您的应用程序看起来更快、响应更快。

什么时候不使用它?

与图书馆一样伟大,重要的是要对过度工程保持谨慎。

学习曲线:

React Query 有自己的 API,学习如何有效使用它可能需要一些时间。还需要了解库的底层概念,如缓存、失效等。

并不总是必要的:

对于较小的应用程序,可能没有必要使用 React Query。缓存和错误处理功能在性能不是主要问题的小规模应用程序中可能没有那么有用。

与现有代码集成:

如果您要将 React Query 添加到现有代码库,您可能需要重构现有代码以使用该库。这可能很耗时,并且会增加代码的整体复杂性。

与任何库一样,React Query 在包大小和性能方面都有开销。对于小型应用程序,这种开销可能不合理。