对比TanStack Query（v5）、SWR

主要功能：

react-query （TanStack Query支持多种框架，当前文档仅描述react版）

主要用于管理异步数据获取、缓存、数据过期更新及异常处理、失败重试。适用于需要全面数据获取功能的大型应用

• 数据获取：

1. 提供数据加载状态方便UI处理。
2. 支持多种请求类型。
3. 自动处理异常并返回对应的响应数据。

• 自带缓存机制：

1. 数据获取成功自动缓存数据，减少不必要的网络请求。
2. 提供 cacheTime 和 staleTime 配置项来控制缓存的有效期和数据的新鲜度。
3. 数据缓存过期后自动后台刷新重新获取数据。
4. 支持共享缓存，可多个组件共享一份接口数据缓存。

• 并发模式支持：确保在网络请求未完成时安全地卸载组件，避免内存泄漏和其他潜在问题
• 数据更新：
  1. 乐观更新：通过 useMutation Hook 支持创建、更新或删除资源的操作，实现乐观更新，即在请求完成前更新UI，先显示预期的结果，提升用户体验，如果请求失败则回滚到原始状态。
  2. 自动失效：在数据更新完成后，自动失效相关缓存并重新缓存新数据
  3. 窗口聚焦刷新：用户重新聚焦窗口时自动刷新数据
  4. 网络重连刷新：网络重新连接时自动刷新数据
  5. 轮询：通过refetchInterval定期刷新数据
  6. 手动触发请求：允许通过 manual 选项将请求设置为手动触发，配合 run 方法按需发起请求。
• 数据展示和交互功能：
  1. 无限滚动与分页：使用 useInfiniteQuery Hook 来实现无限滚动功能，简化分页逻辑的管理。
  2. 优雅处理异步数据加载及错误处理：与React Suspense集成，设置useQuery钩子的suspense选项为true
• 插件与扩展功能：
  1. react-query/devtools：提供了一个React DevTools面板，用于查看和管理React Query的缓存、请求历史和查询状态，帮助开发者清晰地观察每个请求的状态及其相关缓存信息。
  2. react-query/hydration：在服务器端渲染（SSR）应用程序中，可以自动提取数据并在客户端上进行缓存。这有助于减少客户端的加载时间，提升用户体验。
  3. react-query/persistCache：可以将缓存存储在本地存储中，以便在刷新页面后重新加载数据。这有助于保持应用的状态一致性，提升用户体验。
• 全局配置：可以通过 QueryClient 进行全局配置，如设置默认的缓存时间、重试策略等。

SWR （目前仅支持react）

SWR 是 "stale-while-revalidate" 的缩写，它是一个用于数据获取和缓存的React Hooks库，侧重于异步状态管理，采用轻量级Hooks简化数据获取，专为构建快速响应的用户界面而设计。
它的工作原理是先返回缓存的数据，然后在后台发起请求获取最新的数据，并在收到新数据后更新UI。这种模式可以提供即时的用户体验，同时确保数据保持最新。

• 即时响应：当组件首次渲染时，SWR 会立即返回缓存中的旧数据（如果有）。这使得用户界面能够瞬间加载，无需等待网络请求完成。
• 自动重验证：一旦从缓存中读取了数据，SWR 就会在后台发起请求以获取最新数据。这个过程对用户来说是透明的，只有当新数据到达时才会更新UI。
• 简单的API：SWR 提供了一个非常直观的 useSWR Hook 来简化数据获取逻辑，包括处理加载状态、错误和成功情况。
• 支持多种数据源：虽然 SWR 最常用于HTTP请求，但它也可以与其他类型的数据源一起工作，比如 WebSocket 或者本地存储。
• 优化性能：SWR 内置了一些性能优化特性，如并发模式支持、自动垃圾回收和去抖动/节流功能，帮助减少不必要的请求。
• 开发工具集成：与 React Query 类似，SWR 也提供了开发者工具来监控和调试数据获取行为。
• 灵活配置：可以通过配置选项自定义刷新策略、重试机制等，以适应不同的应用场景需求。
• 服务端渲染（SSR）兼容：SWR 支持服务器端渲染，可以在页面初次加载时预先填充缓存，从而加快客户端的首次渲染速度。
• 数据缓存：
  1. 自定义全局缓存：SWR 使用全局缓存共享数据，同时允许通过SWRConfig的provider选项自定义如何存储缓存。
  2. 修改缓存数据：提供mutate函数来修改缓存，包括清除所有缓存数据或更新特定缓存项。

参考文档：
如何使用React Query管理异步请求&数据
TanStackQuery v5
【深度对比】如何选择最适合的请求增强库
理解SWR