TanStack Query是否底层使用React useState？重渲染机制问询

核心结论：TanStack Query 是通过封装 React 的原生状态更新逻辑来触发重渲染的，组件并非直接对data的引用变化做出响应。

1. 分层设计：核心层与 React 适配层的分工 #

你在核心层（query-core）看到的setState是框架无关的状态管理逻辑，负责维护查询的生命周期（加载、成功、错误、数据缓存等），这部分和 React 没有直接关联，它通过观察者模式来发布状态变更事件。

而@tanstack/react-query作为 React 适配层，会在useQuery钩子内部使用 React 的useState或useReducer来维护组件本地的状态。当核心层的查询状态发生变化（比如异步请求完成、数据更新），适配层的订阅者会收到通知，随后调用 React 原生的setState来更新组件状态，最终触发重渲染。

2. 为什么没直接找到核心层与 React setState 的关联？ #

这种绑定逻辑不会写在核心的query.ts文件中，而是存在于 React 适配包的实现代码里（比如useQuery的具体实现）。核心层只负责发布事件，适配层负责订阅并触发 React 的状态更新，两者通过观察者模式解耦，所以你在核心层看不到直接的 React API 调用。

3. 你的示例代码重渲染流程拆解 #

1. 组件初始化时调用useQuery，钩子会订阅对应查询的状态变化。
2. 异步请求完成后，TanStack Query 核心层更新该查询的状态，并通知所有订阅者。
3. useQuery内部的 React 状态钩子被触发，更新包含data在内的查询状态。
4. React 检测到组件状态变更，触发重渲染，此时data已更新，页面同步显示新值。

示例代码 #

import React from 'react';
import { useQuery } from '@tanstack/react-query';

function asyncFunc() {
  console.log('DBG-asyncFunc');
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('done');
    }, 1000);
  });
}

function onClick() {
  window.location.reload();
}

const Sandbox = () => {
  const { data } = useQuery({
    queryKey: ['whatevs', {}],
    queryFn: async () => {
      const result = await asyncFunc();
      return result;
    },
    ...{ staleTime: 0, cacheTime: 0 },
  });

  console.log('DBG-a-render', data);

  return (
    <div>
      <h4>Async Value: {data}</h4>
      <hr />
      <button type="button" onClick={onClick}>
        Reload
      </button>
    </div>
  );
};

export default Sandbox;

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