React 文件输入为什么不能像文本框一样用 value 控制,怎样读取文件?
说明文件选择与普通字符串输入的差异,通过 files 和 File 对象读取用户选择,区分文件路径、上传状态、清空选择及 accept 提示和服务端校验。
程序员面试题库第 69 页,收录第 3401–3450 题,共 5000 道完整解析,覆盖前端、JavaScript、React、Vue、Node.js、AI Agent、网络、数据库与系统设计。
按稳定语义路径排序
说明文件选择与普通字符串输入的差异,通过 files 和 File 对象读取用户选择,区分文件路径、上传状态、清空选择及 accept 提示和服务端校验。
围绕“React 表单提交成功后,受控与非受控表单各自该如何重置”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须分别给出受控(重置 state)、非受控(form.reset 或 key 重挂载)及 React 19 action 自动重置的做。
围绕“React 表单里哪些值不应该放进 state,如何避免冗余状态导致的不一致”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须给出区分『源数据』与『渲染期可计算值』的判据并示范派生计算。
围绕“React 表单的校验应该在输入时、失焦时还是提交时触发,如何为不同字段选择时机”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答要按错误打扰程度与性能给出分字段的时机策略。
围绕“React 非受控表单在提交时如何一次性读取所有字段的值”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答需要围绕必须示范 submit 事件中用 FormData 读取全部字段及其适用边界(动态数组、文件)。
围绕“为什么给 React 组件换一个 key 能重置它的内部状态,代价是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 key 变化触发卸载重建的机制与丢失焦点、重新请求等代价。
从状态归属、共享范围与生命周期解释状态提升和 Context 的关系:先确定共同所有者,再选择 props 或 Context 分发,避免用组件层数替代状态设计。
围绕“当 React 组件有头部、主体、底部多个可定制区域时,单个 children 不够用该怎么办”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须给出以多个接收 JSX 的 props 充当命名插槽的方案及与单一 children 的边界。
围绕“在 React 组件内部定义另一个组件为什么会导致输入框每次渲染都丢失焦点”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答需要围绕必须定位为每次渲染产生新组件类型导致卸载重建,修复是移到外层或提为模块级组件。
区分编辑字符串、空值和合法业务数字,解释 Number 空字符串、valueAsNumber 与 NaN 的边界,并用完整 JSX 示例演示保留空输入、提交时校验与数值转换。
围绕“通过 Portal 渲染的 React 弹窗,点击事件会冒泡到谁那里,为什么父组件仍能收到”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明事件沿 React 组件树而非 DOM 树冒泡这一关键差异及由此产生的误触发风险。
围绕“为什么 React 的弹窗、下拉菜单常需要用 Portal 渲染到 body 下,即使定位看似没问题”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释父级 overflow 裁剪和层叠上下文限制,以及 Portal 如何脱离 DOM 层级。
围绕“React 表单如何防止用户在请求未完成时重复提交”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须比较本地 pending state 禁用按钮与 React 19 的 useFormStatus 两种做法。
围绕“解决 React 逐层透传 props(prop drilling)时,组合和 Context 该怎么选”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须比较组件组合注入与 Context 在耦合度、重渲染、数据性质上的差异。
围绕“把 props 直接用作 React state 初始值时,为什么后续 props 变化不会同步,正确做法有哪些”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 useState 初始值只在首次渲染生效,并比较 key 重挂载、渲染期派生、受控化三种修复的适用场景。
围绕“为什么说保持 React 组件渲染纯净能提高可测试性,哪些副作用会破坏这种纯净”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须指出渲染期修改外部变量、依赖可变全局值等破坏可预测性的写法及修复方向。
围绕“React 19 中 form 的 action 属性和传统 onSubmit 处理方式有什么区别”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 action 函数自动接收 FormData、配合 useActionState 管理提交结果的新流程,需明确这是 React。
围绕“React 中复用逻辑时,render props 模式和自定义 Hook 各适合什么场景”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答要按是否涉及 UI 结构定制给出选型标准。
围绕“设计一个可复用的 React 表单字段组件时,props 接口应该怎么设计才好用”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖完整回答要覆盖 label、错误信息、ref 转发与原生属性透传的接口设计。
解释原生 select multiple 的字符串数组 value、selectedOptions 与 FormData.getAll,说明选项删除、异步回填、空选择和选中顺序的业务边界。
用字段 name 与函数式对象更新组织通用处理器,说明 checkbox、number、select multiple 和 file 的读取差异,以及字段白名单、嵌套路径与表单状态拆分边界。
围绕“React 状态提升过度会带来什么问题,如何判断状态应该就近放置”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明过度提升导致无关组件重渲染和 props 臃肿,并给出就近放置的判据。
围绕“测试 React 组件时为什么应该断言用户可见的行为而不是组件内部 state”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明绑定实现细节的测试在重构时误伤、行为断言稳定的原因及取舍边界。
围绕“为什么 React 的 textarea 用 value 属性而不是子节点设初始内容,这和 HTML 有何不同”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 React 统一用 value/defaultValue 取代 HTML 的文本子节点写法及迁移注意点。
围绕“为什么 React 19 的 useFormStatus 必须写在 form 内部的子组件里才有效”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释它从最近的父 form 读取提交状态、与按钮组件复用的关系。
围绕“为什么自定义 React 输入组件通常遵循 value/onChange 的约定,这样做有什么好处”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明该约定让自定义组件可无缝替换原生控件并被统一表单逻辑接管。
解释 Provider 与消费者之间的 memo 边界为何不能拦截 Context 更新,区分 props、Context 和本地状态三种渲染来源,并说明外层读取、内层接收必要 props 的优化方式。
围绕“React 中把子树以 children prop 传入有状态的父组件,为什么父组件状态变化时这些子组件不会重渲染”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出 children 是父级创建的元素对象、引用未变则被跳过这一机制,不讨论它作为 context 替代方案的数据传递作用。
useContext 解构某个字段为什么不等于按字段订阅?从 Object.is、最近 Provider、原地修改对象和父组件渲染几个角度,解释 Context 消费者的更新范围与诊断步骤。
围绕“React 中设计一个可被父组件共享其值的可复用组件时,受控与非受控两种模式的状态归属差别是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答清受控模式状态归父组件、非受控归组件内部,以及同一组件混用两种模式的冲突,不展开表单具体实现。
createContext 的默认值只在没有匹配 Provider 时使用吗?解释 Provider 传 undefined、嵌套覆盖、同组件读取与模块重复加载,并给出缺失 Provider 的排查顺序。
围绕“拿到一个「页面输入时整棵树都在重渲染」的 React 应用,如何定位是不是 Context 使用不当导致的”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须给出用 Profiler 观察「为什么渲染」归因到 context 值变化的诊断路径,以及确认后的修复方向概览,不展开每种修复的实现。
围绕“React 官方为什么把「在 useEffect 里获取服务器数据并存入 state」列为需要框架或路由层介入的场景”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出缺少缓存去重、瀑布、竞态与生命周期耦合这些固有缺陷,不展开竞态修复代码。
围绕“React 中切换筛选条件快速触发多次 effect 请求时,旧响应后到导致界面显示过期数据,官方推荐的解法是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出 cleanup 中置 ignore 标志使过期响应被丢弃的机制,以及为何不能依赖请求顺序假设,不展开缓存方案。
围绕“React 中一个多字段共享编辑状态的表单,选择每个字段一个 useState 还是整体一个对象 state 的判断”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须给出字段间是否有联动更新、是否整体提交替换这两条判断依据及嵌套过深的代价,不展开受控/非受控概念。
围绕“React 中判断一份客户端状态是否值得提升为全局共享状态的标准是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须给出跨路由存活、多个互不相关子树共用、非 React 代码也要读写等判据,不讨论具体全局库。
围绕“为什么通过 Context 共享给多个组件的对象状态必须做不可变更新,直接修改字段会发生什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出直接修改不改引用导致消费者收不到变化通知、且违反渲染期纯函数约束,不展开数组更新的具体 API。
说明嵌套 Context Provider 的最近祖先规则、整个 value 覆盖而非对象合并、undefined 与默认值的区别,以及局部主题扩展和服务端渲染的边界。
围绕“React 中父子组件各自在 effect 里请求数据会形成请求瀑布,官方建议的消除思路是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出把请求上移到路由或服务端层并行发起、而非在渲染树中逐级触发,不展开竞态处理。
围绕“为什么说把接口返回的数据直接塞进 React Context 并不等于拥有了服务器数据缓存”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出 Context 只是传值通道、没有失效、去重、重取与 staleness 管理,所以缓存职责应交给专门层,不展开具体库对比。
围绕“React 19 的 useOptimistic 在共享服务器数据的界面上如何实现乐观更新,提交失败时界面如何回退”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出乐观值仅在异步操作期间临时呈现、完成后回到真实状态这一生命周期,不展开 useActionState 的表单集成。
围绕“React 中一个组件被条件渲染卸载后还想保留它的编辑进度等状态,有哪些手段及取舍”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须对比状态上移、用 CSS 隐藏代替卸载、存入外部存储三条路线的代价,不讨论 key 重置。
围绕“React 中把父组件传入的 props 用 useState 复制一份再共享给子组件,为什么被认为是反模式”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出 props 更新后本地副本过期、渲染期派生或 key 重置两种替代方案,不展开 effect 同步的写法。
围绕“React 中把多个组件共享的状态更新逻辑抽成 reducer,相比分散的 useState 在归属和可测试性上带来”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出更新逻辑集中到纯函数、事件派发与状态计算分离便于测试,不展开与 Context 组合的重渲染优化。
从数据读取与动作提交的不同需求出发,解释 useReducer 和 Context 的职责、dispatch 稳定身份、状态与动作分离的收益,以及拆分后仍可能由父层触发渲染的边界。
围绕“React 中需要在多个组件间共享但变化时不应触发渲染的值,为什么应该用 ref 或模块级变量而不是 state”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出 ref 变化不触发重渲染的语义与适用值类型(定时器 id、已挂载标记),不讨论 DOM ref 用法。
围绕“React Context 不支持选择器,组件只想订阅其中一部分数据时有哪些官方认可的规避方案及各自代价”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须对比拆分 context、memo 子组件、useSyncExternalStore 三条路线的适用前提,不展开 tearing 的。
围绕“React 服务端渲染与客户端水合共用 useSyncExternalStore 时,getServerSnapsh”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出服务端没有真实订阅源、需保证水合前后快照一致否则 hydration 不匹配,不展开 tearing 问题。
围绕“React 面试中如何区分「服务器状态」与「客户端状态」,这一分类为什么影响状态管理选型”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出服务器状态有远端权威源、需要缓存失效与重取、不属于组件私有这一分类依据,不展开某个缓存库 API。
围绕“为什么 React 的 useSyncExternalStore 要求 getSnapshot 多次调用必须返回缓存”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出返回新对象会被判定为数据已变而触发无限重渲染循环,不展开 subscribe 的触发时机。