React Compiler

共 31 题
#

1. React Compiler 在事件处理器内联与闭包捕获的边界条件

A Compiler 会缓存事件处理器使其永远读旧值
B 事件处理器不参与渲染依赖分析,回调缓存由读取的响应式值决定,无法证明的模式会 bailout ✓ 正确答案
C Compiler 强制所有回调必须手工 useCallback
D 事件处理器中的闭包永远不会过期
#

2. React Compiler 在 ref/props 不可序列化的处理与编译失败的 fallback 策略

A Compiler 无法优化任何使用 ref 的组件
B Compiler 对可控的 ref 读写建模为稳定值,无法证明的组件 bailout 跳过优化且不改变行为 ✓ 正确答案
C 编译失败会直接导致构建报错
D Compiler 会校验 props 的序列化能力
#

3. Compiler 在 React Native 与 SSR 场景的差异与限制

A React Compiler 只支持浏览器端
B RN 中 Compiler 会导致原生视图重渲染
C SSR 下 Compiler 的缓存跨请求共享
D Compiler 平台无关,RN 与 SSR 下记忆化语义一致,但两端都要求符合 Rules of React 的纯渲染 ✓ 正确答案
#

4. Compiler 与并发特性的协同

A Compiler 会破坏并发渲染的可中断性
B Compiler 开启后不能使用 useDeferredValue
C Compiler 的记忆化不改变并发语义,减少 Transition/Suspense 恢复时的重复计算,use() 读取纳入依赖分析 ✓ 正确答案
D Suspense 挂起恢复后缓存全部失效
#

5. React Compiler 的 "React Forget" 在重渲染优化的现代实践

A React Forget 是自动记忆化编译器的早期代号,演化为 React Compiler,实践上按包启用并治理 bailout ✓ 正确答案
B React Forget 是手工 memo 的封装库
C React Forget 只能用于 Class 组件
D 开启 Compiler 后仍需要手工写所有 memo
#

6. React Compiler 在 Vite 与 Next.js 的集成路径与构建配置

A React Compiler 只能通过 Next.js 集成
B Compiler 需要重写所有组件才能启用
C Vite 通过 babel-plugin-react-compiler 接入,Next.js 内置配置项启用,两者都需 react-compiler-runtime ✓ 正确答案
D 开发环境不会报告 Rules of React 违规
#

7. React Compiler 编译产物的 reactive dependencies 分析在 useEffect/useMemo 自动补全

A Compiler 会猜测依赖并可能引入错误
B Compiler 推导闭包读取的响应式依赖并自动补全,无法证明的读取会 bailout 而非猜测 ✓ 正确答案
C 开启 Compiler 后依赖数组必须全部删除
D ref.current 会被 Compiler 当作响应式依赖
#

8. Compiler 与 useMemo/React.memo 的协作与替代

A 开启 Compiler 后 useMemo 不再起作用
B Compiler 与手工 memo 冲突会导致报错
C Compiler 自动生成与 useMemo/memo 等价的缓存,手工 API 仍有效,bailout 与第三方场景需手工兜底 ✓ 正确答案
D Compiler 会删除代码中的 useCallback
#

9. React Compiler 1.0(GA)

A React Compiler 1.0 要求重写所有业务代码
B bailout 组件会直接报错导致构建失败
C 1.0 只支持 React 19 一个版本
D 1.0 GA 提供稳定的自动记忆化编译与工具链支持,生产启用应按包灰度并配回归与回滚 ✓ 正确答案
#

10. React Compiler 与手工 useMemo/memo/useCallback 协同的取舍与边界条件

A 手工 memo 与 Compiler 自动记忆化互斥
B 开启 Compiler 后所有手工优化都必须删除
C 取舍原则是 Compiler 优先、手工兜底,手工优化保留在 bailout、第三方与显式契约场景 ✓ 正确答案
D Compiler 会忽略已有手工 memo 导致双重失效
#

11. Compiler 的"运行时优化"(Runtime Memoization)

A React Compiler 的运行时负责做依赖分析
B Compiler 产物需要大型运行时库支持
C 运行时优化跨渲染持久缓存数据
D Compiler 编译期推导记忆化方案,运行时(useMemoCache)只按槽位缓存值,缓存是渲染局部的 ✓ 正确答案
#

12. React Profiler 与 DevTools 性能分析

A Profiler 只能显示组件数量
B Profiler 提供提交时间线、火焰图与交互关联,用于定位重渲染热点并验证优化 ✓ 正确答案
C Profiler 在生产环境零开销可长期开启
D 火焰图只能看总耗时不能看组件 self 耗时
#

13. Compiler 对依赖数组推断的边界

A Compiler 能推断任何 JS 代码的依赖
B 推断失败会直接改变组件行为
C 动态成员访问、外部可变状态与元编程模式会导致依赖推断失败并 bailout,可修复后重获优化 ✓ 正确答案
D bailout 组件无法用手工 memo 优化
#

14. React Compiler 的自动 memoization 在性能预算与首屏渲染的工程价值

A Compiler 能减少首次渲染的必要工作量
B Compiler 可以替代数据获取优化
C 自动记忆化消除重复计算并抑制整树重渲染,但首屏 LCP 主要由数据与资源策略决定 ✓ 正确答案
D 开启 Compiler 后不需要性能度量
#

15. React 19 的 <ViewTransition> 在路由切换的视觉过渡工程实践

A <ViewTransition> 会自动为所有元素生成独立动画
B 过渡动画由 React 运行时播放,与 CSS 无关
C 不支持 View Transitions 的浏览器需要开发者手写降级分支
D 路由切换用 <ViewTransition> + 命名视图做共享元素过渡,并配合 prefers-reduced-motion 降级 ✓ 正确答案
#

16. React Compiler 对现有代码库的迁移成本与兼容性边界

A 迁移 React Compiler 只需改一行配置
B Compiler 不支持 React 17/18
C 迁移成本主要在 Rules of React 违规治理与行为回归验证,应增量启用并关注渲染期副作用类高风险模式 ✓ 正确答案
D Class 组件也会被 Compiler 优化
#

17. React Compiler 编译产物的可读性与调试的工程取舍

A 产物在源码基础上插入缓存指令、结构可读,调试靠 source map 与工具链,日常不必阅读产物 ✓ 正确答案
B Compiler 产物完全不可读,必须靠反编译
C Compiler 禁用 source map
D 产物可读性差是设计缺陷
#

18. React 19 的 Concurrent Rendering 在长列表与高交互的工程应用

A 并发渲染能直接减少长列表的渲染总量
B 并发渲染让列表更新按时间片让出主线程,规模治理仍需虚拟列表,两者组合才完整 ✓ 正确答案
C Transition 内的大规模更新不会产生中间态
D 高交互场景所有更新都应包进 Transition
#

19. React Compiler 对第三方组件库(不能编译)的边界与降级策略

A Compiler 会编译 node_modules 中的第三方组件
B 第三方库不编译,应用侧 props 引用稳定由 Compiler 保证,热点组件可手工 memo 包裹兜底 ✓ 正确答案
C Compiler 开启后第三方组件自动获得记忆化
D 第三方组件导致 bailout 时应用无法处理
#

20. React 19 的 Suspense Transition 在数据获取的工程实践

A Transition 中挂起会立即显示 fallback
B 过渡中的挂起永远不会显示 fallback
C Suspense Transition 不需要 ErrorBoundary
D startTransition 中挂起保留旧 UI,新数据就绪再切换,配合预取与缓存避免闪烁 ✓ 正确答案
#

21. React Compiler 在 Server Components 的自动记忆化协作

A React Compiler 不能编译 Server Components
B Compiler 会缓存 RSC 的网络请求结果
C Compiler 可编译 RSC,消除服务端重复计算,但跨请求缓存由 use cache 负责、序列化由边界机制负责 ✓ 正确答案
D 流式 SSR 的恢复渲染无法复用缓存
#

22. React 19 的 batching(批处理)更新在事件回调与定时器的边界

A React 19 只在 React 事件回调中批处理
B flushSync 会把更新延迟到下一帧
C 批处理会丢失中间的 setState 调用
D 自动批处理覆盖事件、定时器与 promise 等所有上下文,多次 setState 合并为一次渲染 ✓ 正确答案
#

23. React 19 的 Transition Tracing API 在性能监控的工程应用

A Transition Tracing API 可以替代 INP 指标
B Transition Tracing 在 Transition 完成时回调时长与边界信息,可建立后台更新完成时长基线 ✓ 正确答案
C 该 API 在生产构建中默认零成本可用
D Transition Tracing 测量的是紧急更新的延迟
#

24. React Compiler 对 useEffect 与 useMemo 的依赖推断的工程价值

A Compiler 的依赖推断只对 useMemo 生效
B Compiler 按读取路径分析自动补全 effect 依赖并生成 useMemo 缓存,消除漏依赖与冗余依赖 ✓ 正确答案
C Compiler 会把 ref 读取推断为响应式依赖
D 依赖推断失败时组件会报错
#

25. React 19 的 useTransition 与 React Compiler 的协作边界

A useTransition 与 React Compiler 功能重复
B Transition 定义优先级、Compiler 降低渲染成本,两者互补,Compiler 让过渡恢复渲染更快 ✓ 正确答案
C Compiler 会改变 Transition 的可打断性
D Transition 内的渲染可以违反渲染纯度
#

26. React 19 的 <Offscreen> API(实验)在隐藏组件渲染的工程应用

A Offscreen mode="hidden" 会卸载子树
B Offscreen 隐藏渲染保留 state 并默认停止更新,是 Activity 的前身,用于保活与预渲染 ✓ 正确答案
C Offscreen 隐藏期间 effect 全部照常执行
D Offscreen 已经正式稳定无需锁版本
#

27. React Compiler 在大型组件库的逐步启用策略与代码评审

A 大型组件库应一次性全量开启 Compiler
B bailout 率不影响启用决策
C 启用 Compiler 后不需要代码评审
D 应按包增量启用:lint 先行、低风险包优先、每阶段回归与性能门禁,评审关注规则合规与 bailout ✓ 正确答案
#

28. React Compiler 对 class 组件的兼容性边界与迁移路径

A React Compiler 会优化 class 组件
B class 组件与函数组件不能混用
C Compiler 不编译 class 组件,其手工优化仍有效,迁移按复杂度排序并映射生命周期语义 ✓ 正确答案
D 迁移 class 组件只需机械改写语法
#

29. 如何按包设置 compilationMode、收集编译成功率与 bailout 原因,并用性能回归门禁和快速回滚替代一次性全量开启

A compilationMode 只能全量开启或全量关闭
B bailout 原因无法采集
C 启用 Compiler 后无法回滚
D 按包设置 compilationMode、采集成功率与 bailout 原因,用性能门禁与一键回滚实现灰度启用 ✓ 正确答案
#

30. React Compiler 无法证明某段代码符合 Rules of React,或调用了不可编译的第三方组件时,会怎样跳过优化

A bailout 组件会改变运行行为
B 无法证明安全时组件级 bailout,产物与原行为等价仅失优化,可通过诊断与指令管控 ✓ 正确答案
C bailout 会传播到整个应用
D 第三方组件内部会被 Compiler 分析优化
#

31. 何时应该使用 'use no memo' 退出 React Compiler

A 'use no memo' 用于强制组件必须优化
B 'use no memo' 主动退出自动记忆化,适合依赖引用变化的场景,退出后可用手工 memo 兜底 ✓ 正确答案
C 使用 'use no memo' 可以绕过 Rules of React 检查
D 退出后该组件的调用方记忆化也失效