React Query和Redux之间的主要区别是什么?

yqyhoc1h  于 2022-11-12  发布在  React
关注(0)|答案(7)|浏览(484)

目前,我在不同的项目中使用redux进行状态管理。几天前,我听说了react-query,它也用于状态管理,并提供缓存和异步获取。我试图找出这两个库之间的主要区别。我应该在哪里使用react-query,以及在哪些情况下需要redux。

pobjuy32

pobjuy321#

React-query是一个专门化的库,它为你保存了一个api缓存,没有别的,因为它是专门化的,所以它可以很好地完成这项工作,需要更少的代码。
另一方面,Redux提供了几乎可以存储任何东西的工具--但是你必须编写逻辑。所以你可以在Redux中做更多的事情,但是你必须潜在地编写一些代码,而这些代码对于一个专门的库来说是不必要的。
您可以同时使用它们:API缓存在React查询中,其余全局状态在Redux中。
也就是说,官方Redux工具包还附带了一个API缓存抽象RTK Query,从1.6版本开始,具有与React Query类似的特性集,但总体上有一些不同的概念--您可能也想了解一下。

oipij1gg

oipij1gg2#

react-query设计用于处理存储在远程服务器上的数据。要访问这些数据,您的应用需要使用异步请求。这可能是您需要处理缓存、加载状态、网络故障等的地方。
这就是React查询的闪光点。
Redux在另一端处理客户端的数据。例如,文本输入的内容或模态的状态。您不需要处理与网络相关的问题。但您确实需要处理复杂的因果序列。
这就是redux的闪光点

8dtrkrch

8dtrkrch3#

React Query管理服务器状态,其主要功能是处理服务器和客户端之间的函数。
Redux处理客户端状态。Redux可用于异步存储数据。
因此,它们在不同的层次上有其独特的作用,两者可以并行使用。

ebdffaop

ebdffaop4#

Reduxreact-query是两种截然不同的东西:react-query用于数据同步,Redux是全局状态管理器。react-query用于将所有应用程序保持同步到同一个数据库,Redux用于将应用程序状态的一部分共享给需要读取该状态的所有组件。
举个例子:我有一个与其他用户聊天的应用程序。使用react-query,我让所有的应用程序与用户收到的所有消息同步,然后我将消息存储在Redux中,以便在聊天页面和历史聊天页面上有消息。

nlejzf6q

nlejzf6q5#

  • React-Query =服务器状态库(保存/缓存API响应)
  • Redux =客户端状态库(应存储可全局访问的客户端状态)。
t3irkdon

t3irkdon6#

我们应该区分两种状态,客户端状态&服务器(或远程)状态

  • 客户端状态包含:
  • 尚未保存到服务器的本地创建的数据。
  • 处理活动路由、选定选项卡、微调器、分页控件等的UI状态。
  • 服务器状态是指与以下各项相关的所有内容:
  • 需要异步API来提取和更新的远程持久化数据

对于客户端状态,Redux是一个用于管理应用程序状态的网格管理工具。
另一方面,要管理服务器状态,我们可以使用常规的状态管理工具,但它们在处理异步或服务器状态方面不是很好。因此,为了解决这个问题,我们使用React Query。正如他们的文档中所描述的,React Query是一个很好的工具,用于:

  • 缓存...(可能是编程中最难的事情)
  • 将对同一数据的多个请求进行重复数据删除,合并为一个请求
  • 在后台更新“过期”数据
  • 了解数据何时“过期”
  • 尽可能快地反映数据更新
  • 性能优化,如分页和延迟加载数据
  • 管理服务器状态的内存和垃圾回收
  • 使用结构化共享来记忆查询结果
wpx232ag

wpx232ag7#

你可以简单地去想:

  • React查询= axios +缓存逻辑
  • Redux可以存储同步数据和异步数据

顺便说一下,我现在使用context管理同步状态,React Query管理异步状态。

相关问题