200React-Query基础

一、导入使用

js 复制代码

pnpm add @tanstack/react-query

二、以往请求接口

js 复制代码

import {useEffect, useState} from 'react'
import { fetchDate } from '../helper'
import { List} from '../List'

function Demo(){
	const [data, setData] = useState([]);
	const initialDate = async() =>{
	try {
		steDate(await fetchDate('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

js 复制代码

import { useQuery } from '@tanstack/react-query'
import { fetchDate } from '../helper'
import { List } from '../List'



function DemoWithQuery() {
  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>
  }

  // 直接使用获取到的 data
  return <List item={data} />
}