React Query实战：从基础到高级应用-优快云博客

React Query实战：从基础到高级应用

【免费下载链接】query 项目地址: https://gitcode.com/gh_mirrors/query13/query

本文全面探讨了React Query的核心功能与应用实践，从基础的useQuery和useMutation Hook使用指南开始，详细解析了数据查询和变更操作的生命周期管理。文章深入介绍了错误处理与重试机制的最佳实践，包括全局配置、条件重试策略和指数退避算法。进一步探讨了依赖查询与并行查询两种高效数据获取模式，通过实际代码示例展示了如何实现多级数据依赖和并发请求优化。最后涵盖了性能优化技巧、缓存策略和开发工具集成，为开发者提供从入门到精通的完整学习路径。

React Query基础Hook使用指南

React Query作为现代React应用中最强大的数据管理库之一，其核心在于提供了一系列简洁而强大的Hook，让开发者能够轻松处理异步数据的状态管理。本文将深入探讨React Query中最核心的两个Hook：useQuery和useMutation，通过详细的代码示例和最佳实践，帮助你掌握这些基础Hook的使用技巧。

useQuery：数据查询的核心

useQuery是React Query中最基础也是最重要的Hook，用于从服务器获取数据并管理其状态。它提供了完整的生命周期管理，包括加载状态、错误处理、缓存机制和自动重试等功能。

基本用法

import { useQuery } from '@tanstack/react-query'

function UserProfile({ userId }) {
  const { data, error, isLoading, isError } = useQuery({
    queryKey: ['user', userId],
    queryFn: async () => {
      const response = await fetch(`/api/users/${userId}`)
      if (!response.ok) {
        throw new Error('Failed to fetch user')
      }
      return response.json()
    },
    staleTime: 5 * 60 * 1000, // 5分钟
    retry: 3,
  })

  if (isLoading) return <div>Loading...</div>
  if (isError) return <div>Error: {error.message}</div>

  return (
    <div>
      <h1>{data.name}</h1>
      <p>Email: {data.email}</p>
    </div>
  )
}

关键配置选项详解

useQuery接受丰富的配置选项，让开发者能够精细控制查询行为：

选项	类型	默认值	描述
`queryKey`	`unknown[]`	必填	查询的唯一标识符，用于缓存管理
`queryFn`	`Function`	必填	执行数据获取的异步函数
`enabled`	`boolean`	`true`	控制查询是否自动执行
`staleTime`	`number`	`0`	数据过期时间（毫秒）
`gcTime`	`number`	`300000`	垃圾回收时间（5分钟）
`retry`	`boolean\\|number\\|Function`	`3`	失败重试策略
`refetchOnWindowFocus`	`boolean`	`true`	窗口聚焦时重新获取

状态管理流程图

mermaid

useMutation：数据变更的操作

useMutation用于处理数据的创建、更新和删除操作，它提供了乐观更新、错误回滚和自动缓存更新等高级功能。

基本用法

import { useMutation, useQueryClient } from '@tanstack/react-query'

function AddUserForm() {
  const queryClient = useQueryClient()
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')

  const addUserMutation = useMutation({
    mutationFn: async (newUser) => {
      const response = await fetch('/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newUser),
      })
      if (!response.ok) {
        throw new Error('Failed to add user')
      }
      return response.json()
    },
    onSuccess: (data) => {
      // 成功后的处理
      queryClient.invalidateQueries({ queryKey: ['users'] })
      setName('')
      setEmail('')
    },
    onError: (error) => {
      // 错误处理
      console.error('添加用户失败:', error)
    },
  })

  const handleSubmit = (e) => {
    e.preventDefault()
    addUserMutation.mutate({ name, email })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="姓名"
      />
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="邮箱"
      />
      <button type="submit" disabled={addUserMutation.isPending}>
        {addUserMutation.isPending ? '添加中...' : '添加用户'}
      </button>
    </form>
  )
}

乐观更新实现

乐观更新是useMutation的强大特性，它可以在请求发送前就更新UI，提供更好的用户体验：

const updateUserMutation = useMutation({
  mutationFn: updateUserApi,
  onMutate: async (newUser) => {
    // 取消任何正在进行的重获取，避免覆盖我们的乐观更新
    await queryClient.cancelQueries({ queryKey: ['user', newUser.id] })
    
    // 保存当前数据用于回滚
    const previousUser = queryClient.getQueryData(['user', newUser.id])
    
    // 乐观更新
    queryClient.setQueryData(['user', newUser.id], newUser)
    
    return { previousUser }
  },
  onError: (err, newUser, context) => {
    // 发生错误时回滚到之前的状态
    queryClient.setQueryData(['user', newUser.id], context.previousUser)
  },
  onSettled: () => {
    // 无论成功或失败，都重新获取确保数据最新
    queryClient.invalidateQueries({ queryKey: ['users'] })
  },
})

高级特性与最佳实践

1. 依赖查询

通过enabled选项实现查询之间的依赖关系：

function UserDashboard({ userId }) {
  // 先获取用户基本信息
  const { data: user } = useQuery({
    queryKey: ['user', userId],
    queryFn: fetchUser,
  })

  // 依赖用户信息的查询
  const { data: projects } = useQuery({
    queryKey: ['projects', userId],
    queryFn: fetchUserProjects,
    enabled: !!user, // 只有用户信息加载完成后才执行
  })

  // 进一步依赖的查询
  const { data: recentActivity } = useQuery({
    queryKey: ['activity', userId],
    queryFn: fetchRecentActivity,
    enabled: !!projects, // 只有项目信息加载完成后才执行
  })
}

2. 查询取消

React Query支持请求取消，避免组件卸载后仍然执行不必要的请求：

const fetchUserWithCancel = async ({ signal }) => {
  const response = await fetch(`/api/users/${userId}`, { signal })
  if (!response.ok) {
    throw new Error('Failed to fetch user')
  }
  return response.json()
}

const { data } = useQuery({
  queryKey: ['user', userId],
  queryFn: ({ signal }) => fetchUserWithCancel({ signal }),
})

3. 分页查询

实现分页功能时，可以保持之前页面的数据缓存：

function UserList() {
  const [page, setPage] = useState(1)
  
  const { data, isLoading, isPreviousData } = useQuery({
    queryKey: ['users', page],
    queryFn: () => fetchUsers(page),
    keepPreviousData: true, // 保持之前页面的数据
  })

  return (
    <div>
      {isLoading && !isPreviousData ? (
        <div>Loading...</div>
      ) : (
        <div>
          {data.users.map(user => (
            <div key={user.id}>{user.name}</div>
          ))}
        </div>
      )}
      <button 
        onClick={() => setPage(old => Math.max(old - 1, 1))}
        disabled={page === 1}
      >
        上一页
      </button>
      <button 
        onClick={() => setPage(old => old + 1)}
        disabled={isPreviousData || !data?.hasMore}
      >
        下一页
      </button>
    </div>
  )
}

性能优化技巧

1. 选择性重渲染

通过notifyOnChangeProps减少不必要的重渲染：

const { data } = useQuery({
  queryKey: ['user', userId],
  queryFn: fetchUser,
  notifyOnChangeProps: ['data'], // 只有data变化时才重渲染
})

2. 数据转换

使用select选项进行数据转换，避免在组件中处理数据：

const { data: userNames } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  select: (users) => users.map(user => user.name),
})

3. 预加载数据

利用Query Client进行数据预加载：

const queryClient = useQueryClient()

// 预加载用户数据
const prefetchUser = async (userId) => {
  await queryClient.prefetchQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
  })
}

// 在需要的时候调用
prefetchUser(123)

错误处理与调试

全局错误处理

配置Query Client实现全局错误处理：

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: (failureCount, error) => {
        if (error.status === 404) return false
        return failureCount < 3
      },
      onError: (error) => {
        // 全局错误处理逻辑
        console.error('Query Error:', error)
      },
    },
    mutations: {
      onError: (error) => {
        // 全局Mutation错误处理
        console.error('Mutation Error:', error)
      },
    },
  },
})

开发工具集成

React Query Devtools提供了强大的调试能力：

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用组件 */}
      <MyApp />
      
      {/* 开发工具 */}
      <ReactQueryDevtools 
        initialIsOpen={false} 
        position="bottom-right" 
      />
    </QueryClientProvider>
  )
}

通过掌握这些基础Hook的使用技巧，你将能够构建出高效、健壮的React应用。React Query的强大之处在于其简洁的API设计和丰富的功能特性，让开发者能够专注于业务逻辑而不是复杂的状态管理。

查询与变异的完整生命周期

在React Query中，查询（Query）和变异（Mutation）是数据管理的两个核心概念，它们各自拥有完整的生命周期状态机。深入理解这些生命周期状态对于构建健壮的应用程序至关重要。

查询生命周期状态

React Query的查询生命周期包含三个主要状态和两个获取状态：

mermaid

查询状态详解

状态	描述	典型场景
`pending`	数据正在获取中	首次加载、手动刷新
`success`	数据获取成功	正常数据展示
`error`	数据获取失败	网络错误、服务器错误

获取状态详解

获取状态	描述	与查询状态的关系
`idle`	未进行任何获取操作	可与任何查询状态共存
`fetching`	正在获取数据	通常与`pending`状态同时出现

变异生命周期状态

变异操作的生命周期状态与查询有所不同，专门针对数据修改操作设计：

mermaid

变异状态详解

状态	描述	典型场景
`idle`	变异尚未执行	初始状态，等待触发
`pending`	变异正在执行	数据提交过程中
`success`	变异执行成功	数据更新完成
`error`	变异执行失败	提交失败，需要错误处理

生命周期钩子与事件

React Query提供了丰富的生命周期钩子，允许开发者在不同阶段执行自定义逻辑：

// 查询生命周期配置示例
const { data, status, fetchStatus } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
  // 生命周期配置
  retry: 3, // 失败时重试3次
  retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
  staleTime: 5 * 60 * 1000, // 5分钟缓存时间
  gcTime: 10 * 60 * 1000, // 10分钟垃圾回收时间
})

// 变异生命周期配置示例
const mutation = useMutation({
  mutationFn: addTodo,
  onMutate: async (newTodo) => {
    // 变异开始前的乐观更新
    await queryClient.cancelQueries({ queryKey: ['todos'] })
    const previousTodos = queryClient.getQueryData(['todos'])
    queryClient.setQueryData(['todos'], (old) => [...old, newTodo])
    return { previousTodos }
  },
  onError: (err, newTodo, context) => {
    // 错误处理：回滚乐观更新
    queryClient.setQueryData(['todos'], context.previousTodos)
  },
  onSettled: () => {
    // 无论成功失败都会执行：重新获取最新数据
    queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})

状态转换与数据流

理解状态转换的触发条件对于优化应用性能至关重要：

查询状态转换触发器

转换	触发条件	影响
idle → pending	组件挂载、手动refetch	开始数据获取
pending → success	数据获取成功	更新缓存，渲染数据
pending → error	数据获取失败	记录错误，可能重试
success → pending	数据过期、手动刷新	后台重新验证

变异状态转换触发器

转换	触发条件	影响
idle → pending	调用mutate方法	开始执行变异
pending → success	变异执行成功	更新相关查询数据
pending → error	变异执行失败	触发错误处理逻辑

实战：完整的Todo应用示例

下面是一个展示完整生命周期的Todo应用示例：

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'

function TodoApp() {
  const queryClient = useQueryClient()
  
  // 查询：获取待办事项列表
  const { data: todos, status, error, isFetching } = useQuery({
    queryKey: ['todos'],
    queryFn: async () => {
      const response = await fetch('/api/todos')
      if (!response.ok) throw new Error('获取待办事项失败')
      return response.json()
    },
    // 配置生命周期行为
    staleTime: 1000 * 60 * 5, // 5分钟内不重新获取
    retry: 2, // 失败时重试2次
  })

  // 变异：添加新待办事项
  const addTodoMutation = useMutation({
    mutationFn: async (newTodo: string) => {
      const response = await fetch('/api/todos', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text: newTodo })
      })
      if (!response.ok) throw new Error('添加待办事项失败')
      return response.json()
    },
    // 生命周期钩子
    onSuccess: () => {
      // 成功时使待办事项列表缓存失效
      queryClient.invalidateQueries({ queryKey: ['todos'] })
    },
    onError: (error) => {
      console.error('添加待办事项失败:', error)
    }
  })

  // 根据状态渲染不同UI
  const renderContent = () => {
    switch (status) {
      case 'pending':
        return <div>加载中...</div>
      case 'error':
        return <div>错误: {error.message}</div>
      case 'success':
        return (
          <div>
            <h2>待办事项列表</h2>
            <ul>
              {todos.map(todo => (
                <li key={todo.id}>{todo.text}</li>
              ))}
            </ul>
            {isFetching && <div>后台更新中...</div>}
          </div>
        )
      default:
        return null
    }
  }

  return (
    <div>
      <h1>待办事项应用</h1>
      {renderContent()}
      
      {/* 添加新待办事项的表单 */}
      <form onSubmit={(e) => {
        e.preventDefault()
        const formData = new FormData(e.target as HTMLFormElement)
        const newTodo = formData.get('todo') as string
        addTodoMutation.mutate(newTodo)
      }}>
        <input name="todo" placeholder="输入新待办事项" />
        <button 
          type="submit" 
          disabled={addTodoMutation.status === 'pending'}
        >
          {addTodoMutation.status === 'pending' ? '添加中...' : '添加'}
        </button>
      </form>

      {/* 显示变异状态 */}
      {addTodoMutation.status === 'error' && (
        <div style={{ color: 'red' }}>
          添加失败: {addTodoMutation.error.message}
        </div>
      )}
      {addTodoMutation.status === 'success' && (
        <div style={{ color: 'green' }}>添加成功!</div>
      )}
    </div>
  )
}

生命周期最佳实践

合理配置缓存时间：根据数据更新频率设置适当的staleTime和gcTime
使用乐观更新：在变异中使用onMutate实现即时UI反馈
错误处理策略：根据业务需求配置重试逻辑和错误回退机制
状态依赖渲染：根据status和fetchStatus精确控制UI渲染
资源清理：在组件卸载时适当清理查询和变异资源

通过深入理解React Query的完整生命周期，开发者可以构建出更加健壮、响应迅速的数据驱动应用，有效管理数据状态并提供优秀的用户体验。

错误处理与重试机制最佳实践

在现代Web应用开发中，网络请求的稳定性和可靠性至关重要。React Query提供了强大的错误处理和自动重试机制，帮助开发者构建更加健壮的应用。本文将深入探讨React Query的错误处理与重试机制的最佳实践。

错误处理基础

React Query通过useQuery和useMutation的返回对象提供了丰富的错误状态信息：

const { data, error, isError, isLoading } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
})

if (isError) {
  return <div>Error: {error.message}</div>
}

重试机制详解

React Query内置了智能的重试机制，默认情况下会在请求失败时自动重试3次。重试行为可以通过多种方式进行配置：

1. 全局重试配置

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 3, // 最多重试3次
      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
    },
  },
})

2. 查询级别重试配置

useQuery({
  queryKey: ['user', userId],
  queryFn: fetchUser,
  retry: 5, // 该查询最多重试5次
  retryDelay: 1000, // 每次重试间隔1秒
})

3. 条件重试

useQuery({
  queryKey: ['sensitive-data'],
  queryFn: fetchSensitiveData,
  retry: (failureCount, error) => {
    // 只在网络错误时重试，不在认证错误时重试
    if (error.statusCode === 401) {
      return false
    }
    return failureCount < 3
  },
})

重试延迟策略

React Query使用指数退避算法来计算重试延迟，这有助于避免服务器过载：

mermaid

延迟时间计算公式：

第1次重试：1000ms
第2次重试：2000ms
第3次重试：4000ms
最大延迟：30000ms

错误边界处理

结合React Error Boundary可以创建更完善的错误处理方案：

class QueryErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError(error) {
    return { hasError: true }
  }

  render() {
    if (this.state.hasError) {
      return <FallbackComponent />
    }
    return this.props.children
  }
}

高级错误处理模式

1. 错误类型区分处理

const { error, isError } = useQuery({
  queryKey: ['data'],
  queryFn: fetchData,
})

useEffect(() => {
  if (isError) {
    if (error.statusCode === 404) {
      // 处理未找到资源
    } else if (error.statusCode === 500) {
      // 处理服务器错误
    } else if (error.message.includes('network')) {
      // 处理网络错误
    }
  }
}, [error, isError])

2. 自定义重试逻辑

const customRetryHandler = (failureCount, error) => {
  // 对特定错误类型不重试
  if (error.code === 'CUSTOM_ERROR_CODE') {
    return false
  }
  
  // 根据错误严重程度决定重试次数
  if (error.severity === 'high') {
    return failureCount < 2
  }
  
  return failureCount < 5
}

监控和日志记录

在生产环境中，错误监控至关重要：

useQuery({
  queryKey: ['important-data'],
  queryFn: fetchImportantData,
  onError: (error) => {
    // 记录到错误监控服务
    logErrorToService(error)
    
    // 发送到分析平台
    analytics.track('query_error', {
      queryKey: 'important-data',
      error: error.message,
    })
  },
})

最佳实践总结表

场景	推荐配置	说明
关键数据	`retry: 5`, `retryDelay: 指数退避`	确保重要数据的获取
非关键数据	`retry: 1-2`	避免不必要的重试
认证相关	`retry: false`	认证错误不应重试
网络不稳定	`retry: true`, 自定义延迟	适应不稳定的网络环境
服务器过载	增加延迟时间	减轻服务器压力

实战示例：完整的错误处理方案

const useRobustQuery = (queryKey, queryFn, options = {}) => {
  return useQuery({
    queryKey,
    queryFn,
    retry: (failureCount, error) => {
      // 不重试认证错误
      if (error.statusCode === 401 || error.statusCode === 403) {
        return false
      }
      // 不重试客户端错误
      if (error.statusCode >= 400 && error.statusCode < 500) {
        return false
      }
      // 服务器错误最多重试3次
      return failureCount < 3
    },
    retryDelay: (attemptIndex) => {
      // 自定义延迟策略
      const baseDelay = 1000
      const maxDelay = 10000
      return Math.min(baseDelay * Math.pow(2, attemptIndex), maxDelay)
    },
    onError: (error) => {
      // 错误监控和日志
      console.error(`Query ${queryKey} failed:`, error)
      // 可以在这里集成错误报告服务
    },
    ...options,
  })
}

通过合理配置错误处理和重试机制，可以显著提升应用的稳定性和用户体验。记住，良好的错误处理不仅仅是捕获错误，更重要的是为用户提供有意义的反馈和恢复路径。

依赖查询与并行查询模式

在现代Web应用开发中，高效的数据获取策略是提升用户体验的关键。React Query提供了两种强大的查询模式：依赖查询和并行查询，它们分别解决了不同的数据获取场景需求。本文将深入探讨这两种模式的工作原理、最佳实践以及实际应用案例。

依赖查询模式

依赖查询（Dependent Queries）是指一个查询的执行依赖于另一个查询的结果。这种模式在处理层级数据或需要顺序获取数据的场景中非常有用。

基本实现原理

依赖查询的核心是通过enabled选项来控制查询的启用状态。当enabled为false时，查询不会自动执行，只有在条件满足时才会触发。

// 用户基本信息查询
const { data: user } = useQuery({
  queryKey: ['user', userId],
  queryFn: fetchUser,
})

// 依赖查询：用户详情（需要先获取用户基本信息）
const { data: userDetails } = useQuery({
  queryKey: ['userDetails', userId],
  queryFn: fetchUserDetails,
  enabled: !!user, // 只有当用户信息存在时才执行
})

依赖查询的状态流程图

mermaid

高级依赖查询模式

对于复杂的依赖关系，可以使用更精细的控制策略：

// 多级依赖查询示例
const { data: project } = useQuery({
  queryKey: ['project', projectId],
  queryFn: fetchProject,
})

const { data: teamMembers } = useQuery({
  queryKey: ['teamMembers', projectId],
  queryFn: fetchTeamMembers,
  enabled: !!project && project.status === 'active',
})

const { data: projectStats } = useQuery({
  queryKey: ['projectStats', projectId],
  queryFn: fetchProjectStats,
  enabled: !!teamMembers && teamMembers.length > 0,
})

依赖查询的最佳实践

明确的依赖条件：确保依赖条件清晰明确，避免复杂的逻辑判断
错误处理：为每个依赖查询单独处理错误状态
加载状态管理：合理显示各级查询的加载状态
缓存策略：利用React Query的缓存机制减少重复请求

并行查询模式

并行查询（Parallel Queries）允许同时执行多个独立的查询，显著提升数据获取效率。React Query提供了useQueries Hook来处理这种场景。

基本并行查询实现

// 使用useQueries进行并行查询
const results = useQueries({
  queries: [
    {
      queryKey: ['user', userId],
      queryFn: fetchUser,
    },
    {
      queryKey: ['posts', userId],
      queryFn: fetchUserPosts,
    },
    {
      queryKey: ['notifications', userId],
      queryFn: fetchNotifications,
    }
  ]
})

// 解构各个查询结果
const [userResult, postsResult, notificationsResult] = results

并行查询性能对比

查询方式	执行时间	资源占用	适用场景
顺序查询	较长	低	数据有依赖关系
并行查询	较短	高	数据相互独立
批量查询	中等	中等	相关数据组

动态并行查询

对于动态数量的并行查询，可以使用map函数生成查询配置：

const userIds = [1, 2, 3, 4, 5]

const userQueries = useQueries({
  queries: userIds.map(id => ({
    queryKey: ['user', id],
    queryFn: () => fetchUserById(id),
  }))
})

// 处理查询结果
const allUsers = userQueries.map(query => query.data).filter(Boolean)

并行查询的优化策略

请求合并：对于相同端点的查询，考虑使用批量API
错误隔离：单个查询失败不应影响其他查询
进度显示：显示整体加载进度而非单个查询状态
资源限制：控制并行查询数量避免服务器过载

混合模式：依赖与并行结合

在实际应用中，经常需要将依赖查询和并行查询结合使用：

// 首先获取项目列表
const { data: projects } = useQuery({
  queryKey: ['projects'],
  queryFn: fetchProjects,
})

// 然后并行获取每个项目的详细信息
const projectDetailsQueries = useQueries({
  queries: (projects || []).map(project => ({
    queryKey: ['projectDetails', project.id],
    queryFn: () => fetchProjectDetails(project.id),
    enabled: !!projects, // 依赖条件
  }))
})

// 同时获取用户信息（并行）
const { data: currentUser } = useQuery({
  queryKey: ['currentUser'],
  queryFn: fetchCurrentUser,
})

混合模式执行序列

mermaid

高级模式与最佳实践

查询取消与竞态处理

在处理依赖和并行查询时，需要考虑查询取消机制：

const [selectedProjectId, setSelectedProjectId] = useState(null)

const { data: project } = useQuery({
  queryKey: ['project', selectedProjectId],
  queryFn: fetchProject,
  enabled: !!selectedProjectId,
})

// 使用AbortController取消之前的查询
const projectDetailsQuery = useQuery({
  queryKey: ['projectDetails', selectedProjectId],
  queryFn: ({ signal }) => fetchProjectDetails(selectedProjectId, { signal }),
  enabled: !!project,
})

性能监控与调试

实现查询性能监控可以帮助优化数据获取策略：

const queries = useQueries({
  queries: [
    {
      queryKey: ['stats'],
      queryFn: async () => {
        const start = performance.now()
        const data = await fetchStats()
        const duration = performance.now() - start
        console.log(`Stats query took ${duration}ms`)
        return data
      }
    }
    // ... 其他查询
  ]
})

缓存策略优化

合理利用缓存可以显著提升依赖和并行查询的性能：

// 预设置缓存数据减少依赖查询等待
const queryClient = useQueryClient()

// 预先设置可能需要的缓存
queryClient.setQueryData(
  ['user', userId],
  { id: userId, name: 'Loading...' }
)

// 依赖查询会立即使用预设数据
const { data: user } = useQuery({
  queryKey: ['user', userId],
  queryFn: fetchUser,
  initialData: () => queryClient.getQueryData(['user', userId]),
})

通过合理运用依赖查询和并行查询模式，开发者可以构建出既高效又可靠的数据获取层，为用户提供流畅的使用体验。这两种模式的选择取决于具体的业务需求和数据关系，在实际项目中往往需要结合使用以达到最佳效果。

总结

React Query作为现代React应用数据管理的强大工具，通过简洁的API设计提供了全面的数据获取、缓存和状态管理解决方案。从基础Hook的使用到高级查询模式的应用，本文系统性地展示了如何构建高效、健壮的应用程序。关键要点包括：合理配置查询生命周期状态、实现智能错误处理与重试机制、灵活运用依赖与并行查询模式优化性能，以及充分利用缓存策略提升用户体验。掌握这些技术能够帮助开发者专注于业务逻辑，减少复杂的状态管理代码，最终构建出响应迅速、稳定可靠的React应用。

【免费下载链接】query 项目地址: https://gitcode.com/gh_mirrors/query13/query

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考