React 什么时候需要提升状态,和 Context 怎么配合?
从状态归属、共享范围与生命周期解释状态提升和 Context 的关系:先确定共同所有者,再选择 props 或 Context 分发,避免用组件层数替代状态设计。
React · 状态共享面试题第 1 页,显示第 1–37 题,共找到 37 道完整解析,可继续按分类、标签与关键词缩小范围。
按稳定语义路径排序
从状态归属、共享范围与生命周期解释状态提升和 Context 的关系:先确定共同所有者,再选择 props 或 Context 分发,避免用组件层数替代状态设计。
解释 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 的触发时机。
结合编辑器设置、光标状态与命令入口,说明 Context 拆分应看消费者重叠、更新频率和业务生命周期,避免只按字段数、Provider 层数或强制 useMemo 作决定。
围绕“React 官方对共享状态的结构设计提出哪些原则,冗余和矛盾的状态会带来什么具体问题”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖完整回答要覆盖分组关联数据、消除冗余、避免矛盾、避免深层嵌套四原则及各自引发的同步 bug,不展开某个具体表单例子。
围绕“React 为什么说状态是绑定在 UI 树的渲染位置上而不是绑定在组件函数本身”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出同位置渲染同组件则状态保留、不同位置即使同组件也是独立状态,不讨论 key 的显式重置用法。
围绕“React 的 useSyncExternalStore 中 subscribe 函数何时被调用、其返回的清理函数何”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出提交后订阅、快照变化时重新检查、卸载或依赖变化时清理的时序,不讨论 getSnapshot 的返回值要求。
围绕“React 18 并发渲染下直接用 useState 加外部可变数据读取为什么会出现 tearing(界面撕裂)”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出渲染被中断期间外部数据变化导致同屏读到新旧两个值,以及 useSyncExternalStore 如何规避,不展开 SSR 场景。
用主题切换说明深层组件怎样调用 Context 中的 setter、dispatch 或业务命令,区分状态所有权、函数稳定性、函数式更新与直接修改 Context 对象的风险。
围绕“React 中筛选条件、当前标签页这类 UI 状态,什么情况下应该放进 URL 而不是组件 state 或 Cont”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须给出需要刷新保留、可分享链接、前进后退可导航这三条放 URL 的判据及内存态的适用面,不展开路由库 API。
围绕“React 19 的 use() 相比 useContext 在读取共享数据上多出了什么能力”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出 use 可在条件或循环中调用、且能直接读取 Promise 配合 Suspense,不展开服务端组件的用法。
围绕“React 的 useSyncExternalStore 三个参数各自承担什么职责,返回值如何保证一致性”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答清 subscribe 注册变更通知、getSnapshot 读取当前快照、getServerSnapshot 服务端的职责划分,。
解释内联对象怎样造成 Context value 身份变化,用完整 JSX 示例区分无关计数更新与真实主题更新,并说明 useMemo 依赖、函数缓存和 React Compiler 的适用边界。
围绕“React 中什么信号说明 Context 已经不够用、应该引入带订阅的外部 store”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出高频更新、需要字段级订阅或非 React 代码读写这三个触发条件,不展开具体第三方库的 API。
从数据可见性、组件组合、消费范围和测试成本比较 props 与 Context,用局部地区设置示例说明怎样减少无意义的中间传递,同时保留清晰的组件依赖。