React 并发渲染：别把 useTransition 当性能魔法

React 并发渲染别把 useTransition 当性能魔法一、并发不是自动变快React 的并发能力让渲染可以被打断、延后和分优先级处理。useTransition很好用但它不是性能魔法。慢组件本身仍然慢大列表仍然要优化过度状态更新仍然会制造压力。并发渲染解决的是响应性不是替你消灭计算成本。用useTransition前先确认你到底在延后什么。二、先看更新优先级flowchart TD A[用户输入] -- B[高优先级状态] A -- C[低优先级结果渲染] B -- D[立即响应] C -- E[startTransition] E -- F[可中断渲染]输入框内容、点击反馈属于高优先级搜索结果、筛选后的大列表可以放进 transition。不要把所有状态更新都包进 transition那样只是把问题藏起来。const [isPending, startTransition] useTransition() function onKeywordChange(value: string) { setKeyword(value) startTransition(() { setQuery(value) }) }这里keyword保证输入即时query驱动较重的结果渲染。三、慢渲染仍然要拆const ProductList memo(function ProductList({ items }) { return items.map(item ProductCard key{item.id} item{item} /) })如果列表本身很大只用 transition 不够。仍然要考虑虚拟列表、组件拆分、稳定 key、减少 props 抖动、避免昂贵计算放在 render 里。并发渲染可以改善交互卡顿但如果每次低优先级渲染都要花 500ms用户仍然会感觉慢。底层工作量必须减少。四、Pending 状态要设计好isPending不是让你到处加 spinner。很多场景更适合保留旧结果同时显示轻量提示。频繁闪烁 loading会让页面更焦躁。{isPending span classNamehint正在更新结果/span} ProductList items{visibleItems} /还要注意数据请求和渲染更新的边界。useTransition管的是 React 状态更新不直接管理网络请求。如果请求本身慢还需要缓存、取消、去抖和错误处理。性能分析也要打开 React Profiler。不要凭感觉加 transition。先看哪个组件渲染贵、哪个状态更新触发范围大再决定是拆组件、缓存计算还是调整优先级。最后和 Suspense 配合时要小心。延迟更新、fallback、缓存失效叠在一起很容易让用户看到跳动界面。并发能力越强越需要明确交互策略。还要观察 transition 是否掩盖真实问题。如果用户输入不卡了但结果区域每次都要很久才稳定说明低优先级渲染仍然太重。并发调度改善的是主线程响应不会让昂贵计算消失。react_concurrent_metrics: input_delay_ms: true transition_duration_ms: true render_commit_count: true建议把这些指标和用户行为一起看。搜索、筛选、切 tab 是最常见的 transition 场景单独在 demo 页里测不出真实压力。五、总结React 并发渲染适合把低优先级 UI 更新延后让输入和关键反馈保持响应。useTransition不是性能魔法。它能改善调度但慢组件、大列表和无意义重渲染仍然需要正面优化。