假设我正在组件中显示一个用户列表。有一个Delete Icon可以删除单个用户。
在React中有两种方法可以实现这一点。
使用客户端状态
-
我们将在User组件中使用
useEffect获取用户列表，并使用useState将其存储在本地状态中。 -
一旦用户点击删除按钮，进行一些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.) -
在这种情况下，我们不会再次调用服务器来重新蚀刻项目。
使用服务器状态(反应查询方式(
- 我们将在User组件中使用
useQuery获取项目列表 - 一旦用户单击删除按钮，我们将调用
mutateAsync函数，onSuccess回调将使缓存无效 - 使缓存无效将通过进行新的GET调用来重新获取购物车中的所有用户
这两种方法都很好用。最近我看到很多人为react-query鼓掌。
但是对于第二种方法，我们不是要进行大量额外的服务器调用，而不仅仅是更新状态吗？这也适用于多种其他场景。
你能有人向我解释一下为什么人们仍然喜欢react-query吗？
react query在数据获取方面有很多优势-作为全局状态管理器可能是最大的优势：您可以在多个组件中使用相同的键调用useQuery，您将立即从缓存中获取数据并进行后台更新。
对于突变，它可以自动跟踪加载状态，这样您就可以在更新时显示微调器。如果您的突变返回服务器结果，您也可以避免重新蚀刻。然后您可以手动更新缓存。如果是删除，您也可以像第一个例子中那样手动删除它。react查询不会强制您进行refetch。也可以看看这里：https://react-query.tanstack.com/guides/updates-from-mutation-responses
如果你要做大，你必须考虑使用"服务器缓存(使用redis…("；永远不要为了每一个小小的改变而访问数据库！
例如，如果你有一个待办事项列表，你真的想为列表中的每个突变(添加切换编辑删除(打数据库吗！或者你可以根据突变结果手动更新缓存，也可以在服务器中缓存数据(10s，1m，…(
在第一种方法中，数据库CCD_ 10负载是(1=>初始查询(，但第二种方法是(对于每个突变，n=>查询，并且不存在服务器缓存(。