ReactQuery如何监控复杂Query Key的值与引用变化？

React Query中，useQuery(..)钩子接收的query key可以包含数组形式的复杂依赖项，甚至是会变化的int类型（比如todoId），也可以是对象类型的依赖，示例如下：

function Component() {
  const [filters, setFilters] = React.useState()    
  const { data } = useQuery(['todos', filters], () => fetchTodos(filters))

  // ✅ 设置本地状态并让其"驱动"查询
  return <Filters onApply={setFilters} />
}

虽然query key的哈希逻辑在源码和相关内容中有说明，但我找不到底层如何监控这些复杂类型变化的解释。我想知道：它如何追踪Query Key数组中传入的复杂类型的变化？是否存在将事件与值或引用变化关联的内省机制？

注：这个问题同样适用于React的useEffect(..)钩子的依赖项。

不管是React Query的useQuery查询键，还是React内置的useEffect依赖数组，它们追踪变化的核心逻辑完全一致，没有特殊的"内省机制"，本质分为两步：

1. 触发重渲染的前提
   所有能被追踪的依赖项，必须是React状态（useState/useReducer）、props、或者由它们衍生的变量。当这些值发生变化时，会触发组件重新渲染——这是React本身的状态更新机制，和钩子无关。

2. 重渲染时的浅比较
   每次组件重渲染时，钩子会把当前传入的依赖项（比如useQuery的query key数组、useEffect的依赖数组）和上一次渲染时缓存的依赖快照做浅比较：

   • 对于基本类型（number/string/boolean等），直接比较值是否相等
   • 对于引用类型（对象/数组），比较的是引用地址是否相同

   只要浅比较发现有任何一项不同，钩子就会判定"依赖变化"，执行对应的逻辑：

   • useQuery会重新发起请求并更新缓存
   • useEffect会重新执行副作用函数

为什么复杂对象也能被追踪？ #

拿例子里的filters对象来说：

• 当你调用setFilters传入新对象时，React会更新状态并触发组件重渲染
• 重渲染时，useQuery拿到的['todos', filters]数组里的filters是新的引用，和上一次缓存的引用不一样，浅比较失败，就会触发重新查询

常见误区：为什么有时候复杂对象变化了却没触发更新？ #

如果直接修改原有对象的属性（比如filters.name = 'new'）再调用setFilters(filters)，此时filters的引用地址没变，浅比较会认为依赖没变化，钩子就不会执行更新逻辑——这也是React状态更新要求不可变数据的原因。

内容的提问来源于stack exchange，提问作者Askolein