ReactQuery 如何通过 Value 和/或 Reference 监控复杂的 Query Key 变化

Question

在 ReactQuery 中，useQuery(..)钩子采用一个可以包含复杂依赖项（在数组中）的键。或者甚至只是一个int, 像todoId这样可以改变（参见文档）。

\n

或者像filters下面这样的对象：

\n

function Component() {\n  const [filters, setFilters] = React.useState()    \n  const { data } = useQuery([\'todos\', filters], () => fetchTodos(filters))\n\n  // \xe2\x9c\x85 set local state and let it "drive" the query\n  return <Filters onApply={setFilters} />\n}\n

\n

我无法找到有关它如何监视幕后变化的解释。

\n

如果源代码中很好地解释了密钥的散列，并且这篇博客文章对值更改的事件处理/监视对我来说是一个谜。

\n

所以问题是：它如何跟踪更改，即使是在查询键数组中传递的复杂类型内部？是否发生了一些内省，将事件与值和/或参考变化联系起来？

\n

PS：这个问题也适用于 useEffect(..) 挂钩中的依赖项。我对非解释性语言普遍感到困惑。

\n

Answer 1

查询键被确定性地散列。基本上，我们对键进行 JSON.stringify，但对其中对象的键进行排序，以便它们稳定。之后，我们只有字符串（您也可以在开发工具中看到它们），并且字符串很容易比较以查看是否发生了变化（只是===）。

系统如何知道重新计算和比较Hashkey？

我们只是在每次渲染时都这样做。

Answer 2

好吧，由于我的评论被盗为答案，即使没有提及，我只是自己将其重新发布为答案：

当密钥哈希更改时，查询将重新启动。

系统如何知道重新计算和比较Hashkey？它如何“响应”变化？

它基本上在每个渲染上重新计算哈希，这里没有魔法。

哈希算法是一个实现细节，但默认情况下它使用JSON.stringify（唯一的细节是对象键已排序）。

相反，useEffecthook 仅通过引用来比较 deps（如果你可以这么说，从技术上讲它可能使用tc39.es/ecma262/#sec-isstrictlyequal例如===）。