Query Keys是React Query中非常重要的核心概念。它们可以使库能够正确地内部缓存数据，并在查询的依赖发生更改时自动重新获取数据。最后，它将允许你在需要时手动与查询缓存进行交互，例如在执行变更后更新数据或手动使某些查询失效。 在向你展示我个人如何组织Query Keys以更有效地执行这些操作之前，让我们快速了解一下这三个要点的含义。 缓存数据 在内部，查询缓存只是一个JavaScript对象，其中键是序列化的Query Keys，值是你的查询数据加上元信息。键以deterministic way进行散列，因此你也可以使用对象（但在顶层，键必须是字符串或数组）。 最重要的部分是，键对于你的查询必须是唯一的。如果React …
阅读更多本文翻译自 TkDodo 的 Using WebSockets with React Query 如何使用WebSockets与React Query处理实时数据是最近最常被问到的问题之一，因此我想尝试一下，并报告我的发现。这就是本文的内容 :) 什么是WebSockets 简而言之，WebSockets允许从服务器推送消息或"实时数据"到客户端（浏览器）。通常情况下，使用HTTP时，客户端向服务器发出请求，希望获取一些数据，服务器响应该数据或错误，然后连接关闭。 由于客户端是打开连接并发起请求的一方，这就没有机会让服务器在有更新可用时向客户端推送数据。 这就是WebSockets的作用。 就像其他HTTP请求一 …
阅读更多本文翻译自 TkDodo 的 Testing React Query 谈到测试，经常会和React Query一起出现一些问题，所以我将在这里尝试回答其中的一些问题。我认为其中一个原因是测试“智能”组件（也称为容器组件）并不是一件容易的事情。随着hooks的兴起，这种分离已经大部分过时。现在倾向于直接在需要它们的地方使用hooks，而不是进行主要是随意地分离并向下传递props。 我认为这通常是一个非常好的改进，有助于集中放置和代码可读性，但现在更多组件会去消耗props之外的依赖项。 它们可能是useContext。它们可能是useSelector。或者它们可能是useQuery。 这些组件在技术上不再是纯净的，因为在不同的环境中 …
阅读更多Basic chapter Reason to Hooks React的本质就是从Model到View的映射。这里的Model就是Component的props和state。 当Model的数据变化时，React不管它是怎么变化的，只关心它变化之后和之前的区别。这也就是所谓的声明式declarative，而这通过React的diff函数来实现。 所以UI的展现更像是一个函数的执行。Model是输入参数，View是函数，执行结果就是Dom的改变。而React只要保证通过最优的办法执行变化的过程就行了。 Class作为React Component不合适的两点: React Component之间很少使用继承. React是由state …
阅读更多