21、Remix 开发：优化 UI 与缓存策略

Remix 开发：优化 UI 与缓存策略

1. 优化 UI 体验

在开发应用时，优化 UI 体验是提升用户满意度的关键。其中，乐观 UI 更新是一种有效的技术手段，它能让用户在操作后立即看到反馈，而无需等待服务器的响应。

1.1 乐观 UI 更新的原理

乐观 UI 更新的核心思想是在用户发起请求后，立即更新 UI 状态，假设服务器会成功处理请求。如果请求最终失败，再进行回滚操作。这样可以让用户感受到更快的响应速度，提升操作的流畅性。

在 Remix 中，可以使用 useFetcher 和 useNavigation 等原语来实现乐观 UI 更新。这些原语包含了当前正在提交的表单的 formData 属性，我们可以利用这个属性在服务器返回最终响应之前显示用户数据。

1.2 实现乐观 UI 更新的步骤

以下是实现乐观 UI 更新的一般步骤：
1. 移除待处理 UI ：在实现乐观 UI 时，通常先移除待处理 UI，以避免用户看到不必要的加载状态。
2. 添加和移除待处理实体 ：通过在列表中添加和移除待处理实体，来展示即时反馈。例如，当用户提交表单时，立即在列表中添加一个新项，让用户感觉操作已经成功。
3. 使用 formData 属性 ：利用 formData 属性在客户端显示用户数据，直到服务器返回最终响应。