深入理解 React 19 的并发渲染机制

并发渲染是什么

React 19 把并发渲染（Concurrent Rendering）从 opt-in 变成了默认能力。它的核心思想是：渲染过程可以被中断、暂停、甚至丢弃，从而让浏览器有机会先处理更高优先级的用户交互。

useTransition 与 useDeferredValue

在 heavy 列表过滤、大表单场景下，这两个 Hook 能让输入框始终保持流畅：

const [isPending, startTransition] = useTransition();

const onChange = (e) => {
  startTransition(() => {
    setQuery(e.target.value);
  });
};

实战取舍

并发不是银弹。对于强依赖顺序的副作用，盲目使用 transition 反而会引入时序 bug。建议先用 profiler 定位真正的瓶颈，再决定哪些状态更新可以"被打断"。