在前端开发中，最大的挑战之一是提供流畅、快速的用户体验。现代用户期望应用程序能够立即响应，没有延迟或中断。这就是 乐观 UI.

什么是乐观用户界面？

乐观 UI，或乐观用户界面，是一种开发技术，其中应用程序立即假设用户操作成功并相应地更新界面，甚至在收到服务器的确认之前。

乐观 UI 的优点

1. - 改善用户体验：通过减少感知的等待时间，应用程序感觉更快、响应更灵敏。
2. - 增强交互性：用户可以继续与应用程序交互而不会中断。
3. - 减少摩擦：无需等待操作完成，最大限度地减少用户的挫败感。

乐观的 UI 实现

为了说明如何实现 Optimistic UI，让我们考虑一个常见的示例：用户可以在其中添加和删除列表中的项目的任务应用程序。

第 1 步：乐观的 UI 更新

首先，我们在用户执行操作（例如添加新任务）后立即更新 UI。

const addTask = async (newTask) => {
  // Actualización optimista de la UI
  setTasks([...tasks, newTask]);

  try {
    // Enviar la nueva tarea al servidor
    await api.addTask(newTask);
  } catch (error) {
    // Revertir la UI en caso de error
    setTasks(tasks);
    console.error('Error al añadir la tarea:', error);
  }
};

第 2 步：错误处理

处理可能的服务器错误并在出现问题时回滚 UI 至关重要。

const addTask = async (newTask) => {
  const previousTasks = [...tasks];

  // Actualización optimista de la UI
  setTasks([...tasks, newTask]);

  try {
    // Enviar la nueva tarea al servidor
    await api.addTask(newTask);
  } catch (error) {
    // Revertir la UI en caso de error
    setTasks(previousTasks);
    console.error('Error al añadir la tarea:', error);
  }
};

第三步：与服务器同步

在某些情况下，执行多次乐观操作后可能需要将 UI 状态与服务器同步。

const syncTasksWithServer = async () => {
  try {
    const serverTasks = await api.getTasks();
    setTasks(serverTasks);
  } catch (error) {
    console.error('Error al sincronizar las tareas con el servidor:', error);
  }
};

// Llamada a la función de sincronización en intervalos regulares o en ciertos eventos
useEffect(() => {
  const interval = setInterval(syncTasksWithServer, 60000);
  return () => clearInterval(interval);
}, []);

乐观 UI 的用例

乐观 UI 在服务器延迟会影响用户体验的应用程序中特别有用：

• 消息应用程序：无需等待服务器确认即可发送消息。
• 内容管理系统：立即编辑和发布内容。
• 电子商务平台：立即添加或删除购物车中的产品。

结论

Optimistic UI 是一种强大的技术，可以改变应用程序中的用户体验，使它们更快、更流畅。尽管它需要仔细的错误处理和同步，但好处远远大于挑战。