React Query 中的 useQuery 和 useMutation 钩子有什么区别，分别适用于什么场景？

React Query 中的 useQuery 和 useMutation 是两个核心钩子，它们的区别和适用场景如下：

useQuery

功能：用于执行只读操作，如获取数据。

适用场景：

• 获取列表数据（如用户列表、产品列表）
• 获取详情数据（如用户详情、订单详情）
• 任何需要从服务器读取数据而不修改的场景

特点：

• 自动缓存数据
• 支持数据失效和背景刷新
• 返回数据、加载状态、错误状态等
• 可以配置重试策略

基本用法：

javascript
const { data, isLoading, error } = useQuery('todos', fetchTodos);

useMutation

功能：用于执行修改操作，如创建、更新、删除数据。

适用场景：

• 提交表单数据
• 更新用户信息
• 删除资源
• 任何需要修改服务器数据的场景

特点：

• 支持乐观更新
• 可以配置成功/失败回调
• 支持请求取消
• 可以触发相关查询的重新获取

基本用法：

javascript
const mutation = useMutation(addTodo, {
  onSuccess: () => {
    // 成功回调，如重新获取数据
    queryClient.invalidateQueries('todos');
  },
});

// 调用方式
mutation.mutate(newTodo);

核心区别

1. 操作类型：useQuery 用于读取操作，useMutation 用于写入操作
2. 缓存行为：useQuery 自动缓存数据，useMutation 不缓存结果
3. 调用方式：useQuery 自动执行（可配置），useMutation 需要手动调用 mutate 方法
4. 返回值：useQuery 返回数据和状态，useMutation 返回 mutation 函数和状态

正确使用这两个钩子可以有效地管理应用中的数据获取和修改操作，提高开发效率和用户体验。