标准答案
- 并发渲染不是多线程渲染,而是 React 可以在渲染工作之间切换优先级。
- 低优先级更新可以被中断或延后,高优先级输入、点击等交互能更快响应。
- React 18 暴露了 useTransition、useDeferredValue、自动批处理等与并发能力相关的 API 和行为。
- 渲染阶段可能被重复调用或被丢弃,所以组件渲染必须是纯函数式的,不能在 render 里执行副作用。
- 严格模式在开发环境中会更容易暴露不纯渲染、effect 清理不完整等问题。
题目解析
这道题容易被答成“React 变快了”。更准确的说法是 React 有了更强的调度能力,可以让重要交互优先。
并发能力不会自动解决所有性能问题。组件拆分、状态位置、memo、虚拟滚动仍然重要。
如果组件在渲染阶段发请求、改全局变量或依赖一次性副作用,并发渲染下更容易出现问题。
代码示例
下面用 startTransition 把结果页切换标记为非紧急更新。
TSX
function SearchTabs() {
const [tab, setTab] = useState('all')
const [isPending, startTransition] = useTransition()
function switchTab(nextTab: string) {
startTransition(() => {
setTab(nextTab)
})
}
return (
<>
{isPending ? <span>切换中</span> : null}
<TabPanel activeTab={tab} onChange={switchTab} />
</>
)
}常见误区
- 把并发渲染理解成浏览器多线程同时渲染多个组件。
- 渲染阶段写副作用,遇到重复渲染或中断时出现不可预测行为。
- 以为升级 React 18 后不需要再做组件拆分和性能分析。