一、导入使用
pnpm add @tanstack/react-query二、以往请求接口
import{useEffect,useState}from'react'import{fetchDate}from'../helper'import{List}from'../List'functionDemo(){const[data,setData]=useState([]);constinitialDate=async()=>{try{steDate(awaitfetchDate('people)}catch(err){console.error(err)}}useEffect(()=>{initialDate()},[]);return<List item={data}/>}缺点：
| 缺点 | 详细描述 | TanStack Query 如何解决 |
|---|---|---|
| 1. 冗余的状态管理（Loading/Error/Data） | 必须在组件内使用多个 useState 来分别跟踪数据 (data)、加载状态 (isLoading) 和错误状态 (isError/error)，导致代码繁琐且易错。 | “useQuery Hook 直接提供所需的所有状态，如 isLoading, isError, data, error 等，极大地简化了组件逻辑。” |
| 2. 缺乏智能缓存和数据过期机制 | 每次组件挂载或路由切换时都会触发重新请求，即使数据在短时间内并未改变，浪费带宽和用户时间。 | 强大的自动缓存机制，根据设置的过期时间（staleTime）快速返回缓存数据，并在后台按需更新，避免不必要的网络请求。 |
| 3. 难以保持数据的“新鲜度” | 切换浏览器标签页回来后，或者网络连接恢复后，您需要手动编写逻辑来检查并重新拉取数据，以确保用户看到的是最新数据。 | 默认内置了窗口重新聚焦（Refetch on Window Focus）和网络重连时自动重试功能，自动维护数据的时效性。 |
| 4. 全局数据共享复杂 | 多个组件需要使用相同数据时，必须通过 Props Driling 或 Redux 等全局状态管理库来实现共享，且缓存管理和异步操作的管理变得非常复杂。 | 通过**查询键（queryKey）**全局缓存数据，任何组件都可以轻松地通过相同的键访问和共享这份数据。 |
| 5. 实现乐观更新（Optimistic Updates）难度大 | 对于数据的增删改操作（Mutation），为了提升用户体验而实现的“乐观更新”（在服务器响应前更新 UI）非常复杂且容易引入 Bug。 | useMutation Hook 提供了清晰的生命周期回调，使得实现乐观更新、错误回滚等逻辑变得简单和安全。 |
三、使用useQuery
import{useQuery}from'@tanstack/react-query'import{fetchDate}from'../helper'import{List}from'../List'functionDemoWithQuery(){const{data,isLoading,// 自动管理加载状态isError,// 自动管理错误状态error// 错误对象}=useQuery({// 数据的唯一标识符，用于缓存queryKey:['peopleData'],// 实际执行数据获取的函数queryFn:()=>fetchData('people'),// (可选) 设置数据多久后变为“陈旧”（stale），默认为 0// staleTime: 1000 * 60 * 5, // 5分钟内数据被认为是“新鲜”的});if(isLoading){return<div>数据加载中...</div>}if(isError){// 错误信息可以直接从 error 对象中获取console.error(error);return<div>数据加载失败:{error.message}</div>}// 直接使用获取到的 datareturn<List item={data}/>}
)
