为何无状态变更时startTransition仍触发高优先级更新与重渲染？

问题背景 #

有这样的声明：

调用startTransition，即使内部未触发任何更新，仍会同时引发高优先级更新与低优先级更新。

为验证该情况，使用以下示例代码：

export default function App() {
  const [isPending, startTransition] = useTransition();

  console.log("render");
  // useDebug;

  return (
    <button onClick={() => startTransition(() => {})}>
      Start Transition
    </button>
  );
}

每次点击按钮都会触发重渲染，尽管transition回调为空。由此引出三个疑问：

• 为何startTransition内部无状态变更仍会触发重渲染？
• 该重渲染是否如声明所述为高优先级更新？
• 若调用startTransition仍触发紧急更新，是否违背其用于处理低优先级工作的初衷？

有博客使用自定义useDebug钩子称该行为反映高优先级更新，对此准确性存疑，以下是专业解答：

解答 #

1. 为何空回调的startTransition仍触发重渲染？ #

useTransition返回的isPending是React内置的状态：调用startTransition的瞬间，React会立即将isPending设为true（触发一次更新）；即使回调为空，React完成transition流程后，也会把isPending重置为false（触发第二次更新）。这两次内置状态的变更，就是组件重渲染的直接原因——和回调里有没有自定义状态更新无关。

2. 该重渲染是否为高优先级更新？ #

分两次更新来看：

• 第一次isPending变为true的更新是高优先级：这是React为了让组件快速响应transition启动状态（比如显示loading）设计的同步更新，属于紧急更新范畴。
• 第二次isPending变回false的更新是低优先级：属于transition异步更新队列，会被React调度到浏览器空闲时执行。

博客里的“同时引发高优先级与低优先级更新”，指的就是这两次前后衔接的更新动作。

3. 是否违背处理低优先级工作的初衷？ #

完全不违背。startTransition的核心定位是把回调内的业务状态更新标记为低优先级，而isPending的高优先级更新是服务于用户体验的辅助逻辑：它能让组件快速反馈操作状态，避免用户点击后无响应的感知。这部分高优先级更新是必要的交互补充，不会影响回调内业务更新的低优先级特性——真正需要延迟的工作依然会被妥善调度，不会阻塞输入、点击等紧急操作。

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