useLazyLoadQuery为何看似阻塞并引发组件重渲染？

问题场景 #

正在学习Relay相关内容时，调试以下代码：

export default function Newsfeed() {
  console.log("HERE 0")

  const data = useLazyLoadQuery(
    NewsfeedQuery,
    {}
  )

  console.log("HERE 1", JSON.stringify(data));

在Chrome控制台中观察到特殊执行流程：代码运行到HERE 0后，并未继续执行HERE 1，而是触发组件重渲染再次打印HERE 0，之后才走到HERE 1。这种行为和传统React数据获取写法差异明显：

传统React数据获取示例：

const [data, setData] = useState(null);

useEffect(() => { 
  // 此处发起异步数据请求
}, []);

return (
  <div>{
     data && ... // 数据就绪后渲染内容
  }</div>
);

传统写法中组件会完整执行两次：第一次data为null，函数执行完毕；数据请求完成后通过setData更新状态，触发第二次完整执行。而useLazyLoadQuery的表现更像阻塞式I/O，和“懒加载”的预期不符，需要明确其工作原理。

核心工作原理 #

useLazyLoadQuery是基于React Suspense机制实现的同步渲染阻塞式查询钩子，这里的“阻塞”并非真正卡住JS线程，而是利用React的渲染暂停能力实现声明式数据等待：

1. 首次渲染触发查询：组件执行到useLazyLoadQuery时，Relay会先检查本地缓存是否存在该查询的结果：

   • 如果缓存无数据，Relay立即发起数据请求，同时抛出一个Suspense专用异常（这是React Suspense的设计机制，不属于错误）。
   • 这个异常会直接中断当前组件的渲染流程，所以你看不到HERE 1的输出——组件还没执行到这一步就被暂停了。

2. Suspense 接管等待逻辑：React捕获到Suspense异常后，会渲染你预先配置的Suspense fallback组件（比如加载动画），同时等待Relay的数据请求完成。

3. 数据就绪后重渲染：当Relay拿到数据并写入缓存后，React会重新触发该组件的渲染流程：

   • 第二次执行组件时，useLazyLoadQuery直接从缓存读取就绪的数据，不会再抛出异常，组件就能完整执行到HERE 1，拿到数据后正常渲染内容。

和传统写法的核心差异 #

• 传统写法是异步非阻塞：组件先完整执行，数据请求在useEffect中异步进行，完成后通过状态更新触发重渲染。
• useLazyLoadQuery是渲染阶段同步触发+Suspense暂停：在组件渲染过程中发起查询，无数据时直接暂停渲染，直到数据就绪后再完成整个渲染流程，看起来像“阻塞”了当前渲染，但本质是利用Suspense实现的声明式数据等待。

关于“懒加载”的误解 #

useLazyLoadQuery的“懒”并非指延迟发起请求，而是指仅当组件被渲染时才触发查询——和Relay的useQuery（可能在组件挂载前就预加载数据）相比，它不会提前发起请求，只有组件进入渲染流程时才会触发，这才是“懒加载”的真正含义，并非异步非阻塞的懒执行。

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