从功能演进与底层机制角度看,React 18 相比之前版本主要弥补了哪些缺陷,并引入了哪些关键能力?请结合并发渲染、自动批处理、过渡 API 等方向说明。
考察说明
考查对 React 18 核心更新的理解,特别是并发特性带来的渲染模型变化。
回答思路
- 【回答框架 1】React 18 引入并发渲染,核心是让渲染可中断、可恢复,通过时间切片避免长时间阻塞主线程,解决了大型应用更新时卡顿的问题。
- 【回答框架 2】自动批处理取代手动批处理,在 Promise、setTimeout 等异步场景也能合并更新,减少不必要的渲染次数,提升性能。
- 【回答框架 3】新增 useTransition 和 useDeferredValue,用于标记低优先级更新,让步于紧急更新,实现更平滑的交互体验。
- 【回答框架 4】新增 startTransition 用于非 Hook 场景的过渡标记,配合并发特性让状态切换不阻塞输入响应。
- 【回答框架 5】同时改进了 Suspense,支持服务端渲染的流式输出,以及新的 useId、useSyncExternalStore 等 Hook,增强开发体验。
- 【关键点 1】并发渲染是 React 18 的核心,支持中断与恢复。
- 【关键点 2】自动批处理覆盖异步场景,减少渲染次数。
- 【关键点 3】useTransition 与 useDeferredValue 用于区分优先级,优化交互响应。
- 【关键点 4】Suspense 流式 SSR 降低首屏等待时间。
- 【关键点 5】useSyncExternalStore 为外部状态提供并发安全的读取方式。
- 【易错点 1】并发渲染不是多线程,仍基于单一 JS 线程,需要避免将大计算放在渲染内。
- 【易错点 2】useTransition 不保证低优先级更新一定延迟,只是尽力而为。
- 【易错点 3】自动批处理可能改变依赖 useEffect 时序的代码行为,需评估升级影响。