用途:TanStack Query(React Query)用于在 React 中管理服务器状态,提供数据获取、缓存与同步能力。
主要能力:自动缓存与后台更新;智能重新获取策略;变更(mutations)配合乐观更新与缓存失效;内置开发工具;完整 TypeScript 支持。
安装:npm install @tanstack/react-query;npm install --save-dev @tanstack/react-query-devtools。
使用方式:通过 QueryClient 与 QueryClientProvider 配置默认选项(如 staleTime、cacheTime、refetchOnWindowFocus),并挂载 ReactQueryDevtools。用 useQuery 读取数据,支持带参数查询与依赖查询(enabled 控制);用 useMutation 提交数据,在 onSuccess 中调用 queryClient.invalidateQueries 失效并重新获取;乐观更新通过 onMutate 取消请求、快照旧值、setQueryData 更新,onError 回滚,onSettled 重新获取。分页可用 keepPreviousData 保留旧数据;无限查询使用 useInfiniteQuery 与 getNextPageParam、initialPageParam。缓存操作包括 invalidateQueries、removeQueries、resetQueries、setQueryData、getQueryData、prefetchQuery。
适用场景:React 应用中的服务器状态管理、列表与详情数据获取、表单提交后的缓存同步、分页与无限滚动。
限制:资料未提供收费、价格、平台支持范围与性能效果等具体信息;示例中的 API 路径与数据结构仅为演示,需按实际后端调整。