何时从服务器重新获取数据与何时只更新状态

Question

假设我在我的组件中显示一个用户列表。有一个Delete Icon删除个人用户。

在 React 中有两种方法可以实现这一点。

使用客户端状态

1. 我们将在用户组件中使用 useEffect 获取用户列表，并使用 useState.

   将其存储在本地状态中

2. 一旦用户点击删除按钮，进行一些 api 调用并在成功回调中更新状态（通过删除已删除的用户）。 (Maybe we can go for an optimistic ui update also without waiting for server confirmation. if the server fails revert the update. This is a separate topic.)

3. 在这种情况下，我们不会再次调用服务器来重新获取项目。

使用服务器状态（反应查询方式）

1. 我们将在用户组件中使用 useQuery 获取项目列表。
2. 一旦用户点击删除按钮，我们将调用mutateAsync函数，onSuccess回调将使缓存失效。
3. 使缓存失效将通过重新调用 GET 调用从购物车中重新获取所有用户。

这两种方式都很好用。我最近看到很多掌声 react-query。

但是使用第二种方法，我们不是进行了很多额外的服务器调用，而不仅仅是更新状态吗？这也适用于其他多种场景。

有人可以向我解释一下为什么人们仍然喜欢 react-query 吗？

Answer 1

react-query 在数据获取方面有很多优势 - 作为全局状态管理器可能是最大的优势：您可以在多个组件中使用相同的键调用 useQuery，您将立即从缓存中获取数据并进行后台更新.

对于突变，它自动跟踪加载状态很好，这样您就可以在更新时显示微调器。如果您的突变 returns 服务器结果，您也可以避免重新获取。然后你可以手动更新缓存。如果是删除，也可以像第一个例子那样手动删除。 react-query 不会强制你重新获取。也看看这里：https://react-query.tanstack.com/guides/updates-from-mutation-responses

Answer 2

如果你要变大，你必须考虑使用“SERVER-CACHING（使用 redis，...）”，永远不要为每一个小变化访问数据库！

例如如果你有一个待办事项列表，你真的想为列表中的每个突变（add-toggle-edit-remove）访问数据库吗？或者您可以根据突变结果轻松地手动更新缓存，并在服务器中缓存数据（10s，1m，...）。

在第一种方法中，数据库 query 负载是（1 => 初始查询）但第二种是（n => 查询每个突变并且没有服务器缓存）。