useQuery内部工作机制解析：const变量loading值变更的疑问

问题场景 #

我们使用React Query的useQuery Hook时写出如下代码：

function Dogs({ onDogSelected }) {
  const { loading, error, data } = useQuery(GET_DOGS);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <select name='dog' onChange={onDogSelected}>
      {data.dogs.map((dog) => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  );
}

这里通过解构赋值定义了const变量loading，它是布尔类型按值传递，初始为true，但后续却能变成false。明明const变量不可重新赋值，这背后的机制让人困惑。

解答 #

核心原因是组件会发生重新渲染，并不是同一个loading变量在改变，而是每次渲染时useQuery返回了全新的对象，解构出的是新的const变量。

具体过程拆分：

• 组件首次渲染：调用useQuery(GET_DOGS)，此时请求仍在进行，返回的状态对象中loading: true，本次渲染解构出的loading是值为true的常量，页面显示Loading...。
• 请求完成后：React Query内部监测到查询状态更新，通过React的状态更新机制触发组件重新渲染。
• 组件再次渲染：再次调用useQuery(GET_DOGS)，此时返回的状态对象中loading: false，同时携带请求到的data，本次渲染解构出的是全新的const变量loading，值为false，页面转而渲染下拉选择框。

简言之：const的约束仅作用于当前渲染周期内的变量，组件重新渲染时会从头执行函数体，生成一批全新的变量，前后两次的loading根本不是同一个变量。

React Query的幕后逻辑：

• 它内部维护了所有查询的状态（loading、error、data等），这些状态被存储在专属的缓存或状态容器中。
• 当查询状态发生变化（比如请求完成、失败），它会借助React的状态更新API触发组件重新渲染，让组件能获取到最新的查询状态。

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