用 ref 保存最新回调让 React Effect 少依赖一个函数，能解决什么又可能隐藏什么依赖错误？
围绕“用 ref 保存最新回调让 React Effect 少依赖一个函数，能解决什么又可能隐藏什么依赖错误”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须权衡“读取最新值但不被视为响应式依赖”的边界。
核心关键词React Effect ref 保存最新回调 减少依赖 取舍
面试知识索引 · 分类、标签与搜索
React面试题，281 道完整答案
React面试题第 3 页，显示第 101–150 题，共找到 281 道完整解析，可继续按分类、标签与关键词缩小范围。
281筛选结果
52技术分类
178检索标签
6索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 3 页
本页面试问题
按稳定语义路径排序
- 0101
- 0102
React 中监听 matchMedia 媒体查询变化时，为什么 addEventListener 的返回结果和清理都要和查询对象绑定？
围绕“React 中监听 matchMedia 媒体查询变化时，为什么 addEventListener 的返回结果和清理”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确每个 query 实例对应一次订阅/退订。
核心关键词React matchMedia Effect 清理 媒体查询 - 0103
React Effect 挂载、依赖更新和卸载时怎样建立与清理？
以文档订阅切换说明 setup 与 cleanup 的配对关系、旧闭包与新参数、依赖未变时的行为，以及 Strict Mode 检查和异步请求迟到结果的处理。
核心关键词React useEffect cleanup 执行顺序 - 0104
当 React Effect 只想在少数值变化时运行，却把整段逻辑都搬进了 Effect，应如何重构以减少不必要同步？
围绕“当 React Effect 只想在少数值变化时运行，却把整段逻辑都搬进了 Effect，应如何重构以减少不必要同步”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明把与外部同步无关的计算移出 Effect 或移入事件。
核心关键词React Effect 移动逻辑 减少依赖 重构 - 0105
useEffect 依赖对象或函数时，为什么可能每次渲染都重跑？
解释 Object.is 与组件内对象、函数引用的关系，按配置构造位置、真正的响应式字段和缓存边界整理减少无关重同步的方法，避免删依赖或滥用 JSON.stringify。
核心关键词React useEffect 对象函数依赖反复执行 - 0106
React 组件要根据 navigator.onLine 与 online/offline 事件显示网络状态，Effect 里应同步哪个真相源？
围绕“React 组件要根据 navigator.onLine 与 online/offline 事件显示网络状态，Eff”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须区分初始读取当前值与订阅后续变化。
核心关键词React online offline Effect 同步 浏览器状态 - 0107
React 父子组件都有 useEffect 时，挂载更新卸载的 Effect 与 cleanup 执行顺序对共享 DOM 操作有何影响？
围绕“React 父子组件都有 useEffect 时，挂载更新卸载的 Effect 与 cleanup 执行顺序对共享 ”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明子效果通常先于父建立、父清理在子清理前后的边界。
核心关键词React 父子组件 Effect 顺序 cleanup - 0108
当 React 自定义 Hook 返回一个可手动停止函数，同时内部 Effect 也有 cleanup，二者职责如何避免重叠？
围绕“当 React 自定义 Hook 返回一个可手动停止函数，同时内部 Effect 也有 cleanup，二者职责如何”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须区分组件卸载自动清理与用户主动停止同一资源。
核心关键词React 自定义 Hook cleanup 手动停止 职责 - 0109
React 组件通过 window.postMessage 与 iframe 通信时，Effect 的依赖应包含 origin/target 的哪些部分才不会错发消息？
围绕“React 组件通过 window.postMessage 与 iframe 通信时，Effect 的依赖应包含 o”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须把通信端点视为响应式依赖并在 cleanup 移除监听器。
核心关键词React postMessage iframe Effect origin 依赖 - 0110
useEffect 为什么必须声明读到的响应式依赖，漏写会怎样？
用文档订阅与通知设置说明 Effect 依赖怎样对应闭包输入、漏依赖如何产生旧值，以及拆分同步、函数式更新和 useEffectEvent 的适用边界。
核心关键词React useEffect exhaustive-deps 漏依赖 - 0111
当 React 需要根据 props 变化重置子组件状态时，为什么优先改 key 而不是写 Effect 清状态？
切换编辑对象后为什么 React 还保留上一个对象的输入？说明 key 如何改变组件身份、重置子树状态，以及只清一个字段、保存多份草稿和随机 key 的边界。
核心关键词React key 重置组件状态 - 0112
React 用 ResizeObserver 观察一个 ref 元素时，为什么观察目标应来自 Effect 内读取的 node 而不是把 ref.current 当稳定依赖？
围绕“React 用 ResizeObserver 观察一个 ref 元素时，为什么观察目标应来自 Effect 内读取的”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 ref.current 不是响应式依赖且提交后才可用。
核心关键词React ResizeObserver ref.current Effect 依赖 - 0113
React 中「Effect Event」试图解决的事件逻辑与同步逻辑混杂问题是什么？
围绕“React 中「Effect Event」试图解决的事件逻辑与同步逻辑混杂问题是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明想让 Effect 响应数据变化而事件响应交互。
核心关键词React Effect Events 分离事件 副作用 - 0114
React hydration 场景里访问 window/document 的 Effect 为什么通常安全，而在渲染期直接访问会出错？
围绕“React hydration 场景里访问 window/document 的 Effect 为什么通常安全，而在渲”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须区分客户端提交后环境与渲染期可能在服务端运行。
核心关键词React hydration window document Effect 渲染期 - 0115
一个 React Effect 里 setState 后组件无限重渲染，应如何定位是依赖身份不稳还是 Effect 本不该存在？
围绕“一个 React Effect 里 setState 后组件无限重渲染，应如何定位是依赖身份不稳还是 Effect ”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须用“该状态是否派生/是否外部同步”二分定位。
核心关键词React Effect setState 无限循环 依赖 诊断 - 0116
React Effect 需要“只在打开面板时取一次当前筛选”的快照语义时，怎样表达才能不被依赖变化无意刷新？
围绕“React Effect 需要“只在打开面板时取一次当前筛选”的快照语义时，怎样表达才能不被依赖变化无意刷新”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须区分有意非响应式读取与漏依赖 bug。
核心关键词React Effect 有意快照 冻结 打开时 依赖 - 0117
React 定时器 Effect 中读到旧 count 时，改用函数式 setState 与把 count 加依赖各自改变了什么？
围绕“React 定时器 Effect 中读到旧 count 时，改用函数式 setState 与把 count 加依赖各”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖判断时要说明“效果同步频率”与“更新公式来源”是两类修复。
核心关键词React useEffect interval stale state setState 函数式更新 - 0118
React 18 开发模式 StrictMode 下 Effect 为什么会额外经历一次建立—清理—建立，如何区分 bug 与预期行为？
围绕“React 18 开发模式 StrictMode 下 Effect 为什么会额外经历一次建立—清理—建立，如何区分 ”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明这是开发期暴露不纯清理的机制。
核心关键词React 18 StrictMode Effect 重复执行 开发模式 - 0119
React Effect 忘记清理订阅，路由切换后会出现什么问题？
通过重复进入页面的键盘监听示例，解释重复处理、旧闭包和资源残留的来源，展示同一函数引用与 capture 匹配的清理写法，并给出可验证的路由往返检查步骤。
核心关键词React useEffect 订阅清理内存泄漏 - 0120
React Effect 中立即 setState 会怎样触发一次同步重渲染，为什么可能让浏览器来不及绘制中间帧？
围绕“React Effect 中立即 setState 会怎样触发一次同步重渲染，为什么可能让浏览器来不及绘制中间帧”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明提交后 Effect 再更新可能造成双提交。
核心关键词React Effect setState 同步重渲染 绘制 中间帧 - 0121
React 18 StrictMode 开发模式下，如何让第三方实例在重复挂载检查中不泄漏也不被销毁后误用？
围绕“React 18 StrictMode 开发模式下，如何让第三方实例在重复挂载检查中不泄漏也不被销毁后误用”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 setup 创建/ cleanup 销毁成对且 cleanup 后旧实例不可再用。
核心关键词React 18 StrictMode 第三方实例 销毁 泄漏 - 0122
React 18 的 useInsertionEffect 面向 CSS-in-JS 注入样式解决了什么时序问题，普通业务代码为什么不该用它？
围绕“React 18 的 useInsertionEffect 面向 CSS-in-JS 注入样式解决了什么时序问题，普”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须定位其在 DOM 变更前注入样式的库级用途。
核心关键词React 18 useInsertionEffect CSS-in-JS 样式注入 - 0123
React 中需要读取 DOM 尺寸并立刻影响下一次绘制时，为什么选 useLayoutEffect 而不是 useEffect？
围绕“React 中需要读取 DOM 尺寸并立刻影响下一次绘制时，为什么选 useLayoutEffect 而不是 use”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明它在浏览器绘制前同步运行可避免可见跳动。
核心关键词React useLayoutEffect DOM 测量 闪烁 useEffect - 0124
React 服务端渲染中使用 useLayoutEffect 触发警告时，应该怎样决定改用 useEffect 还是条件渲染？
围绕“React 服务端渲染中使用 useLayoutEffect 触发警告时，应该怎样决定改用 useEffect 还是”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖判断时要说明该布局效果是否影响首屏可见布局。
核心关键词React useLayoutEffect SSR 警告 useEffect fallback - 0125
React 18 订阅外部 store 时，为什么 useSyncExternalStore 常优于手写 useEffect + setState？
围绕“React 18 订阅外部 store 时，为什么 useSyncExternalStore 常优于手写 useEf”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明并发下获取一致快照与内建订阅管理。
核心关键词React 18 useSyncExternalStore 外部 store useEffect - 0126
React 聊天室组件切换 roomId 时，WebSocket Effect 应如何在依赖变化中避免收到上个房间消息？
围绕“React 聊天室组件切换 roomId 时，WebSocket Effect 应如何在依赖变化中避免收到上个房间消”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 roomId 是响应式依赖并 cleanup 断开旧连接。
核心关键词React WebSocket Effect roomId 依赖 清理 重连 - 0127
React 所说的“用 Effect 与外部系统同步”具体是什么意思？
从地图视角、浏览器监听与文档订阅解释外部系统的含义，区分 JSX 纯渲染、用户命令和持续同步，并说明资源初始化、更新、清理与服务端输出的边界。
核心关键词React useEffect 与外部系统同步 - 0128
在不使用实验性 API 的稳定 React 版本里，如何把“状态变化后通知”与“用户主动提交”分开实现？
围绕“在不使用实验性 API 的稳定 React 版本里，如何把“状态变化后通知”与“用户主动提交”分开实现”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须给稳定模式：事件处理直接调用、Effect 只同步可观测状态。
核心关键词React 稳定版 分离事件逻辑与 Effect 不用实验 API - 0129
React 回调 ref 适合什么场景，条件 DOM 出现后为什么不一定需要 Effect？
用条件输入框解释回调 ref 如何跟随节点连接与移除，比较对象 ref 与挂载 Effect，说明回调身份、动态节点和清理边界。
核心关键词React callback ref 条件 DOM 挂载处理 - 0130
用 useReducer 加 Context 复用状态逻辑时，为什么常把 state 和 dispatch 拆成两个 Context？
围绕“用 useReducer 加 Context 复用状态逻辑时，为什么常把 state 和 dispatch 拆成两个”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确只消费 dispatch 的组件可跳过 state 变化引起的重渲染这一优化动机。
核心关键词React Context 拆分 state dispatch 性能 复用 - 0131
自定义 Hook 内部注册的事件监听或定时器，清理责任应该由谁承担？
围绕“自定义 Hook 内部注册的事件监听或定时器，清理责任应该由谁承担”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 Hook 内部 effect 必须返回对称的清理函数、而不是要求调用方手动清理的设计原则。
核心关键词React 自定义 Hook 清理函数 责任 - 0132
把 useEffect 逻辑抽进自定义 Hook 后，Hook 参数变化时如何保证 effect 正确重新执行？
围绕“把 useEffect 逻辑抽进自定义 Hook 后，Hook 参数变化时如何保证 effect 正确重新执行”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 Hook 内部 effect 依赖数组必须覆盖所有外部传入值、exhaustive-deps 会跨 Hook 边界检查调用方传。
核心关键词React 自定义 Hook 依赖穿透 effect 参数 - 0133
为什么 React 自定义 Hook 的函数名必须以 use 开头？
围绕“为什么 React 自定义 Hook 的函数名必须以 use 开头”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确该命名是 lint 规则识别 Hook 并施加检查的唯一依据、违反会导致违规调用被漏检。
核心关键词React 自定义 Hook 命名 use 开头 原因 - 0134
设计自定义 Hook 的返回值时，应该返回数组元组还是对象？
围绕“设计自定义 Hook 的返回值时，应该返回数组元组还是对象”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须从调用方命名灵活性、后续字段可扩展性、解构成本三个维度给出权衡。
核心关键词React 自定义 Hook 返回值 数组 对象 - 0135
自定义 Hook 返回的回调函数在每次渲染都变新引用，导致调用方 effect 反复执行，该如何处理？
围绕“自定义 Hook 返回的回调函数在每次渲染都变新引用，导致调用方 effect 反复执行，该如何处理”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确在 Hook 内部用 useCallback 或重构成更稳定的契约来收敛函数身份。
核心关键词React 自定义 Hook useCallback 返回函数 稳定引用 - 0136
两个组件同时调用同一个自定义 Hook，它们内部的状态会互相共享吗？
围绕“两个组件同时调用同一个自定义 Hook，它们内部的状态会互相共享吗”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 Hook 复用的是逻辑而非状态、每次调用拥有独立 state，并与模块级单例变量做区分。
核心关键词React 自定义 Hook 状态共享 独立 - 0137
复用一段包含状态与副作用的逻辑时，应该抽成自定义 Hook 还是抽成组件？
围绕“复用一段包含状态与副作用的逻辑时，应该抽成自定义 Hook 还是抽成组件”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须用“是否产生渲染输出”作为划分标准：纯逻辑抽 Hook、带 UI 抽组件。
核心关键词React 自定义 Hook 组件 复用 取舍 - 0138
React 的自定义 Hook 与普通的 JavaScript 工具函数有什么本质区别？
围绕“React 的自定义 Hook 与普通的 JavaScript 工具函数有什么本质区别”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确只有自定义 Hook 内部能调用其他 Hook、从而接入组件状态与生命周期。
核心关键词React 自定义 Hook 工具函数 区别 - 0139
只想响应某个交互而不因读取最新 state 让整个 useEffect 反复重跑，React 提供了什么思路？
围绕“只想响应某个交互而不因读取最新 state 让整个 useEffect 反复重跑，React 提供了什么思路”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确把非响应式的“事件型”逻辑从响应式 effect 中分离的思路及 useEffectEvent 尚属实验 API 的现状。
核心关键词React Effect Event useEffectEvent 实验性 - 0140
在 React useEffect 里启动的定时器总是读到旧的 state，这是为什么，有哪些修复方式？
围绕“在 React useEffect 里启动的定时器总是读到旧的 state，这是为什么，有哪些修复方式”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须诊断 effect 回调捕获了当次渲染的值快照，并给出补依赖重建、函数式更新、ref 中转三类修复，不讲闭包概念本身。
核心关键词React useEffect 定时器 读到旧 state 修复 - 0141
在 React 的 useEffect 中订阅聊天服务或 WebSocket 时，为什么清理函数必不可少？
围绕“在 React 的 useEffect 中订阅聊天服务或 WebSocket 时，为什么清理函数必不可少”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确依赖变化时 React 先用旧值执行清理再重新执行 effect、缺失清理会造成连接泄漏与重复消息。
核心关键词React useEffect 订阅 清理函数 重复连接 - 0142
eslint-plugin-react-hooks 能发现哪些错误，规则应该怎么配置？
说明 rules-of-hooks 与 exhaustive-deps 分别检查什么，给出 ESLint 9 的基础 flat config，区分插件推荐预设中的额外诊断，并介绍条件 Hook、遗漏依赖和自定义 Effect Hook 的修复思路。
核心关键词eslint-plugin-react-hooks exhaustive-deps 规则 - 0143
一段响应式逻辑应该写在 React 事件处理函数里还是 useEffect 里，判断标准是什么？
围绕“一段响应式逻辑应该写在 React 事件处理函数里还是 useEffect 里，判断标准是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须用“是否由用户某次具体交互触发、还是需要在渲染后与外部系统保持同步”做判断。
核心关键词React 事件处理 useEffect 如何选择 - 0144
在 React 18 中，如何把函数组件内部的 DOM 节点暴露给父组件调用 focus 等方法？
围绕“在 React 18 中，如何把函数组件内部的 DOM 节点暴露给父组件调用 focus 等方法”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 forwardRef 包裹组件并转发 ref 到内部节点的写法及其必要性。
核心关键词React forwardRef 父组件 访问子组件 DOM - 0145
设计 useReducer 的 action 时，计算结果应该放进 payload 还是交给 reducer 自己算？
围绕“设计 useReducer 的 action 时，计算结果应该放进 payload 还是交给 reducer 自己算”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确让 reducer 基于当前 state 自行计算以保证正确性与可测试性的原则及例外情形。
核心关键词React reducer action payload 设计 - 0146
为什么 React 的 reducer 必须是纯函数，不能在里面发请求、写 ref 或调用定时器？
围绕“为什么 React 的 reducer 必须是纯函数，不能在里面发请求、写 ref 或调用定时器”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 reducer 可能在渲染期被重复调用、副作用应放在事件处理函数中的职责划分。
核心关键词React reducer 纯函数 副作用 原因 - 0147
React 19 中函数组件接收 ref 的方式发生了什么变化，与 forwardRef 有何差异？
围绕“React 19 中函数组件接收 ref 的方式发生了什么变化，与 forwardRef 有何差异”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 ref 成为普通 prop 后函数组件可直接解构接收的写法及迁移建议。
核心关键词React 19 ref as prop forwardRef 变化 - 0148
React 19 的 ref 回调清理函数怎样工作，为什么内联回调也会触发清理？
用 DOM 原生事件订阅解释 React 19 ref cleanup 的资源配对，说明节点移除、回调身份变化、Strict Mode 检查及旧版 null 清理的迁移。
核心关键词React 19 ref callback cleanup 清理函数 - 0149
React 为什么不应在渲染时读写 ref.current，惰性初始化为什么是例外？
区分渲染阶段的可变引用读写与可预测初始化，用点击缓存示例说明事件读写、state 展示和跨渲染容器，并解释资源创建的限制。
核心关键词React ref current 渲染读写纯度惰性初始化 - 0150
把 ref.current 当作 useEffect 的依赖，或者直接在 JSX 中渲染 ref.current，会有什么问题？
围绕“把 ref.current 当作 useEffect 的依赖，或者直接在 JSX 中渲染 ref.current，会”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 ref 变化不触发渲染导致依赖失效与界面不更新。
核心关键词React ref 非响应式 effect 依赖 ref.current