WHAT - react-query(TanStack Query) vs swr 请求

于 2025-05-08 17:14:16 发布
阅读量827 收藏 15
点赞数 23
分类专栏： 请求方案学习专栏 文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58540586/article/details/147797624
版权

文章目录

react-query

react-query（现已更名为 TanStack Query）和 SWR 一样，都是专注于 远程数据获取、缓存和同步的库，但相比之下，它提供了更强的功能和更复杂的控制能力。

什么是 TanStack Query（原 React Query）

TanStack Query 是一个强大的数据获取库，适用于 React 和其他前端框架，专注于异步状态管理。它简化了远程数据获取、缓存、更新和同步的流程。

核心特性

特性描述
自动缓存和更新请求结果会被缓存，再次访问时优先读取缓存；支持背景更新（revalidation）
查询和变更分离（Query/Mutation）查询是获取数据，变更用于 POST/PUT/DELETE 等操作
自动重试/重取请求失败后自动重试，可配置重试策略
后台刷新（Refetching）支持页面重新聚焦或网络重新连接后自动重新请求
分页和无限加载支持内建 useInfiniteQuery
强大的 Devtools提供直观的开发者工具查看缓存、状态等
服务端渲染（SSR）支持支持 Next.js 等框架中的服务端数据获取
依赖查询（Dependent Queries）支持一个请求依赖另一个请求的结果

TanStack Query vs SWR 对比

具体特性对比

特性/维度TanStack QuerySWR（Stale-While-Revalidate）
作者/组织Tanner Linsley / TanStackVercel 团队（Next.js 作者）
API 设计更加结构化（如 useQuery, useMutation）更简洁、基于 useSWR(key, fetcher)
缓存机制内建持久化、分页、依赖管理、缓存时间控制更轻量的缓存系统，支持简单配置
数据变更（POST等）明确用 useMutation 管理，配合缓存更新需手动使用 mutate() 触发更新
错误处理/重试自动重试 + 回退 + 拦截器机制支持基础重试逻辑，但不如 TanStack Query 灵活
分页/无限加载内建 useInfiniteQuery 等专用钩子支持分页加载（需配合 key 管理），较为原始
DevTools✅ 强大直观的浏览器调试工具❌ 没有官方 DevTools
依赖查询✅ enabled 配置项可精细控制执行时机需要手动控制 key 或使用条件判断
学习曲线相对陡峭，功能多，需要理解 QueryClient 等简洁上手快，更偏向轻量级使用

哪个更适合你

使用场景推荐库
项目需要复杂的数据依赖、变更操作、分页等TanStack Query
小型项目/快速原型/只读请求为主SWR
需要优秀的开发者工具、缓存持久化支持TanStack Query
使用 Next.js，偏好轻量和灵活性SWR（与 Next 紧密集成）

总结

  • TanStack Query = 功能强大，适合中大型项目和复杂数据交互需求。
  • SWR = 轻量灵活，适合简单的数据获取场景或快速开发。
【LeetCode】3. Merge Two Sorted Lists·合并两个有序链表
aqin1012的博客
07-01 209
将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。
【LeetCode】题记日记 21.合并两个有序链表 Merge Two Sorted Lists
最新发布
qq_21565101的博客
08-10 407
将两个升序链表合并为一个新的 升序 链表并返回。
python对两个关联list排序(sort,sorted)及自定义排序
热门推荐
rosefun96的博客
03-10 1万+
>>> list1 = [3,2,4,1, 1] >>> list2 = ['three', 'two', 'four', 'one', 'one2'] >>> list1, list2 = zip(*sorted(zip(list1, list2))) >>> list1 (1, 1, 2, 3, 4) >>&g...
Python中排序常用到的sort 、sorted和argsort函数
Fluentwater的博客
07-18 722
Python中sort 和 sorted函数 一、介绍 sort函数是list列表中的函数，而sorted可以对list或者iterator进行排序 二、sort和sorted的比较 1、用sort函数对列表排序时会影响列表本身，而sorted不会 举例：>>> a = [1,2,1,4,3,5] >>> a.sort() >>> a [1, 1, 2, 3, 4, 5]>>
《中英双解》leetCode Merge Two Sorted List(合并两个有序链表)
weixin_46272350的博客
10-31 231
Merge two sorted linked lists and return it as asortedlist. The list should be made by splicing together the nodes of the first two lists. 将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 Example 1: Input: l1 = [1,2,4], l2 = [1,3,4] Output: [1,1,...
leetcode 21.合并两个有序链表（merge two sorted lists）C语言
hsk6543210的博客
05-17 379
leetcode 21.合并两个有序链表（merge two sorted lists）C语言1.description2.solution 1.description https://leetcode-cn.com/problems/merge-two-sorted-lists/description/ 将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例： 输入：1->2->4, 1->3->4 输出：1->1->2-&g
算法：合并两个有序链表21. Merge Two Sorted Lists
AI架构师易筋
01-31 277
LeetCode全集请参考：LeetCode Github 大全 题目 21. Merge Two Sorted Lists Merge two sorted linked lists and return it as a sorted list. The list should be made by splicing together the nodes of the first two lists. Example 1: Input: l1 = [1,2,4], l2 = [1,3,4] Output
leetcode-21.Merge Two Sorted Lists 合并两个有序链表
别说话写代码的博客
12-21 238
题目： Merge two sorted linked lists and return it as a new list. The new list should be made by splicing together the nodes of the first two lists. Example: Input: 1->2->4, 1->3-&...
LeetCode 21. Merge Two Sorted Lists （合并两个有序链表）
Asoul_的博客
12-19 148
合并两个有序链表
LeetCode 21: Merge Two Sorted Lists（合并两个有序链表）
Dby_freedom的博客
09-22 368
原题 Merge two sorted linked lists and return it as a new list. The new list should be made by splicing together the nodes of the first two lists. 题目： 将两个有序链表合并为一个新的有序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 Exam...
【LeetCode 面试经典150题】21. Merge Two Sorted Lists 合并两个有序链表
qq_43513394的博客
01-12 452
You are given the heads of two sorted linked lists and .Merge the two lists into one sorted list. The list should be made by splicing together the nodes of the first two lists.Return the head of the merged linked list.给定两个已排序的链表 和 的头节点。将这两个链表合并成一个排序的链表。
【List-easy】21. Merge Two Sorted Lists 合并两个排序链表
想当厨子的程序媛
05-30 286
1. 题目原址 https://leetcode.com/problems/merge-two-sorted-lists/ 2. 题目描述 3. 题目大意 给定两个有序链表，要求合并这两个有序链表 4. 解题思路 首先要定义一个返回的链表的头，要有一个头结点 然后开始对给定的两个链表进行循环，如果链表一的值小于链表二的值，就指向链表一，否则指向链表二 最后有可能一个链表比另一个链表长，所以最后...
LeetCode 21. 合并两个有序链表 Merge Two Sorted Lists
天天搬砖的程序员博客
04-25 416
将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例1： 输入：l1 = [1,2,4], l2 = [1,3,4] 输出：[1,1,2,3,4,4] 示例2： 输入：l1 = [], l2 = [] 输出：[] 示例3： 输入：l1 = [], l2 = [0] 输出：[0] 使用两个指针，分别指向两个链表头结点 比较两个结点，将节点值小的放到新链表中（若节点值相同，可约定先取某一个链表的阶段，比如先取蓝色链表中的节点） 依次遍历链表，指针移动到下
[LeetCode] Multiply Strings 字符串相乘
jhbxlx的专栏
09-30 2063
Given two numbers represented as strings, return multiplication of the numbers as a string. Note: The numbers can be arbitrarily large and are non-negative. 这个题说数可能是任意的大的非负数，肯定不是让你直接乘起来返回（我干了。。）而是
[LeetCode]Clone Graph 克隆图
jhbxlx的专栏
08-04 1814
lone an undirected graph. Each node in the graph contains a label and a list of its neighbors. OJ's undirected graph serialization: Nodes are labeled uniquely. We use # as a separator for eac
[LeetCode] Longest Palindrome Substring 详细分析
jhbxlx的专栏
10-01 1793
Given a string S, find the longest palindromic substring in S. You may assume that the maximum length of S is 1000, and there exists one unique longest palindromic substring. 面DP题的考官都是神经病。。(吐
[LeetCode]Valid Number有效数字
jhbxlx的专栏
07-25 1319
public boolean isNumber(String s) { if (s == null) return false; int start = 0, end = s.length() - 1; while (start <= end && s.charAt(start) == ' ') { start++; } while (end >= sta
[LeetCode]Reverse Words in a String 新题151
jhbxlx的专栏
03-08 1171
Given an input string, reverse the string word by word. For example, Given s = "the sky is blue", return "blue is sky the". 这个题不难，结果我做的时候出现了TIME LIMIT EXCEED 之前是用栈做的，把每个单词push进去，pop出来，就是倒序了么，感觉
C语言实现LeetCode第21题：合并两个有序链表
具体来说，该资源针对的是LeetCode上的算法题编号为0021的题目——合并两个有序链表（Merge Two Sorted Lists）。该题目要求参与者使用C语言实现一个算法，该算法能够将两个已经排序的链表合并成一个新的有序链表，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@PHARAOH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值