React 复选框用 checked 还是 defaultChecked，多选状态怎样保存？
区分复选框的勾选状态与提交值，说明 checked、defaultChecked、event.target.checked 和多选 ID 集合的关系，以及全选、禁用项和半选状态的边界。
核心关键词React checkbox checked 和 defaultChecked 区别
面试知识索引 · 分类、标签与搜索
组件设计专题面试题，44 道完整答案
组件设计专题面试题第 1 页，显示第 1–44 题，共找到 44 道完整解析，可继续按分类、标签与关键词缩小范围。
44筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
技术分类52 个
全部分类5000AI Agent511浏览器301JavaScript285React281AI 开发262CSS240Node.js217TypeScript206Vue180前端工程化138React Native135
查看全部 52 个分类
热门标签178 个
查看其余 163 个标签
网络协议111测试109数据库事务95实时通信92Web 可访问性90动画79可观测性77Agent 记忆75向量检索66工具调用66LangGraph59Prompt56任务规划53排障与运维53数据库索引52浏览器自动化51Flexbox50值与类型50GraphQL49事务与并发49构建与镜像49DNS 与 TLS48工程协作与交付48AI 评测47CSS Grid47Express 服务47MCP47副作用与同步47向量与嵌入47文件与多媒体47流与二进制47传输与协议46列表与性能46可维护代码46响应式原理46容器运行46指标日志追踪46数据建模与运维46文件与 I/O46表单与输入46MCP 协议45RAG45Vite 与模块构建45Webpack45内存与虚拟化45原生集成45多 Agent45工作负载与发布45应用与性能45数据处理45模块与工具链45组件与模板45缓存与数据结构45网络与运维45评估与调试45身份认证与授权45运行时与开发45Web 系统方案44一致性与容错44侦听与生命周期44分布式使用44原生组件与交互44可访问交互44消息与异步处理44渲染与调度44索引与执行计划44缓存与代理44进程与并发44层叠与选择器43攻击面与防御43文档数据库43权限与安全43离线与渐进增强43语义与文档43请求与通信 API43Worker 与线程协作42事件系统42存储与离线数据42服务架构42服务端与流式渲染42服务端工程42泛型设计42版本控制42类型收窄42类型运算42组件与端到端42编码与执行42进程与线程42DOM 与文档操作41Flex 布局41HTTP 语义41NestJS 架构41REST 与接口契约41SQL 查询41加载与交互性能41动画与视觉41类型工程41记忆与状态41运行时与调度41Agent 架构40WebAssembly 集成40单元与集成测试40多 Agent 协作40工作流编排40模块与语言机制40浏览器与 UI 自动化40生产运行40函数与作用域39响应式设计39性能与并发39类型系统基础39Grid 布局38数组与集合38盒模型与排版38Hooks 与复用37应用开发37推理与成本37状态共享37知识库数据37模型与应用评测36对象与原型35状态与渲染35语言与并发35异步与 Promise34Effect32RAG 检索31React 性能31响应式与性能31微调与数据31TanStack Query30全栈边界30数据与缓存30大模型基础29路由与数据流29事件循环28流式交互28提示与上下文设计27数据与服务端27组件与依赖注入27组件与响应式27多模态应用24应用与渲染24Hydration22沙箱安全22状态管理18算法18CI/CD13语言与运行时10React Server Components6搜索与排序4实用函数实现3链表栈队列3图算法2字符串算法2树与遍历2索引与高级结构2Kubernetes1作用域与函数1动态规划1异步与浏览器1手写与交互性能1数组与双指针1相等比较1
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
如何利用把 JSX 作为 children 传入的方式减少 React 组件间不必要的 props 传递？
围绕“如何利用把 JSX 作为 children 传入的方式减少 React 组件间不必要的 props 传递”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须示范用 children 开洞让中间层不感知内容的做法及其对重渲染的影响。
核心关键词React children 组合 减少 props 传递 - 0003
为什么不能把 React 的 children 当普通数组随意操作，官方提供了什么替代手段？
围绕“为什么不能把 React 的 children 当普通数组随意操作，官方提供了什么替代手段”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 children 可能是单节点、数组或函数导致直接 map 不可靠，以及 Children 工具方法的作用与替代思路。
核心关键词React children 不透明数据结构 Children API - 0004
用 cloneElement 给 React 子组件偷偷注入 props 有什么隐患，更好的替代方案是什么？
围绕“用 cloneElement 给 React 子组件偷偷注入 props 有什么隐患，更好的替代方案是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须指出 props 来源隐晦、覆盖冲突等问题并给出显式传 props 或 Context 的替代。
核心关键词React cloneElement 隐患 替代 组合 Context - 0005
拿到设计稿后，怎样拆 React 组件并决定状态放在哪里？
用商品筛选页说明怎样从职责、数据流和变化原因建立组件层级，先做静态视图再识别最小状态，避免按每个 div 拆组件、把派生结果重复保存或过早使用 Context。
核心关键词React 组件拆分和状态归属设计 - 0006
什么是 React 的复合组件模式，为什么 Select/Option 这类组件适合用它设计？
围绕“什么是 React 的复合组件模式，为什么 Select/Option 这类组件适合用它设计”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明父子组件通过隐式共享（如 Context）协作形成的声明式 API 及其优势。
核心关键词React 复合组件 compound component Context - 0007
给 React 组件设计配置接口时，传配置对象和用复合组件两种风格如何取舍？
围绕“给 React 组件设计配置接口时，传配置对象和用复合组件两种风格如何取舍”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答要按定制深度、类型约束和可读性给出取舍依据。
核心关键词React 组件 API 配置对象 复合组件 取舍 - 0008
React 条件渲染时同类组件的状态为什么会保留或丢失，和组件在树中的位置有什么关系？
围绕“React 条件渲染时同类组件的状态为什么会保留或丢失，和组件在树中的位置有什么关系”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 React 按位置加类型匹配决定是否复用状态，并给出用 key 或改变位置控制重置的手段。
核心关键词React 条件渲染 状态保留 重置 位置 - 0009
开发组件库时，如何让一个 React 组件同时支持受控和非受控两种用法？
围绕“开发组件库时，如何让一个 React 组件同时支持受控和非受控两种用法”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须给出『value 是否传入』判定与内部默认 state 合并的实现思路和切换警告规避，不复述受控非受控基础定义。
核心关键词React 组件库 受控 非受控 同时支持 - 0010
React 输入框报『组件从非受控变为受控』警告，通常是什么原因、怎么修？
React 输入框为什么提示从非受控变为受控？从异步回填 undefined、文本空值和复选框 checked 类型入手，说明默认值、稳定模式和组件重建的区别。
核心关键词React 非受控变受控警告 - 0011
React 表单应该选择受控还是非受控，依据是什么？
从当前值的权威来源比较受控与非受控表单，说明实时联动、提交读取、外部重置和性能取舍，避免把非受控误解为没有状态，或认为受控模式一定更慢。
核心关键词React 受控和非受控表单怎么选择 - 0012
什么时候应该把 React 组件里的逻辑抽成自定义 Hook，它对组件设计和测试有什么好处？
围绕“什么时候应该把 React 组件里的逻辑抽成自定义 Hook，它对组件设计和测试有什么好处”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须给出『相同状态逻辑出现在多个组件』的抽取信号及 Hook 单独可测的好处。
核心关键词React 自定义 Hook 抽取逻辑 复用 测试 - 0013
React 非受控输入的 defaultValue 改了，为什么当前内容没跟着变？
区分默认值与用户当前编辑值，说明异步数据回填、表单 reset、业务 key 重建与 ref 命令式赋值的选择，避免用随机 key 覆盖草稿或将 defaultValue 当成持续绑定。
核心关键词React defaultValue 改变输入框不更新 - 0014
如何让依赖网络请求的 React 组件在测试中不真的发请求，设计上要怎么改？
围绕“如何让依赖网络请求的 React 组件在测试中不真的发请求，设计上要怎么改”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须给出把数据获取函数作为 props 注入或上移到容器组件的改造方式。
核心关键词React 组件 可测试 依赖注入 props - 0015
为什么在 React 18 中错误边界必须用 class 组件实现，函数组件加 Hook 为什么做不到？
围绕“为什么在 React 18 中错误边界必须用 class 组件实现，函数组件加 Hook 为什么做不到”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 getDerivedStateFromError 与 componentDidCatch 无 Hook 等价物及社区封装方案的。
核心关键词React 错误边界 class 组件 没有 Hook - 0016
React 错误边界的降级 UI 和 componentDidCatch 里分别应该放什么内容？
围绕“React 错误边界的降级 UI 和 componentDidCatch 里分别应该放什么内容”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须区分降级 UI 的可恢复引导与 componentDidCatch 中错误上报的职责划分。
核心关键词React 错误边界 fallback componentDidCatch 上报 - 0017
React 应用里错误边界应该放在根级一个还是按功能模块放多个，怎么权衡？
围绕“React 应用里错误边界应该放在根级一个还是按功能模块放多个，怎么权衡”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答要按故障隔离范围与降级体验给出分层放置策略。
核心关键词React 错误边界 粒度 放置位置 - 0018
React 错误边界显示降级 UI 后，如何设计重试机制让组件树恢复正常？
围绕“React 错误边界显示降级 UI 后，如何设计重试机制让组件树恢复正常”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须给出通过重置 key 或重挂载触发子树重新渲染的恢复手段及防止立刻再次崩溃的注意点。
核心关键词React 错误边界 重试 重置 key - 0019
React 错误边界捕获不到哪些错误，事件回调和异步代码里的报错该怎么办？
围绕“React 错误边界捕获不到哪些错误，事件回调和异步代码里的报错该怎么办”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须列清渲染期可捕获与事件处理、异步、SSR 中不可捕获的边界，并给出 try/catch 兜底方案。
核心关键词React 错误边界 捕获不到 事件 异步 错误 - 0020
React 文件输入为什么不能像文本框一样用 value 控制，怎样读取文件？
说明文件选择与普通字符串输入的差异，通过 files 和 File 对象读取用户选择，区分文件路径、上传状态、清空选择及 accept 提示和服务端校验。
核心关键词React file input 非受控读取文件 - 0021
React 表单提交成功后，受控与非受控表单各自该如何重置？
围绕“React 表单提交成功后，受控与非受控表单各自该如何重置”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须分别给出受控（重置 state）、非受控（form.reset 或 key 重挂载）及 React 19 action 自动重置的做。
核心关键词React 表单 重置 form.reset key 重挂载 - 0022
React 表单里哪些值不应该放进 state，如何避免冗余状态导致的不一致？
围绕“React 表单里哪些值不应该放进 state，如何避免冗余状态导致的不一致”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须给出区分『源数据』与『渲染期可计算值』的判据并示范派生计算。
核心关键词React 表单 state 派生值 冗余状态 - 0023
React 表单的校验应该在输入时、失焦时还是提交时触发，如何为不同字段选择时机？
围绕“React 表单的校验应该在输入时、失焦时还是提交时触发，如何为不同字段选择时机”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答要按错误打扰程度与性能给出分字段的时机策略。
核心关键词React 表单校验 触发时机 onBlur onChange - 0024
React 非受控表单在提交时如何一次性读取所有字段的值？
围绕“React 非受控表单在提交时如何一次性读取所有字段的值”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须示范 submit 事件中用 FormData 读取全部字段及其适用边界（动态数组、文件）。
核心关键词React 非受控表单 FormData onSubmit 读取 - 0025
为什么给 React 组件换一个 key 能重置它的内部状态，代价是什么？
围绕“为什么给 React 组件换一个 key 能重置它的内部状态，代价是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 key 变化触发卸载重建的机制与丢失焦点、重新请求等代价。
核心关键词React key 重挂载 重置状态 - 0026
当 React 组件有头部、主体、底部多个可定制区域时，单个 children 不够用该怎么办？
围绕“当 React 组件有头部、主体、底部多个可定制区域时，单个 children 不够用该怎么办”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须给出以多个接收 JSX 的 props 充当命名插槽的方案及与单一 children 的边界。
核心关键词React 插槽 命名插槽 多个 props JSX - 0027
在 React 组件内部定义另一个组件为什么会导致输入框每次渲染都丢失焦点？
围绕“在 React 组件内部定义另一个组件为什么会导致输入框每次渲染都丢失焦点”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须定位为每次渲染产生新组件类型导致卸载重建，修复是移到外层或提为模块级组件。
核心关键词React 组件内定义组件 重挂载 丢失焦点 - 0028
React 数字输入框为什么清不空或出现 NaN，状态怎样建模？
区分编辑字符串、空值和合法业务数字，解释 Number 空字符串、valueAsNumber 与 NaN 的边界，并用完整 JSX 示例演示保留空输入、提交时校验与数值转换。
核心关键词React number input 清空 NaN - 0029
通过 Portal 渲染的 React 弹窗，点击事件会冒泡到谁那里，为什么父组件仍能收到？
围绕“通过 Portal 渲染的 React 弹窗，点击事件会冒泡到谁那里，为什么父组件仍能收到”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明事件沿 React 组件树而非 DOM 树冒泡这一关键差异及由此产生的误触发风险。
核心关键词React Portal 事件冒泡 React 树 DOM 树 - 0030
为什么 React 的弹窗、下拉菜单常需要用 Portal 渲染到 body 下，即使定位看似没问题？
围绕“为什么 React 的弹窗、下拉菜单常需要用 Portal 渲染到 body 下，即使定位看似没问题”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释父级 overflow 裁剪和层叠上下文限制，以及 Portal 如何脱离 DOM 层级。
核心关键词React createPortal 弹窗 overflow z-index - 0031
React 表单如何防止用户在请求未完成时重复提交？
围绕“React 表单如何防止用户在请求未完成时重复提交”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须比较本地 pending state 禁用按钮与 React 19 的 useFormStatus 两种做法。
核心关键词React 表单 防止重复提交 pending 禁用 - 0032
解决 React 逐层透传 props（prop drilling）时，组合和 Context 该怎么选？
围绕“解决 React 逐层透传 props（prop drilling）时，组合和 Context 该怎么选”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须比较组件组合注入与 Context 在耦合度、重渲染、数据性质上的差异。
核心关键词React prop drilling 组合 Context 选择 - 0033
把 props 直接用作 React state 初始值时，为什么后续 props 变化不会同步，正确做法有哪些？
围绕“把 props 直接用作 React state 初始值时，为什么后续 props 变化不会同步，正确做法有哪些”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 useState 初始值只在首次渲染生效，并比较 key 重挂载、渲染期派生、受控化三种修复的适用场景。
核心关键词React props 初始化 state 不同步 - 0034
为什么说保持 React 组件渲染纯净能提高可测试性，哪些副作用会破坏这种纯净？
围绕“为什么说保持 React 组件渲染纯净能提高可测试性，哪些副作用会破坏这种纯净”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须指出渲染期修改外部变量、依赖可变全局值等破坏可预测性的写法及修复方向。
核心关键词React 纯组件 副作用 可测试性 - 0035
React 19 中 form 的 action 属性和传统 onSubmit 处理方式有什么区别？
围绕“React 19 中 form 的 action 属性和传统 onSubmit 处理方式有什么区别”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 action 函数自动接收 FormData、配合 useActionState 管理提交结果的新流程，需明确这是 React。
核心关键词React 19 form action useActionState - 0036
React 中复用逻辑时，render props 模式和自定义 Hook 各适合什么场景？
围绕“React 中复用逻辑时，render props 模式和自定义 Hook 各适合什么场景”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答要按是否涉及 UI 结构定制给出选型标准。
核心关键词React render props 自定义 Hook 逻辑复用 对比 - 0037
设计一个可复用的 React 表单字段组件时，props 接口应该怎么设计才好用？
围绕“设计一个可复用的 React 表单字段组件时，props 接口应该怎么设计才好用”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖完整回答要覆盖 label、错误信息、ref 转发与原生属性透传的接口设计。
核心关键词React 可复用 表单字段组件 props 设计 - 0038
React select 多选受控时 value 传什么，怎样读取全部选项？
解释原生 select multiple 的字符串数组 value、selectedOptions 与 FormData.getAll，说明选项删除、异步回填、空选择和选中顺序的业务边界。
核心关键词React select multiple 受控 value 数组 - 0039
React 多字段表单怎样共用 onChange，哪些控件需要单独处理？
用字段 name 与函数式对象更新组织通用处理器，说明 checkbox、number、select multiple 和 file 的读取差异，以及字段白名单、嵌套路径与表单状态拆分边界。
核心关键词React 多个 input 共用 onChange - 0040
React 状态提升过度会带来什么问题，如何判断状态应该就近放置？
围绕“React 状态提升过度会带来什么问题，如何判断状态应该就近放置”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明过度提升导致无关组件重渲染和 props 臃肿，并给出就近放置的判据。
核心关键词React 状态就近 过度提升 性能 - 0041
测试 React 组件时为什么应该断言用户可见的行为而不是组件内部 state？
围绕“测试 React 组件时为什么应该断言用户可见的行为而不是组件内部 state”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明绑定实现细节的测试在重构时误伤、行为断言稳定的原因及取舍边界。
核心关键词React 组件测试 行为 实现细节 - 0042
为什么 React 的 textarea 用 value 属性而不是子节点设初始内容，这和 HTML 有何不同？
围绕“为什么 React 的 textarea 用 value 属性而不是子节点设初始内容，这和 HTML 有何不同”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 React 统一用 value/defaultValue 取代 HTML 的文本子节点写法及迁移注意点。
核心关键词React textarea value 子节点 区别 - 0043
为什么 React 19 的 useFormStatus 必须写在 form 内部的子组件里才有效？
围绕“为什么 React 19 的 useFormStatus 必须写在 form 内部的子组件里才有效”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释它从最近的父 form 读取提交状态、与按钮组件复用的关系。
核心关键词React 19 useFormStatus 子组件 form - 0044
为什么自定义 React 输入组件通常遵循 value/onChange 的约定，这样做有什么好处？
围绕“为什么自定义 React 输入组件通常遵循 value/onChange 的约定，这样做有什么好处”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明该约定让自定义组件可无缝替换原生控件并被统一表单逻辑接管。
核心关键词React 自定义组件 value onChange 约定