React 复选框用 checked 还是 defaultChecked，多选状态怎样保存？
React 复选框用 checked 还是 defaultChecked，多选状态怎样保存？ 本文先给出可直接复述的结论，再用最小代码说明React checkbox checked 和 defaultChecked 区别的工作方式、判断依据、项目边界和常见误区。
核心关键词React checkbox checked 和 defaultChecked 区别
面试知识索引 · 分类、标签与搜索
React · 组件设计面试题，44 道完整答案
React · 组件设计面试题第 1 页，显示第 1–44 题，共找到 44 道完整解析，可继续按分类、标签与关键词缩小范围。
44筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
如何利用把 JSX 作为 children 传入的方式减少 React 组件间不必要的 props 传递？
如何利用把 JSX 作为 children 传入的方式减少 React 组件间不必要的 props 传递？ 本文先给出可直接复述的结论，再用最小代码说明React children 组合 减少 props 传递的工作方式、判断依据、项目边界和常见误区。
核心关键词React children 组合 减少 props 传递 - 0003
为什么不能把 React 的 children 当普通数组随意操作，官方提供了什么替代手段？
为什么不能把 React 的 children 当普通数组随意操作，官方提供了什么替代手段？ 本文先给出可直接复述的结论，再用最小代码说明React children 不透明数据结构 Children API的工作方式、判断依据、项目边界和常见误区。
核心关键词React children 不透明数据结构 Children API - 0004
用 cloneElement 给 React 子组件偷偷注入 props 有什么隐患，更好的替代方案是什么？
用 cloneElement 给 React 子组件偷偷注入 props 有什么隐患，更好的替代方案是什么？ 本文先给出可直接复述的结论，再用最小代码说明React cloneElement 隐患 替代 组合 Context的工作方式、判断依据、项目边界和常见误区。
核心关键词React cloneElement 隐患 替代 组合 Context - 0005
拿到设计稿后，怎样拆 React 组件并决定状态放在哪里？
拿到设计稿后，怎样拆 React 组件并决定状态放在哪里？ 本文先给出可直接复述的结论，再用最小代码说明React 组件拆分和状态归属设计的工作方式、判断依据、项目边界和常见误区。
核心关键词React 组件拆分和状态归属设计 - 0006
什么是 React 的复合组件模式，为什么 Select/Option 这类组件适合用它设计？
什么是 React 的复合组件模式，为什么 Select/Option 这类组件适合用它设计？ 本文先给出可直接复述的结论，再用最小代码说明React 复合组件 compound component Context的工作方式、判断依据、项目边界和常见误区。
核心关键词React 复合组件 compound component Context - 0007
给 React 组件设计配置接口时，传配置对象和用复合组件两种风格如何取舍？
给 React 组件设计配置接口时，传配置对象和用复合组件两种风格如何取舍？ 本文先给出可直接复述的结论，再用最小代码说明React 组件 API 配置对象 复合组件 取舍的工作方式、判断依据、项目边界和常见误区。
核心关键词React 组件 API 配置对象 复合组件 取舍 - 0008
React 条件渲染时同类组件的状态为什么会保留或丢失，和组件在树中的位置有什么关系？
React 条件渲染时同类组件的状态为什么会保留或丢失，和组件在树中的位置有什么关系？ 本文先给出可直接复述的结论，再用最小代码说明React 条件渲染 状态保留 重置 位置的工作方式、判断依据、项目边界和常见误区。
核心关键词React 条件渲染 状态保留 重置 位置 - 0009
开发组件库时，如何让一个 React 组件同时支持受控和非受控两种用法？
开发组件库时，如何让一个 React 组件同时支持受控和非受控两种用法？ 本文先给出可直接复述的结论，再用最小代码说明React 组件库 受控 非受控 同时支持的工作方式、判断依据、项目边界和常见误区。
核心关键词React 组件库 受控 非受控 同时支持 - 0010
React 输入框报『组件从非受控变为受控』警告，通常是什么原因、怎么修？
React 输入框报『组件从非受控变为受控』警告，通常是什么原因、怎么修？ 本文先给出可直接复述的结论，再用最小代码说明React 非受控变受控警告的工作方式、判断依据、项目边界和常见误区。
核心关键词React 非受控变受控警告 - 0011
React 表单应该选择受控还是非受控，依据是什么？
React 表单应该选择受控还是非受控，依据是什么？ 本文先给出可直接复述的结论，再用最小代码说明React 受控和非受控表单怎么选择的工作方式、判断依据、项目边界和常见误区。
核心关键词React 受控和非受控表单怎么选择 - 0012
什么时候应该把 React 组件里的逻辑抽成自定义 Hook，它对组件设计和测试有什么好处？
什么时候应该把 React 组件里的逻辑抽成自定义 Hook，它对组件设计和测试有什么好处？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 抽取逻辑 复用 测试的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 抽取逻辑 复用 测试 - 0013
React 非受控输入的 defaultValue 改了，为什么当前内容没跟着变？
React 非受控输入的 defaultValue 改了，为什么当前内容没跟着变？ 本文先给出可直接复述的结论，再用最小代码说明React defaultValue 改变输入框不更新的工作方式、判断依据、项目边界和常见误区。
核心关键词React defaultValue 改变输入框不更新 - 0014
如何让依赖网络请求的 React 组件在测试中不真的发请求，设计上要怎么改？
如何让依赖网络请求的 React 组件在测试中不真的发请求，设计上要怎么改？ 本文先给出可直接复述的结论，再用最小代码说明React 组件 可测试 依赖注入 props的工作方式、判断依据、项目边界和常见误区。
核心关键词React 组件 可测试 依赖注入 props - 0015
为什么在 React 18 中错误边界必须用 class 组件实现，函数组件加 Hook 为什么做不到？
为什么在 React 18 中错误边界必须用 class 组件实现，函数组件加 Hook 为什么做不到？ 本文先给出可直接复述的结论，再用最小代码说明React 错误边界 class 组件 没有 Hook的工作方式、判断依据、项目边界和常见误区。
核心关键词React 错误边界 class 组件 没有 Hook - 0016
React 错误边界的降级 UI 和 componentDidCatch 里分别应该放什么内容？
React 错误边界的降级 UI 和 componentDidCatch 里分别应该放什么内容？ 本文先给出可直接复述的结论，再用最小代码说明React 错误边界 fallback componentDidCatch 上报的工作方式、判断依据、项目边界和常见误区。
核心关键词React 错误边界 fallback componentDidCatch 上报 - 0017
React 应用里错误边界应该放在根级一个还是按功能模块放多个，怎么权衡？
React 应用里错误边界应该放在根级一个还是按功能模块放多个，怎么权衡？ 本文先给出可直接复述的结论，再用最小代码说明React 错误边界 粒度 放置位置的工作方式、判断依据、项目边界和常见误区。
核心关键词React 错误边界 粒度 放置位置 - 0018
React 错误边界显示降级 UI 后，如何设计重试机制让组件树恢复正常？
React 错误边界显示降级 UI 后，如何设计重试机制让组件树恢复正常？ 本文先给出可直接复述的结论，再用最小代码说明React 错误边界 重试 重置 key的工作方式、判断依据、项目边界和常见误区。
核心关键词React 错误边界 重试 重置 key - 0019
React 错误边界捕获不到哪些错误，事件回调和异步代码里的报错该怎么办？
React 错误边界捕获不到哪些错误，事件回调和异步代码里的报错该怎么办？ 本文先给出可直接复述的结论，再用最小代码说明React 错误边界 捕获不到 事件 异步 错误的工作方式、判断依据、项目边界和常见误区。
核心关键词React 错误边界 捕获不到 事件 异步 错误 - 0020
React 文件输入为什么不能像文本框一样用 value 控制，怎样读取文件？
React 文件输入为什么不能像文本框一样用 value 控制，怎样读取文件？ 本文先给出可直接复述的结论，再用最小代码说明React file input 非受控读取文件的工作方式、判断依据、项目边界和常见误区。
核心关键词React file input 非受控读取文件 - 0021
React 表单提交成功后，受控与非受控表单各自该如何重置？
React 表单提交成功后，受控与非受控表单各自该如何重置？ 本文先给出可直接复述的结论，再用最小代码说明React 表单 重置 form.reset key 重挂载的工作方式、判断依据、项目边界和常见误区。
核心关键词React 表单 重置 form.reset key 重挂载 - 0022
React 表单里哪些值不应该放进 state，如何避免冗余状态导致的不一致？
React 表单里哪些值不应该放进 state，如何避免冗余状态导致的不一致？ 本文先给出可直接复述的结论，再用最小代码说明React 表单 state 派生值 冗余状态的工作方式、判断依据、项目边界和常见误区。
核心关键词React 表单 state 派生值 冗余状态 - 0023
React 表单的校验应该在输入时、失焦时还是提交时触发，如何为不同字段选择时机？
React 表单的校验应该在输入时、失焦时还是提交时触发，如何为不同字段选择时机？ 本文先给出可直接复述的结论，再用最小代码说明React 表单校验 触发时机 onBlur onChange的工作方式、判断依据、项目边界和常见误区。
核心关键词React 表单校验 触发时机 onBlur onChange - 0024
React 非受控表单在提交时如何一次性读取所有字段的值？
React 非受控表单在提交时如何一次性读取所有字段的值？ 本文先给出可直接复述的结论，再用最小代码说明React 非受控表单 FormData onSubmit 读取的工作方式、判断依据、项目边界和常见误区。
核心关键词React 非受控表单 FormData onSubmit 读取 - 0025
为什么给 React 组件换一个 key 能重置它的内部状态，代价是什么？
为什么给 React 组件换一个 key 能重置它的内部状态，代价是什么？ 本文先给出可直接复述的结论，再用最小代码说明React key 重挂载 重置状态的工作方式、判断依据、项目边界和常见误区。
核心关键词React key 重挂载 重置状态 - 0026
当 React 组件有头部、主体、底部多个可定制区域时，单个 children 不够用该怎么办？
当 React 组件有头部、主体、底部多个可定制区域时，单个 children 不够用该怎么办？ 本文先给出可直接复述的结论，再用最小代码说明React 插槽 命名插槽 多个 props JSX的工作方式、判断依据、项目边界和常见误区。
核心关键词React 插槽 命名插槽 多个 props JSX - 0027
在 React 组件内部定义另一个组件为什么会导致输入框每次渲染都丢失焦点？
在 React 组件内部定义另一个组件为什么会导致输入框每次渲染都丢失焦点？ 本文先给出可直接复述的结论，再用最小代码说明React 组件内定义组件 重挂载 丢失焦点的工作方式、判断依据、项目边界和常见误区。
核心关键词React 组件内定义组件 重挂载 丢失焦点 - 0028
React 数字输入框为什么清不空或出现 NaN，状态怎样建模？
区分编辑字符串、空值和合法业务数字，解释 Number 空字符串、valueAsNumber 与 NaN 的边界，并用完整 JSX 示例演示保留空输入、提交时校验与数值转换。
核心关键词React number input 清空 NaN - 0029
通过 Portal 渲染的 React 弹窗，点击事件会冒泡到谁那里，为什么父组件仍能收到？
通过 Portal 渲染的 React 弹窗，点击事件会冒泡到谁那里，为什么父组件仍能收到？ 本文先给出可直接复述的结论，再用最小代码说明React Portal 事件冒泡 React 树 DOM 树的工作方式、判断依据、项目边界和常见误区。
核心关键词React Portal 事件冒泡 React 树 DOM 树 - 0030
为什么 React 的弹窗、下拉菜单常需要用 Portal 渲染到 body 下，即使定位看似没问题？
为什么 React 的弹窗、下拉菜单常需要用 Portal 渲染到 body 下，即使定位看似没问题？ 本文先给出可直接复述的结论，再用最小代码说明React createPortal 弹窗 overflow z-index的工作方式、判断依据、项目边界和常见误区。
核心关键词React createPortal 弹窗 overflow z-index - 0031
React 表单如何防止用户在请求未完成时重复提交？
React 表单如何防止用户在请求未完成时重复提交？ 本文先给出可直接复述的结论，再用最小代码说明React 表单 防止重复提交 pending 禁用的工作方式、判断依据、项目边界和常见误区。
核心关键词React 表单 防止重复提交 pending 禁用 - 0032
解决 React 逐层透传 props（prop drilling）时，组合和 Context 该怎么选？
解决 React 逐层透传 props（prop drilling）时，组合和 Context 该怎么选？ 本文先给出可直接复述的结论，再用最小代码说明React prop drilling 组合 Context 选择的工作方式、判断依据、项目边界和常见误区。
核心关键词React prop drilling 组合 Context 选择 - 0033
把 props 直接用作 React state 初始值时，为什么后续 props 变化不会同步，正确做法有哪些？
把 props 直接用作 React state 初始值时，为什么后续 props 变化不会同步，正确做法有哪些？ 本文先给出可直接复述的结论，再用最小代码说明React props 初始化 state 不同步的工作方式、判断依据、项目边界和常见误区。
核心关键词React props 初始化 state 不同步 - 0034
为什么说保持 React 组件渲染纯净能提高可测试性，哪些副作用会破坏这种纯净？
为什么说保持 React 组件渲染纯净能提高可测试性，哪些副作用会破坏这种纯净？ 本文先给出可直接复述的结论，再用最小代码说明React 纯组件 副作用 可测试性的工作方式、判断依据、项目边界和常见误区。
核心关键词React 纯组件 副作用 可测试性 - 0035
React 19 中 form 的 action 属性和传统 onSubmit 处理方式有什么区别？
React 19 中 form 的 action 属性和传统 onSubmit 处理方式有什么区别？ 本文先给出可直接复述的结论，再用最小代码说明React 19 form action useActionState的工作方式、判断依据、项目边界和常见误区。
核心关键词React 19 form action useActionState - 0036
React 中复用逻辑时，render props 模式和自定义 Hook 各适合什么场景？
React 中复用逻辑时，render props 模式和自定义 Hook 各适合什么场景？ 本文先给出可直接复述的结论，再用最小代码说明React render props 自定义 Hook 逻辑复用 对比的工作方式、判断依据、项目边界和常见误区。
核心关键词React render props 自定义 Hook 逻辑复用 对比 - 0037
设计一个可复用的 React 表单字段组件时，props 接口应该怎么设计才好用？
设计一个可复用的 React 表单字段组件时，props 接口应该怎么设计才好用？ 本文先给出可直接复述的结论，再用最小代码说明React 可复用 表单字段组件 props 设计的工作方式、判断依据、项目边界和常见误区。
核心关键词React 可复用 表单字段组件 props 设计 - 0038
React select 多选受控时 value 传什么，怎样读取全部选项？
解释原生 select multiple 的字符串数组 value、selectedOptions 与 FormData.getAll，说明选项删除、异步回填、空选择和选中顺序的业务边界。
核心关键词React select multiple 受控 value 数组 - 0039
React 多字段表单怎样共用 onChange，哪些控件需要单独处理？
React 多字段表单怎样共用 onChange，哪些控件需要单独处理？ 本文先给出可直接复述的结论，再用最小代码说明React 多个 input 共用 onChange的工作方式、判断依据、项目边界和常见误区。
核心关键词React 多个 input 共用 onChange - 0040
React 状态提升过度会带来什么问题，如何判断状态应该就近放置？
React 状态提升过度会带来什么问题，如何判断状态应该就近放置？ 本文先给出可直接复述的结论，再用最小代码说明React 状态就近 过度提升 性能的工作方式、判断依据、项目边界和常见误区。
核心关键词React 状态就近 过度提升 性能 - 0041
测试 React 组件时为什么应该断言用户可见的行为而不是组件内部 state？
测试 React 组件时为什么应该断言用户可见的行为而不是组件内部 state？ 本文先给出可直接复述的结论，再用最小代码说明React 组件测试 行为 实现细节的工作方式、判断依据、项目边界和常见误区。
核心关键词React 组件测试 行为 实现细节 - 0042
为什么 React 的 textarea 用 value 属性而不是子节点设初始内容，这和 HTML 有何不同？
为什么 React 的 textarea 用 value 属性而不是子节点设初始内容，这和 HTML 有何不同？ 本文先给出可直接复述的结论，再用最小代码说明React textarea value 子节点 区别的工作方式、判断依据、项目边界和常见误区。
核心关键词React textarea value 子节点 区别 - 0043
为什么 React 19 的 useFormStatus 必须写在 form 内部的子组件里才有效？
为什么 React 19 的 useFormStatus 必须写在 form 内部的子组件里才有效？ 本文先给出可直接复述的结论，再用最小代码说明React 19 useFormStatus 子组件 form的工作方式、判断依据、项目边界和常见误区。
核心关键词React 19 useFormStatus 子组件 form - 0044
为什么自定义 React 输入组件通常遵循 value/onChange 的约定，这样做有什么好处？
为什么自定义 React 输入组件通常遵循 value/onChange 的约定，这样做有什么好处？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义组件 value onChange 约定的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义组件 value onChange 约定