28、优化 React 应用：TanStack Query 实现响应式缓存与测试

优化 React 应用：TanStack Query 实现响应式缓存与测试

1. 响应式缓存

在 React 应用中，与服务器通信以持久化和读取远程数据是常见操作。随着应用规模增大，管理数据缓存变得复杂。TanStack Query 这类库可简化远程数据处理，它能管理远程数据的本地副本，包括加载、刷新和失效处理。

响应式缓存是其核心特性之一，它能让数据层仅在必要时刷新数据，若缓存数据“足够新”，则直接从缓存提供数据。例如：

["things"],     
(oldThings) =>    
  oldThings.map((oldThing) =>     
    oldThing.id !== id     
      ? oldThing     
      : { id, name, count: done.length }    
  )
);
const doThing = useDoThing(onSuccess);

这种方法虽看似复杂，但能避免每次增量操作都进行完整的网络请求，长期来看可节省大量往返时间，减轻服务器压力，提升用户体验。

2. 乐观更新

乐观更新是另一种优化技术，它允许我们在发送数据突变请求时，假设服务器操作会按预期进行，临时更新本地缓存（可能只是部分更新）。当突变完成且服务器响应后，再将缓存更新为实际结果。

要实现乐观更新，需完成以下三个步骤：
- 发送突变请求到服务器时，同时按预期更新本地缓存。例如添加数据时，本地也添加相同数据；删除数据时，本地也