拿到一个「页面输入时整棵树都在重渲染」的 React 应用,如何定位是不是 Context 使用不当导致的?
拿到一个「页面输入时整棵树都在重渲染」的 React 应用,如何定位是不是 Context 使用不当导致的? 本文先给出可直接复述的结论，再用最小代码说明React Profiler 诊断 Context 多余渲染的工作方式、判断依据、项目边界和常见误区。
核心关键词React Profiler 诊断 Context 多余渲染
面试知识索引 · 分类、标签与搜索
React面试题，281 道完整答案
React面试题第 2 页，显示第 51–100 题，共找到 281 道完整解析，可继续按分类、标签与关键词缩小范围。
281筛选结果
52技术分类
178检索标签
6索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 2 页
本页面试问题
按稳定语义路径排序
- 0051
- 0052
React 官方为什么把「在 useEffect 里获取服务器数据并存入 state」列为需要框架或路由层介入的场景?
React 官方为什么把「在 useEffect 里获取服务器数据并存入 state」列为需要框架或路由层介入的场景? 本文先给出可直接复述的结论，再用最小代码说明React useEffect 获取数据 缺陷 官方建议的工作方式、判断依据、项目边界和常见误区。
核心关键词React useEffect 获取数据 缺陷 官方建议 - 0053
React 中切换筛选条件快速触发多次 effect 请求时,旧响应后到导致界面显示过期数据,官方推荐的解法是什么?
React 中切换筛选条件快速触发多次 effect 请求时,旧响应后到导致界面显示过期数据,官方推荐的解法是什么? 本文先给出可直接复述的结论，再用最小代码说明React effect 请求竞态 cleanup ignore的工作方式、判断依据、项目边界和常见误区。
核心关键词React effect 请求竞态 cleanup ignore - 0054
React 中一个多字段共享编辑状态的表单,选择每个字段一个 useState 还是整体一个对象 state 的判断依据是什么?
React 中一个多字段共享编辑状态的表单,选择每个字段一个 useState 还是整体一个对象 state 的判断依据是什么? 本文先给出可直接复述的结论，再用最小代码说明React 表单 state 拆分 合并 对象的工作方式、判断依据、项目边界和常见误区。
核心关键词React 表单 state 拆分 合并 对象 - 0055
React 中判断一份客户端状态是否值得提升为全局共享状态的标准是什么?
React 中判断一份客户端状态是否值得提升为全局共享状态的标准是什么? 本文先给出可直接复述的结论，再用最小代码说明React 全局状态 局部状态 判断标准的工作方式、判断依据、项目边界和常见误区。
核心关键词React 全局状态 局部状态 判断标准 - 0056
为什么通过 Context 共享给多个组件的对象状态必须做不可变更新,直接修改字段会发生什么?
为什么通过 Context 共享给多个组件的对象状态必须做不可变更新,直接修改字段会发生什么? 本文先给出可直接复述的结论，再用最小代码说明React Context 共享对象 不可变更新的工作方式、判断依据、项目边界和常见误区。
核心关键词React Context 共享对象 不可变更新 - 0057
同一个 React Context 嵌套 Provider 时，消费者读取哪一层？
同一个 React Context 嵌套 Provider 时，消费者读取哪一层？ 本文先给出可直接复述的结论，再用最小代码说明React Context 嵌套 Provider 覆盖规则的工作方式、判断依据、项目边界和常见误区。
核心关键词React Context 嵌套 Provider 覆盖规则 - 0058
React 中父子组件各自在 effect 里请求数据会形成请求瀑布,官方建议的消除思路是什么?
React 中父子组件各自在 effect 里请求数据会形成请求瀑布,官方建议的消除思路是什么? 本文先给出可直接复述的结论，再用最小代码说明React 请求瀑布 并行 获取数据的工作方式、判断依据、项目边界和常见误区。
核心关键词React 请求瀑布 并行 获取数据 - 0059
为什么说把接口返回的数据直接塞进 React Context 并不等于拥有了服务器数据缓存?
为什么说把接口返回的数据直接塞进 React Context 并不等于拥有了服务器数据缓存? 本文先给出可直接复述的结论，再用最小代码说明React Context 服务器数据 缓存 失效的工作方式、判断依据、项目边界和常见误区。
核心关键词React Context 服务器数据 缓存 失效 - 0060
React 19 的 useOptimistic 在共享服务器数据的界面上如何实现乐观更新,提交失败时界面如何回退?
React 19 的 useOptimistic 在共享服务器数据的界面上如何实现乐观更新,提交失败时界面如何回退? 本文先给出可直接复述的结论，再用最小代码说明React 19 useOptimistic 乐观更新 回退的工作方式、判断依据、项目边界和常见误区。
核心关键词React 19 useOptimistic 乐观更新 回退 - 0061
React 中一个组件被条件渲染卸载后还想保留它的编辑进度等状态,有哪些手段及取舍?
React 中一个组件被条件渲染卸载后还想保留它的编辑进度等状态,有哪些手段及取舍? 本文先给出可直接复述的结论，再用最小代码说明React 组件卸载 保留状态 方案的工作方式、判断依据、项目边界和常见误区。
核心关键词React 组件卸载 保留状态 方案 - 0062
React 中把父组件传入的 props 用 useState 复制一份再共享给子组件,为什么被认为是反模式?
React 中把父组件传入的 props 用 useState 复制一份再共享给子组件,为什么被认为是反模式? 本文先给出可直接复述的结论，再用最小代码说明React props 复制到 state 反模式的工作方式、判断依据、项目边界和常见误区。
核心关键词React props 复制到 state 反模式 - 0063
React 中把多个组件共享的状态更新逻辑抽成 reducer,相比分散的 useState 在归属和可测试性上带来什么改变?
React 中把多个组件共享的状态更新逻辑抽成 reducer,相比分散的 useState 在归属和可测试性上带来什么改变? 本文先给出可直接复述的结论，再用最小代码说明React useReducer 状态逻辑抽离 共享的工作方式、判断依据、项目边界和常见误区。
核心关键词React useReducer 状态逻辑抽离 共享 - 0064
React useReducer 配合 Context 时，为什么常拆开 state 和 dispatch？
React useReducer 配合 Context 时，为什么常拆开 state 和 dispatch？ 本文先给出可直接复述的结论，再用最小代码说明React useReducer Context state dispatch 拆分的工作方式、判断依据、项目边界和常见误区。
核心关键词React useReducer Context state dispatch 拆分 - 0065
React 中需要在多个组件间共享但变化时不应触发渲染的值,为什么应该用 ref 或模块级变量而不是 state?
React 中需要在多个组件间共享但变化时不应触发渲染的值,为什么应该用 ref 或模块级变量而不是 state? 本文先给出可直接复述的结论，再用最小代码说明React useRef 共享值 不触发渲染的工作方式、判断依据、项目边界和常见误区。
核心关键词React useRef 共享值 不触发渲染 - 0066
React Context 不支持选择器,组件只想订阅其中一部分数据时有哪些官方认可的规避方案及各自代价?
React Context 不支持选择器,组件只想订阅其中一部分数据时有哪些官方认可的规避方案及各自代价? 本文先给出可直接复述的结论，再用最小代码说明React Context 选择器 替代方案的工作方式、判断依据、项目边界和常见误区。
核心关键词React Context 选择器 替代方案 - 0067
React 服务端渲染与客户端水合共用 useSyncExternalStore 时,getServerSnapshot 解决什么一致性问题?
React 服务端渲染与客户端水合共用 useSyncExternalStore 时,getServerSnapshot 解决什么一致性问题? 本文先给出可直接复述的结论，再用最小代码说明useSyncExternalStore getServerSnapshot 水合的工作方式、判断依据、项目边界和常见误区。
核心关键词useSyncExternalStore getServerSnapshot 水合 - 0068
React 面试中如何区分「服务器状态」与「客户端状态」,这一分类为什么影响状态管理选型?
React 面试中如何区分「服务器状态」与「客户端状态」,这一分类为什么影响状态管理选型? 本文先给出可直接复述的结论，再用最小代码说明React 服务器状态 客户端状态 区别 选型的工作方式、判断依据、项目边界和常见误区。
核心关键词React 服务器状态 客户端状态 区别 选型 - 0069
为什么 React 的 useSyncExternalStore 要求 getSnapshot 多次调用必须返回缓存的同一个引用?
为什么 React 的 useSyncExternalStore 要求 getSnapshot 多次调用必须返回缓存的同一个引用? 本文先给出可直接复述的结论，再用最小代码说明useSyncExternalStore getSnapshot 缓存 无限循环的工作方式、判断依据、项目边界和常见误区。
核心关键词useSyncExternalStore getSnapshot 缓存 无限循环 - 0070
一个大的 React Context 应该什么时候拆成多个？
一个大的 React Context 应该什么时候拆成多个？ 本文先给出可直接复述的结论，再用最小代码说明React Context 拆分优化的工作方式、判断依据、项目边界和常见误区。
核心关键词React Context 拆分优化 - 0071
React 官方对共享状态的结构设计提出哪些原则,冗余和矛盾的状态会带来什么具体问题?
React 官方对共享状态的结构设计提出哪些原则,冗余和矛盾的状态会带来什么具体问题? 本文先给出可直接复述的结论，再用最小代码说明React 状态结构设计 冗余 矛盾 state的工作方式、判断依据、项目边界和常见误区。
核心关键词React 状态结构设计 冗余 矛盾 state - 0072
React 为什么说状态是绑定在 UI 树的渲染位置上而不是绑定在组件函数本身?
React 为什么说状态是绑定在 UI 树的渲染位置上而不是绑定在组件函数本身? 本文先给出可直接复述的结论，再用最小代码说明React 状态 绑定 UI 树位置的工作方式、判断依据、项目边界和常见误区。
核心关键词React 状态 绑定 UI 树位置 - 0073
React 的 useSyncExternalStore 中 subscribe 函数何时被调用、其返回的清理函数何时执行?
React 的 useSyncExternalStore 中 subscribe 函数何时被调用、其返回的清理函数何时执行? 本文先给出可直接复述的结论，再用最小代码说明useSyncExternalStore subscribe 清理函数 时机的工作方式、判断依据、项目边界和常见误区。
核心关键词useSyncExternalStore subscribe 清理函数 时机 - 0074
React 18 并发渲染下直接用 useState 加外部可变数据读取为什么会出现 tearing(界面撕裂)?
React 18 并发渲染下直接用 useState 加外部可变数据读取为什么会出现 tearing(界面撕裂)? 本文先给出可直接复述的结论，再用最小代码说明React 18 并发渲染 tearing 外部 store的工作方式、判断依据、项目边界和常见误区。
核心关键词React 18 并发渲染 tearing 外部 store - 0075
深层子组件怎样通过 React Context 更新父层状态？
深层子组件怎样通过 React Context 更新父层状态？ 本文先给出可直接复述的结论，再用最小代码说明React Context 子组件更新父组件状态的工作方式、判断依据、项目边界和常见误区。
核心关键词React Context 子组件更新父组件状态 - 0076
React 中筛选条件、当前标签页这类 UI 状态,什么情况下应该放进 URL 而不是组件 state 或 Context?
React 中筛选条件、当前标签页这类 UI 状态,什么情况下应该放进 URL 而不是组件 state 或 Context? 本文先给出可直接复述的结论，再用最小代码说明React URL 状态 内存 state 可分享的工作方式、判断依据、项目边界和常见误区。
核心关键词React URL 状态 内存 state 可分享 - 0077
React 19 的 use() 相比 useContext 在读取共享数据上多出了什么能力?
React 19 的 use() 相比 useContext 在读取共享数据上多出了什么能力? 本文先给出可直接复述的结论，再用最小代码说明React 19 use() Promise Context 条件读取的工作方式、判断依据、项目边界和常见误区。
核心关键词React 19 use() Promise Context 条件读取 - 0078
React 的 useSyncExternalStore 三个参数各自承担什么职责,返回值如何保证一致性?
React 的 useSyncExternalStore 三个参数各自承担什么职责,返回值如何保证一致性? 本文先给出可直接复述的结论，再用最小代码说明useSyncExternalStore subscribe getSnapshot 参数的工作方式、判断依据、项目边界和常见误区。
核心关键词useSyncExternalStore subscribe getSnapshot 参数 - 0079
Context Provider 的 value 为什么常用 useMemo？
解释内联对象怎样造成 Context value 身份变化，用完整 JSX 示例区分无关计数更新与真实主题更新，并说明 useMemo 依赖、函数缓存和 React Compiler 的适用边界。
核心关键词React Context Provider value useMemo - 0080
React 中什么信号说明 Context 已经不够用、应该引入带订阅的外部 store?
React 中什么信号说明 Context 已经不够用、应该引入带订阅的外部 store? 本文先给出可直接复述的结论，再用最小代码说明React Context 不够用 外部 store 选择器的工作方式、判断依据、项目边界和常见误区。
核心关键词React Context 不够用 外部 store 选择器 - 0081
React 什么时候应该用 Context，什么时候继续传 props？
从数据可见性、组件组合、消费范围和测试成本比较 props 与 Context，用局部地区设置示例说明怎样减少无意义的中间传递，同时保留清晰的组件依赖。
核心关键词React Context 和 props 怎么选择 - 0082
React Effect 创建请求时若组件已快速卸载，AbortSignal 已 aborted 的情况下应如何避免把 abort 当成业务错误弹窗？
React Effect 创建请求时若组件已快速卸载，AbortSignal 已 aborted 的情况下应如何避免把 abort 当成业务错误弹窗？ 本文先给出可直接复述的结论，再用最小代码说明React AbortSignal already aborted Effect cleanup 错误处理的工作方式、判断依据、项目边界和常见误区。
核心关键词React AbortSignal already aborted Effect cleanup 错误处理 - 0083
React 中 requestAnimationFrame 循环驱动画布时，Effect 的 cleanup 取消的是哪一帧，为什么只取消一次可能不够？
React 中 requestAnimationFrame 循环驱动画布时，Effect 的 cleanup 取消的是哪一帧，为什么只取消一次可能不够？ 本文先给出可直接复述的结论，再用最小代码说明React requestAnimationFrame Effect cleanup 取消 循环的工作方式、判断依据、项目边界和常见误区。
核心关键词React requestAnimationFrame Effect cleanup 取消 循环 - 0084
为什么不能直接把 async 函数传给 React useEffect，又该怎样组织 await 与取消信号？
为什么不能直接把 async 函数传给 React useEffect，又该怎样组织 await 与取消信号？ 本文先给出可直接复述的结论，再用最小代码说明React useEffect async Promise cleanup cancel的工作方式、判断依据、项目边界和常见误区。
核心关键词React useEffect async Promise cleanup cancel - 0085
两个 React 组件状态需要保持一致时，为什么用 Effect 把一个 state 拷给另一个 state 常是反模式？
两个 React 组件状态需要保持一致时，为什么用 Effect 把一个 state 拷给另一个 state 常是反模式？ 本文先给出可直接复述的结论，再用最小代码说明React 组件状态同步 Effect 拷贝 state 反模式的工作方式、判断依据、项目边界和常见误区。
核心关键词React 组件状态同步 Effect 拷贝 state 反模式 - 0086
为什么 React Effect 的清理函数不只在卸载时运行，依赖变化重跑前也运行这一点如何改变资源管理写法？
为什么 React Effect 的清理函数不只在卸载时运行，依赖变化重跑前也运行这一点如何改变资源管理写法？ 本文先给出可直接复述的结论，再用最小代码说明React Effect cleanup 更新前 运行 依赖变化的工作方式、判断依据、项目边界和常见误区。
核心关键词React Effect cleanup 更新前 运行 依赖变化 - 0087
为了让 React Effect 在重复建立/清理下仍正确，清理函数应具备什么样的幂等性设计？
为了让 React Effect 在重复建立/清理下仍正确，清理函数应具备什么样的幂等性设计？ 本文先给出可直接复述的结论，再用最小代码说明React Effect 清理 幂等 可重入的工作方式、判断依据、项目边界和常见误区。
核心关键词React Effect 清理 幂等 可重入 - 0088
React useEffect 一定在浏览器绘制后执行吗？
React useEffect 一定在浏览器绘制后执行吗？ 本文先给出可直接复述的结论，再用最小代码说明React useEffect 执行时机和浏览器绘制的工作方式、判断依据、项目边界和常见误区。
核心关键词React useEffect 执行时机和浏览器绘制 - 0089
React 并发特性下，为什么 Effect 代码要假设状态可能被复用或提交前重试，而不是按一次挂载一次卸载写死？
React 并发特性下，为什么 Effect 代码要假设状态可能被复用或提交前重试，而不是按一次挂载一次卸载写死？ 本文先给出可直接复述的结论，再用最小代码说明React 并发 Effect 可重试 状态复用 正确性的工作方式、判断依据、项目边界和常见误区。
核心关键词React 并发 Effect 可重试 状态复用 正确性 - 0090
React 不能按条件调用 useEffect，但只想在某些条件下同步，应把条件放在哪里并保持 Hook 顺序稳定？
React 不能按条件调用 useEffect，但只想在某些条件下同步，应把条件放在哪里并保持 Hook 顺序稳定？ 本文先给出可直接复述的结论，再用最小代码说明React 条件 useEffect Hook 顺序 条件逻辑的工作方式、判断依据、项目边界和常见误区。
核心关键词React 条件 useEffect Hook 顺序 条件逻辑 - 0091
React 自定义 Hook 封装一段 Effect 同步逻辑时，调用方还需要知道哪些依赖和清理约定？
React 自定义 Hook 封装一段 Effect 同步逻辑时，调用方还需要知道哪些依赖和清理约定？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 封装 Effect 依赖 清理的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 封装 Effect 依赖 清理 - 0092
useEffect 不写依赖、空数组和具体依赖有什么区别？
useEffect 不写依赖、空数组和具体依赖有什么区别？ 本文先给出可直接复述的结论，再用最小代码说明React useEffect 依赖数组三种写法的工作方式、判断依据、项目边界和常见误区。
核心关键词React useEffect 依赖数组三种写法 - 0093
如何分辨 React 中一次 Effect 重跑是“外部依赖真的变了”还是“Effect 自己 setState 造成依赖又变”？
如何分辨 React 中一次 Effect 重跑是“外部依赖真的变了”还是“Effect 自己 setState 造成依赖又变”？ 本文先给出可直接复述的结论，再用最小代码说明React Effect 重跑 依赖变化 自身 setState 诊断的工作方式、判断依据、项目边界和常见误区。
核心关键词React Effect 重跑 依赖变化 自身 setState 诊断 - 0094
React 中由 props/state 计算出的值为什么通常不该放进 Effect 再 setState？
React 中由 props/state 计算出的值为什么通常不该放进 Effect 再 setState？ 本文先给出可直接复述的结论，再用最小代码说明React 派生状态为什么不需要 useEffect的工作方式、判断依据、项目边界和常见误区。
核心关键词React 派生状态为什么不需要 useEffect - 0095
React 用 Effect 同步 document.title 时，为什么把 router 对象整个列依赖常导致标题被过度重置？
React 用 Effect 同步 document.title 时，为什么把 router 对象整个列依赖常导致标题被过度重置？ 本文先给出可直接复述的结论，再用最小代码说明React document.title Effect 依赖 router 对象的工作方式、判断依据、项目边界和常见误区。
核心关键词React document.title Effect 依赖 router 对象 - 0096
用户点击触发的逻辑为什么通常放事件处理器，而不是 useEffect？
用户点击触发的逻辑为什么通常放事件处理器，而不是 useEffect？ 本文先给出可直接复述的结论，再用最小代码说明React 用户操作放事件还是 useEffect的工作方式、判断依据、项目边界和常见误区。
核心关键词React 用户操作放事件还是 useEffect - 0097
React Effect 中连续发起请求时，如何防止慢的旧响应覆盖新的结果？
React Effect 中连续发起请求时，如何防止慢的旧响应覆盖新的结果？ 本文先给出可直接复述的结论，再用最小代码说明React Effect fetch 竞态 AbortController ignore的工作方式、判断依据、项目边界和常见误区。
核心关键词React Effect fetch 竞态 AbortController ignore - 0098
React 渲染后要把焦点移到新输入框或恢复滚动位置，为什么这些操作适合放 Effect 而不是渲染函数？
React 渲染后要把焦点移到新输入框或恢复滚动位置，为什么这些操作适合放 Effect 而不是渲染函数？ 本文先给出可直接复述的结论，再用最小代码说明React focus scroll Effect commit DOM 副作用的工作方式、判断依据、项目边界和常见误区。
核心关键词React focus scroll Effect commit DOM 副作用 - 0099
在 React 项目里用 eslint-disable 关掉 exhaustive-deps 前，需要确认哪几种情况确实不是隐藏过期数据？
在 React 项目里用 eslint-disable 关掉 exhaustive-deps 前，需要确认哪几种情况确实不是隐藏过期数据？ 本文先给出可直接复述的结论，再用最小代码说明React exhaustive-deps disable 风险 过期数据的工作方式、判断依据、项目边界和常见误区。
核心关键词React exhaustive-deps disable 风险 过期数据 - 0100
把地图或图表这类命令式第三方组件接入 React 时，Effect 应负责创建、参数同步和销毁中的哪些边界？
把地图或图表这类命令式第三方组件接入 React 时，Effect 应负责创建、参数同步和销毁中的哪些边界？ 本文先给出可直接复述的结论，再用最小代码说明React Effect 第三方命令式组件 创建 更新 销毁的工作方式、判断依据、项目边界和常见误区。
核心关键词React Effect 第三方命令式组件 创建 更新 销毁