组件与 Fiber 架构

共 52 题
#

1. React 19 的 Actions(form actions、useActionState)

A Actions 内的状态更新是同步高优先级,立即阻塞渲染
B 用 form action 提交时 React 会自动跟踪 pending 并在成功后重置表单 ✓ 正确答案
C useActionState 的返回值不能用于展示错误信息
D 子组件可以通过 useActionState 直接读取父表单的 pending 状态
#

2. React Fiber 优先级调度与 Scheduler 包(shouldYield 时间切片)

A Scheduler 使用 setTimeout 定时执行渲染任务
B 时间切片在同步渲染模式下同样生效
C shouldYield 在时间片耗尽时返回 true,渲染会暂停并把剩余工作交还调度队列 ✓ 正确答案
D 高优先级任务永远排在低优先级任务之后执行
#

3. Fiber 的 beginWork/completeWork 与 effect list 在 commit 阶段的处理

A beginWork 负责执行 DOM 的插入与删除
B completeWork 在返回时把子树副作用收集上传,commit 阶段再按 flags 执行 DOM 变更 ✓ 正确答案
C useEffect 在 mutation 阶段同步执行
D effect list 只在 Class 组件中维护
#

4. Fiber 架构的双缓冲(current/workInProgress)

A workInProgress 树就是屏幕上正在展示的树
B 双缓冲会导致每次更新都创建全新的节点对象
C 渲染被打断时 current 树保持完整,提交时才做指针切换 ✓ 正确答案
D alternate 指针用于连接父组件与子组件
#

5. Concurrent Rendering(createRoot)

A createRoot 与 ReactDOM.render 的行为完全相同
B 并发渲染必须在 useEffect 中执行副作用以获得正确时序
C 并发渲染下渲染工作可被高优先级任务中断,且 setState 自动批处理扩展到更多场景 ✓ 正确答案
D flushSync 会降低更新优先级,延迟 DOM 更新
#

6. useId 与 Concurrent Rendering/Transition 的协作

A useId 的 ID 只取决于组件在树中的位置,与渲染次数无关,适合并发渲染 ✓ 正确答案
B useId 基于模块级递增计数器生成,每次渲染值不同
C useId 生成的 ID 适合直接作为列表项的 key
D useId 只能用于服务端渲染
#

7. React Lane 模型(31 个 lane 位掩码)在并发更新的工程价值

A Lane 模型使用单个数字比较更新优先级,简单高效
B 高优先级 lane 可以打断低优先级 lane 的渲染,低优先级任务超时后会被强制同步执行 ✓ 正确答案
C TransitionLane 的优先级高于 SyncLane
D 位掩码无法表达多个更新合并为一次渲染
#

8. React 19 的 <ViewTransition> 组件与原生 View Transitions API 集成

A <ViewTransition> 把 React 更新包进 startViewTransition,由浏览器截取新旧快照并过渡 ✓ 正确答案
B <ViewTransition> 与 startTransition 的作用相同,都用于调整更新优先级
C View Transitions API 在所有浏览器中均无需降级处理
D 过渡期间浏览器会冻结 React 的更新队列
#

9. Concurrent Mode 与可中断渲染的边界

A flushSync 内的更新同步执行不可中断,且渲染期间不应执行副作用 ✓ 正确答案
B 所有 React 更新都是可中断的
C 渲染函数中可以直接发起网络请求,React 会去重
D 可中断渲染不会导致组件函数被重复调用
#

10. React 渲染阶段(Render、Commit)与副作用时机

A useLayoutEffect 在浏览器绘制完成之后执行
B 渲染阶段可以安全地直接修改 DOM
C useEffect 在 commit 后异步执行,不阻塞浏览器绘制 ✓ 正确答案
D Render 阶段的结果只影响逻辑不影响 DOM
#

11. React 19 Activity 在隐藏子树保留状态/停止渲染的工程价值

A Activity mode="hidden" 会卸载子树并丢失其 state
B Activity 隐藏子树时保留 state,并停止对其常规渲染,切回时无需重新挂载 ✓ 正确答案
C Activity 等同于 CSS display:none,没有任何渲染优化
D Activity 只能用于路由组件,不能用于 Tab 工作台
#

12. React 19.1+ useDeferredValue 的 initialValue/compare 在表单优化的工程价值

A compare 参数可自定义比较逻辑,相等时跳过延迟值更新,initialValue 解决 SSR 水合时的值闪烁 ✓ 正确答案
B useDeferredValue 的 initialValue 用于设置延迟更新的超时时间
C compare 参数决定延迟渲染的优先级高低
D initialValue 在每次渲染时都会被重新应用
#

13. React 协调过程中 useMemo/memo/useCallback 的依赖数组 Object.is 比较差异

A 依赖数组中的内联对象每次渲染都是新引用,会使 useMemo/useCallback 缓存失效 ✓ 正确答案
B useMemo 的依赖数组使用深比较判断是否变化
C Object.is 比较中 NaN 与 NaN 不相等
D React.memo 对 props 做深比较
#

14. useTransition/useDeferredValue 与 startTransition 在并发模式的应用

A startTransition 包裹的更新以低优先级调度,输入事件可打断其渲染 ✓ 正确答案
B useTransition 与 useDeferredValue 都可以返回 pending 状态
C useDeferredValue 必须在事件回调中调用
D Transition 中的状态更新会被永久丢弃
#

15. React 19 的 Server Components 与 Client Components 的 RSC Payload 在流式 SSR 中的边界

A Server Components 的代码会全部打包进客户端 bundle
B 流式 SSR 只有一条 HTML 流,没有独立的 RSC Payload 流
C Client Components 不能接收任何 props
D RSC Payload 以 Flight 格式序列化组件树与可序列化 props,Suspense 边界可流式补发 ✓ 正确答案
#

16. React Fragment(<>/React.Fragment)与 key 在列表渲染的应用

A key 必须唯一且稳定,推荐使用业务 id,索引在增删时会导致状态复用错误 ✓ 正确答案
B 短语法 <> 可以在列表渲染中直接使用 key 属性
C Fragment 会渲染一个空的包裹 div
D key 需要在整个应用中全局唯一
#

17. JSX 的 children 渲染(Children API,React.Children.map/forEach/toArray)在动态子元素的边界

A React.Children.toArray 会把嵌套结构拍平为数组并保持 key,React 19 建议优先使用原生遍历或 toArray ✓ 正确答案
B React.Children.map 与原生的 children.map 行为完全相同
C React.Children.map 会修改原 children 结构
D children 永远是数组,不需要任何归一化
#

18. 受控组件与非受控组件的边界

A 受控组件的值保存在 DOM 节点内部,React 不参与
B 受控与非受控组件可以随时混用而不产生警告
C 非受控组件无法设置初始值
D 受控组件由 state 提供 value 并通过 onChange 更新,数据流单向可预测 ✓ 正确答案
#

19. 函数组件与 Class 组件的差异与现代取舍

A Class 组件的 this 绑定不存在任何问题
B 函数组件无法实现状态管理
C 函数组件通过 Hooks 组合逻辑,Class 组件依赖生命周期,新特性与官方导向偏向函数组件 ✓ 正确答案
D useEffect 只能模拟 componentDidMount,不能模拟卸载
#

20. JSX 编译为 React.createElement 的过程

A 新 JSX Transform 仍要求每个文件显式 import React
B children 只能作为最后一个参数传入,不能是数组
C JSX 中的所有标签都编译为字符串
D JSX 编译为 createElement/jsx 调用,key 与 ref 从 props 中提取为元素顶层字段 ✓ 正确答案
#

21. <Suspense> 边界与 React.lazy 的代码分割协作

A React.lazy 加载失败时会自动渲染 fallback
B lazy 组件挂起时抛出的 Promise 由最近的 Suspense 边界捕获,期间渲染 fallback,加载完成后恢复 ✓ 正确答案
C React.lazy 不需要 Suspense 也能工作
D Suspense 只能用于代码分割,不能用于数据获取
#

22. cloneElement 在高级组件(HOC)与 Render Props 的取舍

A cloneElement 会修改原始元素对象
B Render Props 模式的本质是必须使用 cloneElement
C cloneElement 复制元素并合并 props,现代 React 更推荐组合、context 与自定义 Hook 替代注入式传参 ✓ 正确答案
D cloneElement 可以克隆任意 DOM 节点
#

23. React 19 use 在 Promise/Context 读取的工程边界(Suspense 协作)

A use() 必须在组件顶层无条件调用
B use(context) 与 useContext 完全不同,不能读取 context
C use(Promise) 挂起时由最近的 Suspense 边界接管,错误应交给 Error Boundary,且 use 可在条件中调用 ✓ 正确答案
D use 可以在 useEffect 中调用读取异步数据
#

24. React 19 Performance Tracks 在 React DevTools 显示长任务的工程价值

A Performance Tracks 在 DevTools 中把提交耗时、调度事件与更新来源关联,用于定位长任务归属 ✓ 正确答案
B Performance Tracks 只能显示组件渲染次数,不能显示耗时
C 浏览器 Performance 面板可以展示 React 内部的 lane 优先级
D Performance Tracks 仅适用于生产环境
#

25. React 元素(Element)与组件实例(Instance)

A React 元素就是组件实例,二者等价
B 元素是不可变描述对象,组件实例在渲染中创建并持有状态,二者是声明与实现的关系 ✓ 正确答案
C 元素在渲染后仍然可以修改 props 影响已提交的 UI
D 函数组件没有对应的实例实体
#

26. Error Boundary 的捕获边界与 19 的错误处理回调(onCaughtError/onUncaughtError/onRecoverableError)

A Error Boundary 可以捕获事件处理器中的错误
B React 19 移除了 Error Boundary 机制
C Error Boundary 可以捕获异步 promise 中的错误
D onCaughtError 在错误被边界捕获时触发,onUncaughtError 在无边界捕获时触发,onRecoverableError 处理 React 自行恢复的错误 ✓ 正确答案
#

27. React 19 的 useOptimistic 在乐观更新(购物车、点赞)的工程实践

A useOptimistic 的乐观值在提交失败后需要手动还原
B 乐观更新必须包裹在 useEffect 中执行
C useOptimistic 在 Transition 进行期间立即展示乐观状态,pending 结束后自动回落到真实 state ✓ 正确答案
D 多次并发乐观更新会由 React 自动去重,不会互相覆盖
#

28. React 19 的 useTransition 在非阻塞状态更新的工程取舍

A startTransition 包裹的更新会立即同步执行
B Transition 更新完成后 isPending 会永久保持 true
C useTransition 只能用于路由组件
D Transition 更新以低优先级调度、可被紧急输入打断,isPending 标识过渡进行中 ✓ 正确答案
#

29. React 19 的 useDeferredValue 在延迟渲染高开销组件的应用

A useDeferredValue 会让输入框本身也延迟响应
B deferred 值与当前值永远相等
C useDeferredValue 以低优先级渲染依赖它的部分,输入保持即时,且应配合 memo 防止无关重渲染 ✓ 正确答案
D useDeferredValue 只能用于服务端渲染
#

30. React 19 的 useSyncExternalStore 在外部数据源订阅的工程应用

A useSyncExternalStore 只能用于 React 内部状态
B getSnapshot 每次返回新对象不会产生任何问题
C useSyncExternalStore 通过缓存快照与强制重渲染解决并发渲染下外部 store 的撕裂问题 ✓ 正确答案
D useSyncExternalStore 不需要 subscribe 函数
#

31. React 19 的 JSX 转换(新 JSX Transform)

A 新 JSX Transform 仍要求显式 import React 才能编译
B 新转换的编译产物与 createElement 完全一致
C 新 JSX Transform 使用 react/jsx-runtime 自动引入 jsx/jsxs,源码无需 import React ✓ 正确答案
D jsx-runtime 只能在生产环境使用
#

32. React 19 的 Fragment、StrictMode、Profiler 在开发调试的工程价值

A Profiler 只能显示渲染次数,不能显示耗时
B StrictMode 在生产构建中也会双调用
C StrictMode 在开发环境下双调用渲染函数与 effect,用于暴露非纯渲染问题 ✓ 正确答案
D Fragment 会生成额外的 DOM 容器
#

33. React 19 的 Suspense 在异步组件与数据获取的协作边界

A Suspense 挂起时组件依然执行 useEffect
B Suspense 配合"渲染外发起请求 + promise 缓存"可避免重复请求,错误需由 Error Boundary 处理 ✓ 正确答案
C Suspense 的 fallback 会在错误发生时自动渲染
D Suspense 只能用于 React.lazy 代码分割
#

34. React 19 的 ErrorBoundary 在组件错误捕获与降级 UI 的工程应用

A ErrorBoundary 能捕获自身抛出的错误
B ErrorBoundary 可以捕获事件处理器中的错误
C getDerivedStateFromError 返回新 state 切换降级 UI,React 19 中可通过 key 变化重置边界重新挂载 ✓ 正确答案
D componentDidCatch 必须返回一个新的 state 才能工作
#

35. React 19 的 Context API 在跨组件状态共享与现代取舍

A context 值变化只会重渲染直接子组件
B useContext 的组件不会随 context 值变化而重渲染
C context 适合低频变化的跨层级共享数据,value 应用 useMemo 稳定,memo 无法阻断 context 消费 ✓ 正确答案
D context 可以完全替代状态管理库
#

36. React 19 的 memo 与 useMemo/useCallback 在重渲染优化的边界

A memo 包裹后组件在任何情况下都不会重渲染
B useCallback 能改变函数本身的执行结果
C memo 只做 props 浅比较,props 内联新引用会使 memo 失效,React Compiler 可自动记忆化替代部分手工优化 ✓ 正确答案
D useMemo 会立即执行所有依赖
#

37. React 19 的 Portal(createPortal)在模态框与 Tooltip 的工程应用

A Portal 渲染到其它 DOM 位置后,事件冒泡遵循新的 DOM 树
B Portal 把子树渲染到外部容器但保留 React 树关系,事件冒泡仍沿 React 树,适合模态框悬浮层 ✓ 正确答案
C Portal 不能访问父组件的 context
D Portal 在 SSR 中直接渲染到 document.body
#

38. React 19 的 Lane 优先级模型(SyncLane、InputContinuousLane、TransitionLane)在用户输入响应的边界

A TransitionLane 的优先级高于 SyncLane
B flushSync 会把更新降级为低优先级
C 离散输入走 SyncLane 即时渲染,连续输入走 InputContinuousLane,Transition 更新可被紧急输入打断 ✓ 正确答案
D 所有 setState 都走 TransitionLane
#

39. React Fiber 的 beginWork/completeWork 阶段在函数组件与类组件的统一协调路径

A 函数组件与类组件在 React 内部使用完全不同的渲染管线
B completeWork 会分别处理函数组件与类组件的 DOM
C 类组件不参与并发渲染
D 两类组件共享统一 Fiber 遍历路径,差异仅在 beginWork 内的处理(hooks 与生命周期) ✓ 正确答案
#

40. React 19 的 useTransition 与 useDeferredValue 在过滤大列表时让出主线程的现代边界

A Transition 让过滤渲染按时间片让出主线程,但渲染规模仍需虚拟列表等手段治理 ✓ 正确答案
B useTransition 会立即缩小大列表的渲染总量
C useDeferredValue 会让输入框本身延迟响应
D 过滤大列表时只能使用 useTransition,不能使用 useDeferredValue
#

41. React 的 Suspense for Data Fetching 在并发渲染下 ping 与 boundary 的工程实践

A ping 机制用于组件内部手动触发 setState 恢复
B 数据就绪时资源层通过 ping 通知调度器重渲染等待中的边界,promise 缓存避免重复请求 ✓ 正确答案
C Suspense for Data Fetching 会重复发起网络请求
D 数据请求失败时 fallback 会自动显示错误信息
#

42. React 19 的 use() Hook 直接读取 Promise/Context 在并发模式下的边界

A use() 必须在组件顶层无条件调用
B use() 可以在事件处理器中读取 promise
C use() 可在条件中调用,但读取的 promise 必须稳定缓存,挂起不能被 try/catch 捕获 ✓ 正确答案
D use() 每次渲染都会重新发起请求
#

43. React 的 useSyncExternalStore 在外部可变源订阅与并发渲染撕裂(tearing)

A useSyncExternalStore 通过渲染期快照缓存与 store 变化时强制同步重渲染解决撕裂问题 ✓ 正确答案
B 撕裂问题是旧版本 React 才有的,19 中已不存在
C getSnapshot 每次返回新对象可以提升性能
D useSyncExternalStore 只在服务端生效
#

44. React 19 的 ref 清理函数(ref={(node) => { ...; return cleanup }})与 useEffect 清理的边界

A React 19 中 ref 回调不允许返回清理函数
B ref 清理函数与 useEffect 清理同时异步执行
C ref 回调中可以安全地调用 setState
D ref 清理函数在节点卸载或 ref 替换时执行,且先于 useEffect 清理 ✓ 正确答案
#

45. React Scheduler(调度器)的 shouldYield() 在 5ms 时间片到期的判断逻辑

A shouldYield 在时间片未到期时也返回 true
B shouldYield 通过比较当前时间与任务开始时间判断 5ms 时间片是否耗尽,到期后任务放回队列让出主线程 ✓ 正确答案
C shouldYield 返回 true 表示任务已全部完成
D Scheduler 使用 setTimeout 投递切片任务
#

46. React 19 的受控与非受控组件(refs)在表单状态的取舍

A React 19 中 ref 只能通过 forwardRef 传递
B 非受控组件无法设置初始值
C 受控组件不需要 onChange
D 非受控组件用 defaultValue 初始化、ref 读取当前值,React 19 的 form action 可直接读取 FormData,二者更契合 ✓ 正确答案
#

47. React 19.2 的 <Activity mode="hidden"> 与 Suspense fallback 在隐藏内容、保留 state、处理 Effect 和后台更新方面有什么本质差异

A Activity 隐藏子树保留 state 且暂停渲染与 Effect,Suspense fallback 是卸载原内容等待资源就绪 ✓ 正确答案
B Activity 与 Suspense fallback 的语义完全相同
C Activity 隐藏时会卸载组件并丢失 state
D Suspense fallback 显示期间原组件的 effect 仍在运行
#

48. 将路由页和多 Tab 工作台改为 <Activity> 保活时,如何决定哪些页面应隐藏而不是卸载,并用切换延迟、后台 CPU、订阅数量和堆内存上限验证收益没有被保活成本抵消

A 所有路由页面都应无条件使用 Activity 保活
B 后台隐藏页面仍会全量执行渲染更新
C Activity 保活不需要任何资源成本
D 应保留高价值状态且重建成本高的页面,并用切换延迟、后台 CPU、订阅数与内存上限验证净收益 ✓ 正确答案
#

49. React 的 ErrorBoundary 与 Suspense 的 fallback 边界在并发模式的协作

A Suspense 会捕获 promise 的 reject 并显示错误 fallback
B ErrorBoundary 可以替代 Suspense 处理数据加载
C 挂起资源最终失败时错误向上传播由 ErrorBoundary 接管,Suspense 管等待、边界管失败 ✓ 正确答案
D 嵌套边界总是由最外层 ErrorBoundary 接管错误
#

50. React 的 startTransition 与 useTransition 在用户输入响应的优先级协作

A startTransition 内的所有代码包括函数调用都会被延迟执行
B startTransition 把其中的 setState 降级为可打断的低优先级更新,紧急输入始终优先渲染 ✓ 正确答案
C useTransition 与 startTransition 在功能上完全不同
D Transition 更新完成后 isPending 才变为 false,期间输入会被阻塞
#

51. React 19 的 <ViewTransition> 组件封装(并非独立的 useViewTransition Hook)与浏览器 View Transitions API 的工程协作

A <ViewTransition> 与 useViewTransition Hook 功能完全等价
B View Transitions API 在所有浏览器原生支持
C <ViewTransition> 以组件方式把子树更新包进 startViewTransition,无浏览器支持时自动降级为普通更新 ✓ 正确答案
D <ViewTransition> 需要开发者手动调用 document.startViewTransition
#

52. React Fiber 的 subtreeFlags 与 deletions 数组在 commit 阶段副作用执行顺序的工程价值

A subtreeFlags 用于标记每个节点的渲染次数
B React 19 中 effect list 仍由链表维护
C deletions 数组中的节点会在遍历时边删除边执行
D subtreeFlags 位掩码让 commit 遍历跳过无副作用的子树,deletions 数组统一收集待删除节点,保证副作用顺序确定 ✓ 正确答案