9. 通过乐观更新改善用户体验

最新推荐文章于 2026-08-19 10:34:56 发布

原创

最新推荐文章于 2026-08-19 10:34:56 发布 · 243 阅读

本文介绍了如何通过乐观更新(optimistic update)优化前端应用的用户体验，特别是使用React的useMutation钩子进行处理。文章详细阐述了onMutate、onSuccess和onError这三个关键事件在实现乐观更新中的作用，并通过一个例子展示了如何在突变失败时恢复状态并向用户反馈错误信息。

嘿伙计，

有时为了改善用户体验，您可以决定押注代码的成功，这样您就可以假设代码会以正确的方式运行，从而使您的应用程序在用户眼中更快。这种方法称为 Optimistic Update，可以使用带有钩子的 React 查询在某些代码行中处理useMutation。是的，这种方法就像用代码打赌，但记住在失败时处理错误也很重要。

要处理乐观更新，您必须useMutation在代码库中处理一个挂钩。此挂钩公开三个事件来处理以执行乐观更新：onMutate和onSuccess.onError

onMutate当您的代码调用挂钩时，会立即调用该事件useMutation。此事件用于在继续前进并使用新值更新状态之前创建当前状态的快照。保存以前的状态很重要，因为它允许您在未来需要时恢复它。

onSuccess在突变成功的情况下调用该事件。如果您的代码在此事件中跳转，那么您是安全的并且一切都按正确的方式进行。

onError在突变失败的情况下调用该事件。不幸的是，如果您的代码在此事件中，则出现问题。在这种情况下，您必须处理将状态恢复到之前的状态并通知用户出现问题。

为了帮助您更好地理解案例，让我们看一个例子

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

const editTodoRequest = async (todo: Todo): Promise<Todo> => {
   
   
  await new Promise((resolve) => setTimeout(resolve, 3000));
  const response = await fetch(`api/tasks/${
   
   todo.id}`, {
   
   
    method: 'PUT',
    headers: {
   
   
      'Content-Type': 'application/json',
    },
    body