# 1. hydrateRoot 与 Selective Hydration 在长阻塞组件的工程价值 A hydrateRoot 会重建所有 DOM 节点 B Selective Hydration 会跳过水合导致不可交互 C 水合必须整树一次性同步完成 D hydrateRoot 接管服务端 HTML,Selective Hydration 按需、按交互优先级水合,长阻塞组件不阻塞整体交互 ✓ 正确答案
# 2. React 19 的 ref 作为 prop 的传递简化(ref 不再需要 forwardRef) A React 19 中函数组件仍然必须用 forwardRef 接收 ref B React 19 中 ref 可作为普通 prop 直接传给函数组件,forwardRef 不再需要 ✓ 正确答案 C ref-as-prop 只支持 Class 组件 D useImperativeHandle 在 React 19 中被移除
# 3. Testing Library 查询优先级(getByRole 优先、慎用 getByTestId)的设计哲学,及其与可访问性测试的内在关系 A 查询优先级体现"用户视角"哲学:role 优先、testId 最后,role 查询与可访问性语义检查同构 ✓ 正确答案 B getByTestId 应该作为首选查询方式 C 查询方式不影响测试的可维护性 D getByText 比 getByRole 更贴近用户
# 4. user-event 与 fireEvent 的差异(完整交互序列 vs 单个 DOM 事件),如何测试键盘与指针异步交互 A user-event 模拟完整交互序列(指针链、键盘序列、Tab 焦点)且 API 异步,更贴近真实用户行为 ✓ 正确答案 B fireEvent.click 会模拟完整的指针事件序列 C user-event 是同步 API D fireEvent 与 user-event 的测试效果完全相同
# 5. 用 MSW 在组件测试层 mock 网络请求的工程实践(setupServer、handler 复用与重置) A MSW 只能拦截浏览器请求,Node 测试环境无法使用 B MSW handler 无法模拟延迟响应 C 用 MSW 必须修改组件代码注入 mock D setupServer 在 Node 拦截 fetch/XHR,handler 共享复用 + afterEach 重置防泄漏,未处理请求可告警 ✓ 正确答案
# 6. React Testing Library 的 act 警告产生原因,及其与并发渲染、状态批量更新的关系 A act 把作用域内的更新同步 flush,警告表示更新发生在 act 外(时序不确定),异步交互应 await 并用 waitFor 断言 ✓ 正确答案 B act 警告只影响性能不影响正确性 C 并发渲染下 act 不再需要 D act 警告可以安全忽略
# 7. 流式 SSR 中 Suspense boundary 在 renderToReadableStream 的暂停-恢复机制 A renderToReadableStream 必须等全部数据就绪才开始输出 B Suspense 边界挂起时先冲刷 shell,数据就绪后以独立 chunk 补发增量,客户端按标识插入 ✓ 正确答案 C 流式 SSR 的 TTFB 与完整渲染时间相同 D 嵌套边界不能独立暂停恢复
# 8. React Server Functions 在 Mutations 与表单 <form action={fn}> 的协作 A Server Function 作为 form action 时无法返回结果 B 服务端校验不是必须的 C Server Function 作 form action 执行服务端 mutation,返回值驱动 useActionState 回显,revalidate 刷新相关数据 ✓ 正确答案 D form action 提交后不会重置表单
# 9. React 19 useOptimistic 在低延迟交互体验的工程价值 A useOptimistic 的乐观值在失败后必须手动回滚 B 乐观更新适合支付等强一致场景 C useOptimistic 在 pending 期间展示乐观值、结束后自动回落真实值,适合可最终一致的交互 ✓ 正确答案 D 乐观值只在非 Transition 更新中生效
# 10. React 19 Suspense + RSC 流式 SSR 在 TTFB/FCP 的工程价值与现代框架支持 A 流式 SSR 必须等全部数据就绪才发送 B 流式 SSR 只改善 TTI 不改善 TTFB C Suspense 流式让 shell 先行、增量后补,TTFB/FCP 提前,HTML 与 Flight 双流同步渐进呈现 ✓ 正确答案 D 流式响应与 CDN 缓存完全冲突
# 11. Next.js App Router 的 PPR(Partial Prerendering) A PPR 构建期预渲染静态外壳、运行时流式渲染动态边界,兼顾 CDN 缓存与个性化 ✓ 正确答案 B PPR 是把整个页面静态化的方案 C PPR 不支持动态数据 D PPR 与流式 SSR 互斥
# 12. Suspense 在 SSR 下的 fallback 行为 A SSR 中挂起会阻塞整个页面输出 B SSR 的 fallback 不会出现在初始 HTML 中 C SSR 中 fallback 随 shell 输出、真实内容流式补发替换,与 CSR 的差异在 HTML 可见性与水合时序 ✓ 正确答案 D 流式补发的内容需要开发者手动插入 DOM
# 13. Edge Runtime(Next.js Middleware) A Edge Runtime 支持所有 Node.js API B Edge Runtime 没有体积限制 C Middleware 可以直接访问数据库 D Middleware 在 Edge 运行,做鉴权重定向等边缘决策,数据库等重逻辑放 Node 运行时 ✓ 正确答案
# 14. react-dom/static 的 prerender/prerenderToNodeStream 与 renderToPipeableStream 的差异及其在 SSG 的应用 A prerender 一次性渲染完整产物适合 SSG 构建期生成,流式 API 面向请求时动态渲染 ✓ 正确答案 B prerender 与 renderToPipeableStream 完全相同 C prerender 支持暂停恢复流式补发 D SSG 预渲染的页面不支持任何动态内容
# 15. Hydration Mismatch 的常见原因与排查 A 水合不匹配只影响性能不影响正确性 B 水合不匹配源于渲染依赖环境差异(时间、随机、浏览器 API),应延迟客户端渲染或使用稳定值 ✓ 正确答案 C new Date() 在 SSR 两端结果必然一致 D SuppressHydrationWarning 是首选修复手段
# 16. useFormStatus 等 Hook 在 SSR 边界的行为 A useFormStatus 在 SSR 中返回 pending: true B 服务端渲染可以包含客户端提交状态 C useActionState 的 initialState 不需要序列化 D SSR 下表单 Hook 输出初始状态(pending 恒 false),初始 state 需两端序列化一致 ✓ 正确答案
# 17. React 19 的 useFormStatus 在 Server Action 待处理状态的工程价值 A useFormStatus 可以读取任意表单的 pending B pending 变化会重渲染整个表单 C useFormStatus 返回提交结果数据 D useFormStatus 让表单内部子组件就近读取 Server Action 的 pending,实现按钮自动禁用与文案切换 ✓ 正确答案
# 18. 流式 SSR 与 CDN/ISR 缓存策略的协作(Cache-Control 设置、revalidate 时机与流式响应的可缓存性) A 流式 SSR 响应都可以直接缓存到 CDN B 静态外壳可缓存(public/s-maxage + SWR),动态边界不可缓存,ISR 回源时才执行流式重渲染 ✓ 正确答案 C 个性化页面也应用 public 缓存 D Cache-Control 在流式输出中途可以随意修改
# 19. React 19 hydration mismatch 的 DevTools 诊断(错误叠加层、server/client 差异提示)与常见根因归类 A React 19 用错误叠加层高亮差异节点并对比 server/client 树,根因常是环境敏感值或客户端注入 ✓ 正确答案 B React 19 的水合警告只显示一行文本 C 水合不匹配的根因只有随机数一种 D 所有 mismatch 都应用 suppressHydrationWarning 解决
# 20. React 19 的 Server Actions 在跨域 CSRF 防护的工程实践 A 跨域请求不需要 CSRF 防护 B 缺失 Origin 的请求应直接放行 C SameSite=Strict 可以解决所有 CSRF 问题 D Server Actions 跨域防护以 Origin/Host 白名单校验为基线,叠加 SameSite、token 与 Fetch Metadata 纵深防御 ✓ 正确答案
# 21. React 19 的 RSC Payload 体积优化与缓存策略 A RSC Payload 体积无法优化 B 缓存键与参数序列化无关 C RSC Payload 不需要缓存 D 用 cache() 去重、裁剪边界与字段控制 Payload 体积,缓存分请求内/跨请求/HTTP/客户端多层并配合 tag 失效 ✓ 正确答案
# 22. React 19 的 streaming HTML 在慢网络下的用户体验取舍 A 流式让关键内容先到、次要内容渐进补发,慢网络下需优先级编排并处理断线降级 ✓ 正确答案 B 慢网络下流式 SSR 没有任何缺点 C 流式补发不受带宽影响 D 首屏应全部使用流式边界
# 23. React 19 的 Server Components 的数据获取(无需 useEffect) A Server Components 直接 await 数据并配合 Suspense,消除客户端加载态编排,缓存与失效需显式设计 ✓ 正确答案 B Server Components 不能获取数据 C 交互后的数据更新也可以靠 RSC 自动完成 D async 组件可以随意传给客户端组件
# 24. Vitest Browser Mode 与 Playwright component testing 在真实浏览器组件测试上的取舍 A Browser Mode 是单测环境升级(RTL 生态直用),Playwright component 是 E2E 视角组件测试,选型看现有测试栈 ✓ 正确答案 B 两种方案完全相同 C Browser Mode 不能跑 RTL 测试 D Playwright component testing 不支持真实浏览器
# 25. 自定义 Hook 的测试(renderHook)与状态更新断言的边界 A renderHook 可以直接断言 Hook 内部的 DOM B 异步 Hook 无法测试 C renderHook 配合 act 断言同步更新、waitFor/fake timers 断言异步更新,测的是返回值与副作用 ✓ 正确答案 D Transition 更新在 act 内立即完成
# 26. 快照测试在现代 React 团队中的适用边界与失效成本 A 快照脆弱且易假阳性,适合"稳定结构契约"场景,行为正确性靠断言式测试 ✓ 正确答案 B 快照测试能验证组件行为的正确性 C 快照失败一定代表功能 bug D 整树快照是现代 React 测试的首选
# 27. React Server Components 与 Server Actions 在测试中的 mock 与隔离策略 A Server Actions 无法在测试中 mock B 集成测试不需要验证 CSRF 防护 C 测试 RSC 必须用 jsdom D RSC 用 Node 环境直测并 mock 数据层,客户端测试 mock action,E2E 验证真实 Flight 协议 ✓ 正确答案
# 28. waitFor/findBy 与 fake timers(vi.useFakeTimers)协作测试异步 UI 的注意事项 A fake timers 与 waitFor 可以无脑混用 B fake timers 影响 promise 微任务 C fake timers 假化定时器后需 advanceTimersByTime + act 推进,waitFor 轮询会被假化需用 shouldAdvanceTime 或白名单处理 ✓ 正确答案 D 使用 fake timers 后不需要清理
# 29. React 19 的 useActionState(合并 useFormState)在表单提交的 pending/错误状态管理上与 useFormStatus 的分工,以及 SSR 下初始状态的序列化? A useFormStatus 负责管理提交结果错误 B useActionState 与 useFormStatus 功能重复 C useActionState 管提交结果与错误状态、useFormStatus 管表单内 pending 展示,初始状态需可序列化且两端一致 ✓ 正确答案 D SSR 下 initialState 可以包含任意对象
# 30. 流式 SSR 的请求取消与超时,AbortController 在 renderToPipeableStream 的 abort 行为、客户端中断与慢连接下的降级处理? A abort 会丢弃客户端已接收的内容 B 客户端中断不会浪费服务端资源 C 流式渲染不需要超时控制 D abort 终止未完成渲染、保留已输出内容,客户端断开应监听并止损,慢连接用缓存优先与超时兜底降级 ✓ 正确答案
# 31. React 19 的 cache 函数在请求作用域缓存的工程应用 A cache() 的缓存跨请求共享 B 请求结束后缓存仍长期保留 C cache() 适合缓存随机值 D cache() 在请求作用域内按参数去重数据获取,跨请求缓存需 use cache/HTTP 层 ✓ 正确答案
# 32. React 19 的 Progressive Hydration 在低性能设备的工程取舍 A Progressive Hydration 会减少水合的总工作量 B 低性能设备不需要水合优化 C 渐进水合导致所有交互延迟 D 渐进水合把水合拆散并按交互优先级进行,低端设备首屏可交互,非交互内容应静态化免水合 ✓ 正确答案
# 33. jest-dom 的无障碍断言(toHaveAccessibleName/toBeInvalid/toHaveFocus)的工程价值 A jest-dom 无障碍断言把可访问性要求(名称、无效态、焦点)变为可执行测试,与 RTL 查询协同形成无障碍契约 ✓ 正确答案 B toHaveAccessibleName 断言的是 CSS 样式 C toBeInvalid 只检查视觉红色提示 D 无障碍测试只能靠人工审计
# 34. Storybook interaction testing(play 函数 + test-runner)与 RTL 组件测试的分工 A Storybook play 函数与 RTL 测试完全重复 B RTL 管组件行为契约(mock 强、速度快),Storybook play + test-runner 管场景级交互与文档,两者互补 ✓ 正确答案 C play 函数只能在开发环境运行 D 有 Storybook 就不需要 RTL 测试