乐观的 UI：改善前端应用程序的用户体验

百变鹏仔 3天前 #JavaScript

文章标签应用程序

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

的概念发挥作用的地方

什么是乐观用户界面？

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

乐观 ui 的优点

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

乐观的 ui 实现

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

第 1 步：乐观的 ui 更新

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

const addtask = async (newtask) =&gt; {  // 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) =&gt; {  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 () =&gt; {  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 eventosuseEffect(() =&gt; {  const interval = setInterval(syncTasksWithServer, 60000);  return () =&gt; clearInterval(interval);}, []);

乐观 ui 的用例

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

立即学习“前端免费学习笔记（深入）”；

结论

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

文章推荐

乐观的 UI：改善前端应用程序的用户体验

什么是乐观用户界面？

乐观 ui 的优点

乐观的 ui 实现

第 1 步：乐观的 ui 更新

第 2 步：错误处理

第三步：与服务器同步

乐观 ui 的用例

结论

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？