别再用 useEffect 拿数据了！React Query：RN 异步状态管理的终极方案|key|query|react|rn|内存|服务器

在 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）：新数据回来后，自动替换缓存并通知组件重新渲染。

三、实战演练：三步走战略 1. 安装与初始化

首先，我们在 App 入口处包裹QueryClientProvider。

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

 const queryClient = new QueryClient();

 export default function App() {
  return (
      
     
 QueryClientProvider>
  );
}

2. 获取数据（useQuery）

告别useState+useEffect的繁琐，现在只需要一行代码：

import { useQuery } from'@tanstack/react-query';

 const fetchUser = async () => {
const res = await fetch('https://api.example.com/user');
return res.json();
};

 function Profile() {
const { data, isLoading, isError, refetch } = useQuery({
    queryKey: ['user'], // 缓存的唯一标识
    queryFn: fetchUser, // 异步请求函数
  });

 if (isLoading) return;
if (isError) return;

 return{data.name} 
 Text>;
}

3. 修改数据（useMutation）

当你需要提交表单或删除数据时，使用useMutation：

const mutation = useMutation({
  mutationFn: updateUser,
  onSuccess: () => {
    // 关键点：数据改了，通知对应的缓存失效，触发自动刷新
    queryClient.invalidateQueries({ queryKey: ['user'] });
  },
});

四、 RN 专属优化进阶

在 React Native 中，有几个技巧能让你的应用丝滑到飞起：

1. 窗口聚焦重新获取 (Focus Refetching)

在 Web 端，切回标签页会自动刷新。在 RN 中，我们需要结合focusManager监听 App 状态：

import { focusManager } from '@tanstack/react-query';
import { AppState } from 'react-native';

 focusManager.setEventListener((handleFocus) => {
  const subscription = AppState.addEventListener('change', (status) => {
    handleFocus(status === 'active');
  });
  return () => subscription.remove();
});

2. 离线缓存

配合persistQueryClient，可以将数据持久化到AsyncStorage中。即使用户断网打开 App，也能瞬间看到上次缓存的数据。

3. 预加载 (Prefetching)

当用户划过列表项时，提前预加载详情页数据。用户点击进入时，详情页近乎“秒开”。

五、总结：为什么要选它？

功能

传统方式 (useEffect)

React Query

缓存管理

手写内存缓存/Redux

自动管理，支持过期配置

数据同步

困难，需手动分发 Action

自动失效并重新获取

Loading状态

每个页面手写 useState

内置 isLoading, isFetching

性能

易产生多余渲染

深度优化，按需渲染

核心箴言：把复杂的状态同步交给 React Query，把简单的 UI 逻辑留给自己。

如果你正在开发一款对性能和体验有追求的 RN 应用，React Query 不是可选项，而是必选项。

六、核心 API 深度解析：掌控数据流 1.useQuery：精细化查询

这是最常用的 Hook，但它的强大全在options配置里。

const { data } = useQuery({
queryKey: ['user', userId], // 1. 唯一标识，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）变化了，它就会被视为一个新的查询。

2.useMutation：副作用处理

处理增删改操作，它的核心在于生命周期回调。

const mutation = useMutation({
mutationFn: (newTodo) => axios.post('/todos', newTodo),

 onMutate: async (newTodo) => {
    // 【高级技巧：乐观更新】
    // 在请求发送前，手动修改缓存，让 UI 先变，如果失败再回滚
  },
onSuccess: (data, variables, context) => {
    // 操作成功后的动作，比如跳转页面
  },
onError: (error, variables, context) => {
    // 错误处理，比如弹出 Toast
  },
onSettled: () => {
    // 无论成功还是失败都会执行，类似 finally
  }
});