M

MLOG

中文

解锁 React useOptimistic hook 的强大功能，构建响应迅速且引人入胜的用户界面。学习如何实现乐观更新、处理错误，并创造无缝的用户体验。

React useOptimistic：掌握乐观 UI 更新，提升用户体验

在当今快节奏的 Web 开发领域，提供响应迅速且引人入胜的用户体验 (UX) 至关重要。用户期望他们的交互能得到即时反馈，任何可感知的延迟都可能导致挫败感和用户流失。实现这种响应能力的一种强大技术是乐观 UI 更新。React 18 中引入的 useOptimistic hook 为实现这些更新提供了一种简洁高效的方式，极大地提高了应用程序的感知性能。

什么是乐观 UI 更新？

乐观 UI 更新是指在服务器确认操作成功之前，立即更新用户界面，就好像该操作（例如提交表单或点赞帖子）已经成功一样。如果服务器确认成功，则无需进一步操作。如果服务器报告错误，UI 将恢复到其先前的状态，并向用户提供反馈。可以这样理解：你给某人讲了个笑话（操作）。你笑了（乐观更新，表明你认为它很好笑），*在*他们告诉你他们是否笑了（服务器确认）之前。如果他们没笑，你可能会说“好吧，这个笑话用乌兹别克语讲可能更好笑”，但使用 useOptimistic，你只需将 UI 恢复到原始状态。

其主要好处是感知的响应时间更快，因为用户可以立即看到他们操作的结果，而无需等待与服务器的往返通信。这带来了更流畅、更愉快的体验。请考虑以下场景：

虽然乐观更新带来了显著的好处，但优雅地处理潜在错误以避免误导用户至关重要。我们将探讨如何使用 useOptimistic 有效地做到这一点。

介绍 React 的 useOptimistic Hook

useOptimistic hook 提供了一种在 React 组件中管理乐观更新的直接方法。它允许你维护一个既能反映实际数据又能反映乐观的、可能尚未确认的更新的状态。其基本结构如下：


const [optimisticState, addOptimistic]
    = useOptimistic(initialState, updateFn);

一个实际例子：乐观地更新任务列表

让我们用一个常见的例子来说明如何使用 useOptimistic：管理一个任务列表。我们将允许用户添加任务，并乐观地更新列表以立即显示新任务。

首先，让我们设置一个简单的组件来显示任务列表：


import React, { useState, useOptimistic } from 'react';

function TaskList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: '学习 React' },
    { id: 2, text: '掌握 useOptimistic' },
  ]);

  const [optimisticTasks, addOptimisticTask] = useOptimistic(
    tasks,
    (currentTasks, newTask) => [...currentTasks, {
      id: Math.random(), // 理想情况下，使用 UUID 或服务器生成的 ID
      text: newTask
    }]
  );

  const [newTaskText, setNewTaskText] = useState('');

  const handleAddTask = async () => {
    // 乐观地添加任务
    addOptimisticTask(newTaskText);

    // 模拟 API 调用（请替换为您的实际 API 调用）
    try {
      await new Promise(resolve => setTimeout(resolve, 500)); // 模拟网络延迟
      setTasks(prevTasks => [...prevTasks, {
        id: Math.random(), // 替换为来自服务器的实际 ID
        text: newTaskText
      }]);
    } catch (error) {
      console.error('添加任务时出错:', error);
      // 撤销乐观更新（此简化示例中未展示 - 请参见高级部分）
      // 在实际应用中，您需要管理一个乐观更新列表
      // 并撤销失败的特定更新。
    }

    setNewTaskText('');
  };

  return (
    

      
任务列表

      
    
        {optimisticTasks.map(task => (
          
  • {task.text}
    • 
        ))}
      

       setNewTaskText(e.target.value)}
      />
      
    

  );
}

export default TaskList;

在这个例子中：

这个简单的例子展示了乐观更新的核心概念。当用户添加任务时，它会立即出现在列表中，提供响应迅速且引人入胜的体验。模拟的 API 调用确保任务最终被持久化到服务器，并且 UI 会用服务器生成的 ID 进行更新。

处理错误和撤销更新

乐观 UI 更新最关键的方面之一是优雅地处理错误。如果服务器拒绝了更新，你需要将 UI 恢复到其先前的状态，以避免误导用户。这涉及几个步骤：

  1. 跟踪乐观更新： 在应用乐观更新时，你需要跟踪与该更新相关的数据。这可能涉及存储原始数据或更新的唯一标识符。
  2. 错误处理： 当服务器返回错误时，你需要识别相应的乐观更新。
  3. 撤销更新： 使用存储的数据或标识符，你需要将 UI 恢复到其先前的状态，从而有效地撤销乐观更新。

让我们扩展之前的例子，以包括错误处理和撤销更新。这需要一种更复杂的方法来管理乐观状态。


import React, { useState, useOptimistic, useCallback } from 'react';

function TaskListWithRevert() {
  const [tasks, setTasks] = useState([
    { id: 1, text: '学习 React' },
    { id: 2, text: '掌握 useOptimistic' },
  ]);

  const [optimisticTasks, addOptimisticTask] = useOptimistic(
    tasks,
    (currentTasks, newTask) => [...currentTasks, {
      id: `optimistic-${Math.random()}`, // 乐观任务的唯一 ID
      text: newTask,
      optimistic: true // 用于识别乐观任务的标志
    }]
  );

  const [newTaskText, setNewTaskText] = useState('');

  const handleAddTask = useCallback(async () => {
    const optimisticId = `optimistic-${Math.random()}`; // 为乐观任务生成一个唯一 ID
    addOptimisticTask(newTaskText);

    // 模拟 API 调用（请替换为您的实际 API 调用）
    try {
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          const success = Math.random() > 0.2; // 模拟偶尔的失败
          if (success) {
            resolve();
          } else {
            reject(new Error('未能添加任务'));
          }
        }, 500);
      });

      // 如果 API 调用成功，则使用来自服务器的真实 ID 更新任务状态
      setTasks(prevTasks => {
        return prevTasks.map(task => {
          if (task.id === optimisticId) {
            return { ...task, id: Math.random(), optimistic: false }; // 替换为来自服务器的实际 ID
          }
          return task;
        });
      });
    } catch (error) {
      console.error('添加任务时出错:', error);
      // 撤销乐观更新
      setTasks(prevTasks => prevTasks.filter(task => task.id !== `optimistic-${optimisticId}`));
    }

    setNewTaskText('');
  }, [addOptimisticTask]); // 使用 useCallback 防止不必要的重新渲染


  return (
    

      
任务列表 (带撤销功能)

      
    
        {optimisticTasks.map(task => (
          
  • 
            {task.text}
            {task.optimistic &&  （乐观状态）}
          
    • 
        ))}
      

       setNewTaskText(e.target.value)}
      />
      
    

  );
}

export default TaskListWithRevert;

此示例中的关键更改：

这个增强的示例演示了如何处理错误和撤销乐观更新，确保了更健壮和可靠的用户体验。关键是使用唯一标识符跟踪每个乐观更新，并有一个机制在发生错误时将 UI 恢复到其先前的状态。请注意，临时出现的“（乐观状态）”文本向用户表明 UI 正处于乐观状态。

高级注意事项和最佳实践

虽然 useOptimistic 简化了乐观 UI 更新的实现，但仍有一些高级注意事项和最佳实践需要牢记：

全球化考量

在全局应用程序中实施乐观 UI 更新时，必须考虑以下因素：

全球应用实例

以下是一些乐观 UI 更新在全球应用程序中的使用示例：

结论

React 的 useOptimistic hook 提供了一种强大而便捷的方式来实现乐观 UI 更新，从而显著增强应用程序的用户体验。通过立即更新 UI，就好像操作已经成功一样，你可以为用户创造更具响应性和吸引力的体验。然而，优雅地处理错误并在必要时撤销更新以避免误导用户是至关重要的。通过遵循本指南中概述的最佳实践，你可以有效地利用 useOptimistic 来为全球受众构建高性能和用户友好的 Web 应用程序。请记住始终在服务器上验证数据，优化性能，并向用户提供关于其操作状态的清晰反馈。

随着用户对响应性期望的不断提高，乐观 UI 更新对于提供卓越的用户体验将变得越来越重要。对于任何希望构建能够与全球用户产生共鸣的现代化、高性能 Web 应用程序的 React 开发人员来说，掌握 useOptimistic 是一项宝贵的技能。