主要功能:
react-query (TanStack Query支持多种框架,当前文档仅描述react版)
主要用于管理异步数据获取、缓存、数据过期更新及异常处理、失败重试。适用于需要全面数据获取功能的大型应用
- 数据获取:
- 提供数据加载状态方便UI处理。
- 支持多种请求类型。
- 自动处理异常并返回对应的响应数据。
- 自带缓存机制:
- 数据获取成功自动缓存数据,减少不必要的网络请求。
- 提供 cacheTime 和 staleTime 配置项来控制缓存的有效期和数据的新鲜度。
- 数据缓存过期后自动后台刷新重新获取数据。
- 支持共享缓存,可多个组件共享一份接口数据缓存。
- 并发模式支持:确保在网络请求未完成时安全地卸载组件,避免内存泄漏和其他潜在问题
-
数据更新:
- 乐观更新:通过 useMutation Hook 支持创建、更新或删除资源的操作,实现乐观更新,即在请求完成前更新UI,先显示预期的结果,提升用户体验,如果请求失败则回滚到原始状态。
- 自动失效:在数据更新完成后,自动失效相关缓存并重新缓存新数据
- 窗口聚焦刷新:用户重新聚焦窗口时自动刷新数据
- 网络重连刷新:网络重新连接时自动刷新数据
- 轮询:通过refetchInterval定期刷新数据
- 手动触发请求:允许通过 manual 选项将请求设置为手动触发,配合 run 方法按需发起请求。
-
数据展示和交互功能:
- 无限滚动与分页:使用 useInfiniteQuery Hook 来实现无限滚动功能,简化分页逻辑的管理。
- 优雅处理异步数据加载及错误处理:与React Suspense集成,设置useQuery钩子的suspense选项为true
-
插件与扩展功能:
- react-query/devtools:提供了一个React DevTools面板,用于查看和管理React Query的缓存、请求历史和查询状态,帮助开发者清晰地观察每个请求的状态及其相关缓存信息。
- react-query/hydration:在服务器端渲染(SSR)应用程序中,可以自动提取数据并在客户端上进行缓存。这有助于减少客户端的加载时间,提升用户体验。
- 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 支持服务器端渲染,可以在页面初次加载时预先填充缓存,从而加快客户端的首次渲染速度。
-
数据缓存:
- 自定义全局缓存:SWR 使用全局缓存共享数据,同时允许通过SWRConfig的provider选项自定义如何存储缓存。
- 修改缓存数据:提供mutate函数来修改缓存,包括清除所有缓存数据或更新特定缓存项。
参考文档:
如何使用React Query管理异步请求&数据
TanStackQuery v5
【深度对比】如何选择最适合的请求增强库
理解SWR