React Query 是一个强大的数据同步库，用于在 React 应用中处理数据获取、缓存、同步以及更新。与传统的 React 状态管理解决方案（如 Redux）相比，React Query 提供了一种更简单、更有效的方式来处理远程数据。 ### 主要特性： 1. **自动重试：**数据获取失败时自动重试。 2. **缓存和自动失效：**对数据进行缓存，并在需要时自动失效，例如重新获取数据。 3. **后台数据同步：**即使数据在后台，也可以配置应用以继续获取数据。 4. **查询折叠：**自动将同时发生的多个相同查询合并为单个网络请求。 5. **突变（Mutations）：**处理数据创建、更新和删除等操作并重新获取相关数据。 6. **分页和无限滚动：**提供了钩子和工具来帮助实现分页和无限滚动行为。 7. **开箱即用的开发者工具：**易于调试和观察数据查询的状态。 ### 基本使用： 1. **安装：** 使用 NPM 或 Yarn 安装 React Query。 ~~~ 1npm install react-query 2# 或 3yarn add react-query ~~~ 2. **设置 React Query 提供者（Provider）：** 通常在应用的最顶层添加 `QueryClientProvider` 并传递一个 `QueryClient` 实例。 ~~~ 1import { QueryClient, QueryClientProvider } from 'react-query'; 2 3const queryClient = new QueryClient(); 4 5function App() { 6 return ( 7 <QueryClientProvider client={queryClient}> 8 {/* 应用的其他部分 */} 9 </QueryClientProvider> 10 ); 11} ~~~ 3. **数据获取：** 在组件中使用 `useQuery` 钩子来获取数据。 ~~~ 1import { useQuery } from 'react-query'; 2 3function Todos() { 4 const { isLoading, error, data } = useQuery('todos', fetchTodos); 5 6 if (isLoading) return 'Loading...'; 7 if (error) return 'An error has occurred: ' + error.message; 8 9 return ( 10 <ul> 11 {data.map(todo => ( 12 <li key={todo.id}>{todo.title}</li> 13 ))} 14 </ul> 15 ); 16} 17 18async function fetchTodos() { 19 const response = await fetch('/api/todos'); 20 return response.json(); 21} ~~~ `useQuery` 的第一个参数是这个查询的唯一键，可以是字符串或数组。 第二个参数是一个返回Promise的函数，它负责实际的数据获取。 4. **执行突变：** 使用 `useMutation` 钩子来执行数据创建、更新或删除操作。 ~~~ 1import { useMutation, useQueryClient } from 'react-query'; 2 3function AddTodo() { 4 const queryClient = useQueryClient(); 5 const mutation = useMutation(addTodo, { 6 onSuccess: () => { 7 // 重新获取todos查询的数据 8 queryClient.invalidateQueries('todos'); 9 }, 10 }); 11 12 function handleAddTodo() { 13 mutation.mutate({ title: 'Do laundry' }); 14 } 15 16 return ( 17 <button onClick={handleAddTodo}> 18 {mutation.isLoading ? 'Adding...' : 'Add Todo'} 19 </button> 20 ); 21} 22 23async function addTodo(todo) { 24 const response = await fetch('/api/todos', { 25 method: 'POST', 26 body: JSON.stringify(todo), 27 }); 28 return response.json(); 29} ~~~ `useMutation` 的第一个参数是执行突变的函数，第二个参数是一个包含各种事件回调的对象（例如 `onSuccess` 或 `onError`）。 这些是 React Query 的基础使用案例。对于更复杂的功能，如数据预取、Webpack 模块联邦中的共享缓存等，React Query 提供了丰富的 API 和钩子来帮助你完成任务。建议查看官方文档以了解更详尽的用法和配置选项。