[TOC] > [home](https://tanstack.com/) ## 概述 React Query 是一个强大的数据获取库，用于在 React 应用中轻松管理异步数据。它帮助你更好地处理数据的获取、缓存、同步、更新等工作，减少了手动管理状态的复杂度。以下是 React Query 的基础使用教程。 ## 安装 ``` npm install @tanstack/react-query ``` ## 语法 React Query 的核心功能是通过 useQuery 钩子来获取异步数据。useQuery 需要两个参数： ``` 参数: queryKey：唯一的查询键（通常是 URL 或 API 路径） queryFn：返回一个 Promise 的异步函数 返回参数: isLoading: 是否正在加载数据 isError: 是否发生了错误 data: 成功获取的数据 error: 错误信息 isFetching: 数据是否正在后台重新获取 ``` ## 示例 ### 初始化 初始化 ``` import React from 'react'; import ReactDOM from 'react-dom'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import App from './App'; // 创建一个 React Query 客户端 const queryClient = new QueryClient(); ReactDOM.render( <QueryClientProvider client={queryClient}> <App /> </QueryClientProvider>, document.getElementById('root') ); ``` 使用 ``` import React from 'react'; import { useQuery } from '@tanstack/react-query'; // 异步获取数据的函数 const fetchData = async () => { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }; const App = () => { // 使用 useQuery 钩子 const { data, error, isLoading, isError } = useQuery(['data'], fetchData); if (isLoading) return <div>Loading...</div>; if (isError) return <div>Error: {error.message}</div>; return ( <div> <h1>Data:</h1> <pre>{JSON.stringify(data, null, 2)}</pre> </div> ); }; export default App; ``` ### 设置定时 ``` const { data, isLoading } = useQuery(['data'], fetchData, { staleTime: 60000, // 数据 60 秒内不会重新获取 }); ``` ### 缓存 ``` // 获取所有用户 const { data, isLoading } = useQuery(['users'], fetchUsers); // 获取特定用户的信息 const { data, isLoading } = useQuery(['user', userId], fetchUserById); ``` > 这样，React Query 会根据不同的查询键来缓存和管理数据。