React Query 的缓存机制是如何工作的，如何配置和管理缓存？ - 面试题

React Query 的缓存机制是其核心特性之一，它通过以下方式工作：

缓存工作原理

查询键（Query Keys）：React Query 使用查询键（通常是字符串或数组）作为缓存的唯一标识符。相同查询键的请求会共享缓存数据。
缓存存储：查询结果存储在内存中，按查询键组织。
缓存状态：每个缓存项包含数据、时间戳、状态（新鲜/过期/失效）等信息。
缓存生命周期：
- 新鲜期（Fresh）：数据最近获取，无需重新请求
- 过期期（Stale）：数据超过 staleTime，但未超过 gcTime
- 失效期（Invalidated）：数据被手动标记为失效
- 垃圾回收：超过 gcTime 的数据会被从缓存中移除

缓存配置

全局配置：通过 QueryClient 配置默认缓存行为

javascript
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5分钟
      cacheTime: 10 * 60 * 1000, // 10分钟
      retry: 3,
    },
  },
});

单个查询配置：在 useQuery 中覆盖默认配置

javascript
const { data } = useQuery('todos', fetchTodos, {
  staleTime: 10 * 60 * 1000,
  cacheTime: 30 * 60 * 1000,
  refetchOnWindowFocus: false,
});

缓存管理

数据失效：手动标记查询为失效，触发重新获取
```
javascript
queryClient.invalidateQueries('todos');
```

数据更新：直接更新缓存中的数据

javascript
queryClient.setQueryData('todos', oldTodos => [...oldTodos, newTodo]);

数据预取：提前获取可能需要的数据

javascript
queryClient.prefetchQuery('user-1', () => fetchUser(1));

缓存清除：从缓存中移除数据

javascript
queryClient.removeQueries('todos');

缓存重置：清除所有缓存数据
```
javascript
queryClient.resetQueries();
```

缓存策略最佳实践

根据数据的更新频率设置合适的 staleTime
对于频繁访问但不常变化的数据，增加 cacheTime
利用预取提升用户体验
在 mutations 后正确处理相关查询的失效
使用查询键的层次结构（如 ['users', userId, 'todos']）实现更精细的缓存控制

通过合理配置和管理缓存，可以显著提高应用性能，减少不必要的网络请求，同时确保数据的新鲜度。