如何在 React Query 中实现乐观更新，它有什么优缺点？

乐观更新是 React Query 中的一个强大特性，它允许应用在服务器响应之前就更新 UI，提供更流畅的用户体验。

实现乐观更新的方法

在 React Query 中，使用 useMutation 钩子实现乐观更新的基本步骤如下：

1. 配置 useMutation：

   javascript
   const mutation = useMutation(updateTodo, {
     // 乐观更新函数
     onMutate: async (updatedTodo) => {
       // 1. 取消相关查询的重复请求
       await queryClient.cancelQueries('todos');
       
       // 2. 获取当前缓存数据作为回滚状态
       const previousTodos = queryClient.getQueryData('todos');
       
       // 3. 乐观更新缓存
       queryClient.setQueryData('todos', (oldTodos) =>
         oldTodos.map((todo) =>
           todo.id === updatedTodo.id ? updatedTodo : todo
         )
       );
       
       // 4. 返回回滚函数
       return { previousTodos };
     },
     
     // 错误处理，回滚数据
     onError: (err, updatedTodo, context) => {
       queryClient.setQueryData('todos', context.previousTodos);
     },
     
     // 无论成功失败，都重新获取最新数据
     onSettled: () => {
       queryClient.invalidateQueries('todos');
     },
   });

2. 调用 mutation：

   javascript
   mutation.mutate({ id: 1, title: 'Updated Todo' });

乐观更新的优点

1. 更好的用户体验：用户操作后立即看到反馈，无需等待服务器响应
2. 减少感知延迟：即使网络较慢，UI 也能快速响应
3. 更接近原生应用体验：操作响应速度快，感觉更流畅
4. 简化状态管理：无需手动管理加载状态和临时 UI 状态

乐观更新的缺点

1. 实现复杂度增加：需要编写更多代码来处理乐观更新和回滚逻辑
2. 可能出现数据不一致：如果服务器请求失败，用户可能已经看到了更新后的 UI，然后又回滚
3. 需要考虑并发操作：如果多个乐观更新同时发生，可能会导致冲突
4. 调试难度增加：问题可能出现在乐观更新逻辑、回滚逻辑或服务器响应处理中

最佳实践

1. 适用于简单操作：乐观更新最适合简单的 CRUD 操作，如更新任务状态、编辑文本等
2. 提供视觉反馈：可以在乐观更新后显示一个临时状态指示器，如加载动画
3. 合理处理错误：确保在服务器失败时正确回滚数据，并向用户显示错误信息
4. 考虑网络状况：在网络不稳定的环境下，可能需要调整乐观更新策略

乐观更新是一把双刃剑，正确使用可以显著提升用户体验，但需要谨慎处理各种边界情况。