核心内容摘要
DeerFlow业务场景：电商行业竞争情报AI采集方案
在 React Native (RN) 开发中你是否也曾被这些问题困扰**满屏的isLoading**每个页面都要手写一遍 Loading 和 Error 逻辑。
重复请求切个页面回来明明数据没变却又发起了一次昂贵的网络请求。
数据不同步在 A 页面改了用户信息回到 B 页面还是旧数据。
手动缓存难想做数据缓存结果写了一堆 Redux 代码维护起来像噩梦。
今天我们要聊聊TanStack Query (原名 React Query)。
它被誉为 React 生态中“丢失的数据获取层”能让你用最少的代码解决最复杂的网络优化问题。
为什么 RN 开发需要它很多人习惯把异步数据存在 Redux 或 Context 里。
但本质上Redux 是“全局状态管理”而网络数据是“服务器状态”。
服务器状态具有以下特点离线存储数据不在你的控制下随时可能过期。
异步获取需要通过异步 API 更新。
共享性多个组件可能同时依赖同一份数据。
React Query 正是为管理服务器状态而生的“智囊团”。
核心原理它在幕后做了什么React Query 的核心是一套智能缓存机制。
我们可以用“图书馆借书”来类比查询Query你向 React Query 索要数据。
缓存Cache它先看缓存里有没有。
如果有且数据“新鲜Fresh”直接给你不发请求。
失效Stale如果数据“陈旧Stale”它会在后台静默发起请求同时先给你旧数据垫底保证用户不看白屏。
同步Refetch新数据回来后自动替换缓存并通知组件重新渲染。
实战演练三步走战略
安装与初始化首先我们在 App 入口处包裹QueryClientProvider。
import{QueryClient,QueryClientProvider}fromtanstack/react-query;constqueryClientnewQueryClient();exportdefaultfunctionApp(){return(QueryClientProvider client{queryClient}MyNavigationStack//QueryClientProvider);}
获取数据useQuery告别useStateuseEffect的繁琐现在只需要一行代码import{useQuery}fromtanstack/react-query;constfetchUserasync(){constresawaitfetch(https://api.example.com/user);returnres.json();};functionProfile(){const{data,isLoading,isError,refetch}useQuery({queryKey:[user],// 缓存的唯一标识queryFn:fetchUser,// 异步请求函数});if(isLoading)returnLoadingSpinner/;if(isError)returnErrorMessage/;returnText{data.name}/Text;}
修改数据useMutation当你需要提交表单或删除数据时使用useMutationconstmutationuseMutation({mutationFn:updateUser,onSuccess:(){// 关键点数据改了通知对应的缓存失效触发自动刷新queryClient.invalidateQueries({queryKey:[user]});},});
RN 专属优化进阶在 React Native 中有几个技巧能让你的应用丝滑到飞起
窗口聚焦重新获取 (Focus Refetching)在 Web 端切回标签页会自动刷新。
在 RN 中我们需要结合focusManager监听 App 状态import{focusManager}fromtanstack/react-query;import{AppState}fromreact-native;focusManager.setEventListener((handleFocus){constsubscriptionAppState.addEventListener(change,(status){handleFocus(statusactive);});return()subscription.remove();});
离线缓存配合persistQueryClient可以将数据持久化到AsyncStorage中。
即使用户断网打开 App也能瞬间看到上次缓存的数据。
预加载 (Prefetching)当用户划过列表项时提前预加载详情页数据。
用户点击进入时详情页近乎“秒开”。
五、
总结为什么要选它功能传统方式 (useEffect)React Query缓存管理手写内存缓存/Redux自动管理支持过期配置数据同步困难需手动分发 Action自动失效并重新获取Loading状态每个页面手写 useState内置 isLoading, isFetching性能易产生多余渲染深度优化按需渲染核心箴言把复杂的状态同步交给 React Query把简单的 UI 逻辑留给自己。
如果你正在开发一款对性能和体验有追求的 RN 应用React Query 不是可选项而是必选项。
核心 API 深度解析掌控数据流
useQuery精细化查询这是最常用的 Hook但它的强大全在options配置里。
const{data}useQuery({queryKey:[user,userId],//
唯一标识userId 变化会自动触发重新请求queryFn:()fetchUser(userId),// --- 进阶配置 ---staleTime:1000*60*5,// 5分钟内数据被认为是“新鲜”的不触发后台刷新cacheTime:1000*60*30,// 缓存保留30分钟即使没有组件使用它enabled:!!userId,// 只有当 userId 存在时才发起请求串行请求利器retry:3,// 失败后自动重试3次select:(data)data.user,// 数据过滤组件只会在 data.user 变化时才重渲});Query Key 的重要性React Query 的缓存是基于 Key 的。
你可以把它想象成一个 Map 的 Key。
数组里的值如userId变化了它就会被视为一个新的查询。
useMutation副作用处理处理增删改操作它的核心在于生命周期回调。
constmutationuseMutation({mutationFn:(newTodo)axios.post(/todos,newTodo),onMutate:async(newTodo){// 【高级技巧乐观更新】// 在请求发送前手动修改缓存让 UI 先变如果失败再回滚},onSuccess:(data,variables,context){// 操作成功后的动作比如跳转页面},onError:(error,variables,context){// 错误处理比如弹出 Toast},onSettled:(){// 无论成功还是失败都会执行类似 finally}});
QueryClient全局指挥官queryClient不仅仅用于Provider它还是你手动干预缓存的“手术刀”。
invalidateQueries暴力失效。
告诉 React Query“那个 Key 的数据旧了去帮我重新拉一份。
”setQueryData手动写缓存。
不需要发请求直接更新本地存的数据。
getQueryData直接读取缓存中的数据同步操作。
必须要懂的“数据状态”在调试插件DevTools里你会看到数据在不同状态间流转。
理解这个闭环你就理解了 React Query 的灵魂Fresh (新鲜)数据是最新的直接用不发请求。
Stale (陈旧)数据可用但已经“过期”。
你用它的同时React Query 会悄悄在后台发请求同步。
Fetching (获取中)正在网络传输。
Inactive (非活跃)页面卸载了数据暂时没人用等着被垃圾回收GC。
给读者的避坑指南不要在queryFn里写逻辑保持它纯净只负责 fetch 数据。
**合理设置staleTime**RN 应用通常不需要实时性极高。
将staleTime设置为
分钟能显著降低服务器压力并提升 App 流畅度。
好的这份思维导图采用了 Markdown 格式逻辑清晰涵盖了从基础概念到进阶优化的所有重点。
你可以直接将这段代码贴到支持 Markdown 的编辑器如 Typora、Obsidian中或者直接作为公众号文章的
总结大纲。
TanStack Query (React Query) 核心知识体系
核心定位本质异步状态管理利器Async State Manager。
目标将“服务器状态”与“客户端状态”分离。
RN 痛点解决自动缓存、数据同步、离线支持、减少无效请求。
三大基石 APIuseQuery(读)queryKey: 缓存的唯一指纹数组格式。
queryFn: 必须返回 Promise 的异步函数。
staleTime: 数据从“新鲜”变“陈旧”的时间。
cacheTime: 内存缓存保留时间默认 5 分钟。
enabled: 控制请求开关实现串行请求、按需请求。
useMutation(写)mutationFn: 处理 POST/PUT/DELETE。
生命周期onMutate乐观更新、onSuccess、onError、onSettled。
QueryClient(管)invalidateQueries: 主动标记缓存失效触发静默刷新。
setQueryData: 直接手动更新缓存内容。
prefetchQuery: 预加载提升页面切换速度。
缓存生命周期 (States)Fresh (新鲜): 直接读取缓存不触发网络请求。
Stale (陈旧): 先给缓存数据同时后台静默发起请求同步。
Fetching (获取中): 正在进行网络请求。
Inactive (未激活): 组件已卸载数据等待 GC垃圾回收。
RN 专属优化点Focus Refetch: 配合AppState实现 App 切回前台时自动刷新。
Online Manager: 监听网络状态断网重连后自动重试。
Persistence: 结合AsyncStorage实现数据离线持久化。
性能秘籍Select: 在 Hook 层进行数据过滤减少组件不必要的重绘。
Placeholder Data: 使用占位数据如旧数据避免全屏 Loading。
Optimistic Updates: 乐观更新让操作在网络返回前就完成 UI 变化。
React Query 的精髓不在于如何发起请求而在于它如何通过一套优雅的协议让开发者不再关心‘什么时候发请求’和‘怎么同步数据’。
掌握了它你的 RN 开发效率将提升一个量级。