React 回调 ref 适合什么场景，条件 DOM 出现后为什么不一定需要 Effect？
用条件输入框解释回调 ref 如何跟随节点连接与移除，比较对象 ref 与挂载 Effect，说明回调身份、动态节点和清理边界。
核心关键词React callback ref 条件 DOM 挂载处理
面试知识索引 · 分类、标签与搜索
React · Hooks 与复用面试题，37 道完整答案
React · Hooks 与复用面试题第 1 页，显示第 1–37 题，共找到 37 道完整解析，可继续按分类、标签与关键词缩小范围。
37筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
用 useReducer 加 Context 复用状态逻辑时，为什么常把 state 和 dispatch 拆成两个 Context？
围绕“用 useReducer 加 Context 复用状态逻辑时，为什么常把 state 和 dispatch 拆成两个”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确只消费 dispatch 的组件可跳过 state 变化引起的重渲染这一优化动机。
核心关键词React Context 拆分 state dispatch 性能 复用 - 0003
自定义 Hook 内部注册的事件监听或定时器，清理责任应该由谁承担？
围绕“自定义 Hook 内部注册的事件监听或定时器，清理责任应该由谁承担”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 Hook 内部 effect 必须返回对称的清理函数、而不是要求调用方手动清理的设计原则。
核心关键词React 自定义 Hook 清理函数 责任 - 0004
把 useEffect 逻辑抽进自定义 Hook 后，Hook 参数变化时如何保证 effect 正确重新执行？
围绕“把 useEffect 逻辑抽进自定义 Hook 后，Hook 参数变化时如何保证 effect 正确重新执行”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 Hook 内部 effect 依赖数组必须覆盖所有外部传入值、exhaustive-deps 会跨 Hook 边界检查调用方传。
核心关键词React 自定义 Hook 依赖穿透 effect 参数 - 0005
为什么 React 自定义 Hook 的函数名必须以 use 开头？
围绕“为什么 React 自定义 Hook 的函数名必须以 use 开头”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确该命名是 lint 规则识别 Hook 并施加检查的唯一依据、违反会导致违规调用被漏检。
核心关键词React 自定义 Hook 命名 use 开头 原因 - 0006
设计自定义 Hook 的返回值时，应该返回数组元组还是对象？
围绕“设计自定义 Hook 的返回值时，应该返回数组元组还是对象”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须从调用方命名灵活性、后续字段可扩展性、解构成本三个维度给出权衡。
核心关键词React 自定义 Hook 返回值 数组 对象 - 0007
自定义 Hook 返回的回调函数在每次渲染都变新引用，导致调用方 effect 反复执行，该如何处理？
围绕“自定义 Hook 返回的回调函数在每次渲染都变新引用，导致调用方 effect 反复执行，该如何处理”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确在 Hook 内部用 useCallback 或重构成更稳定的契约来收敛函数身份。
核心关键词React 自定义 Hook useCallback 返回函数 稳定引用 - 0008
两个组件同时调用同一个自定义 Hook，它们内部的状态会互相共享吗？
围绕“两个组件同时调用同一个自定义 Hook，它们内部的状态会互相共享吗”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 Hook 复用的是逻辑而非状态、每次调用拥有独立 state，并与模块级单例变量做区分。
核心关键词React 自定义 Hook 状态共享 独立 - 0009
复用一段包含状态与副作用的逻辑时，应该抽成自定义 Hook 还是抽成组件？
围绕“复用一段包含状态与副作用的逻辑时，应该抽成自定义 Hook 还是抽成组件”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须用“是否产生渲染输出”作为划分标准：纯逻辑抽 Hook、带 UI 抽组件。
核心关键词React 自定义 Hook 组件 复用 取舍 - 0010
React 的自定义 Hook 与普通的 JavaScript 工具函数有什么本质区别？
围绕“React 的自定义 Hook 与普通的 JavaScript 工具函数有什么本质区别”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确只有自定义 Hook 内部能调用其他 Hook、从而接入组件状态与生命周期。
核心关键词React 自定义 Hook 工具函数 区别 - 0011
只想响应某个交互而不因读取最新 state 让整个 useEffect 反复重跑，React 提供了什么思路？
围绕“只想响应某个交互而不因读取最新 state 让整个 useEffect 反复重跑，React 提供了什么思路”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确把非响应式的“事件型”逻辑从响应式 effect 中分离的思路及 useEffectEvent 尚属实验 API 的现状。
核心关键词React Effect Event useEffectEvent 实验性 - 0012
在 React useEffect 里启动的定时器总是读到旧的 state，这是为什么，有哪些修复方式？
围绕“在 React useEffect 里启动的定时器总是读到旧的 state，这是为什么，有哪些修复方式”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须诊断 effect 回调捕获了当次渲染的值快照，并给出补依赖重建、函数式更新、ref 中转三类修复，不讲闭包概念本身。
核心关键词React useEffect 定时器 读到旧 state 修复 - 0013
在 React 的 useEffect 中订阅聊天服务或 WebSocket 时，为什么清理函数必不可少？
围绕“在 React 的 useEffect 中订阅聊天服务或 WebSocket 时，为什么清理函数必不可少”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确依赖变化时 React 先用旧值执行清理再重新执行 effect、缺失清理会造成连接泄漏与重复消息。
核心关键词React useEffect 订阅 清理函数 重复连接 - 0014
eslint-plugin-react-hooks 能发现哪些错误，规则应该怎么配置？
说明 rules-of-hooks 与 exhaustive-deps 分别检查什么，给出 ESLint 9 的基础 flat config，区分插件推荐预设中的额外诊断，并介绍条件 Hook、遗漏依赖和自定义 Effect Hook 的修复思路。
核心关键词eslint-plugin-react-hooks exhaustive-deps 规则 - 0015
一段响应式逻辑应该写在 React 事件处理函数里还是 useEffect 里，判断标准是什么？
围绕“一段响应式逻辑应该写在 React 事件处理函数里还是 useEffect 里，判断标准是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须用“是否由用户某次具体交互触发、还是需要在渲染后与外部系统保持同步”做判断。
核心关键词React 事件处理 useEffect 如何选择 - 0016
在 React 18 中，如何把函数组件内部的 DOM 节点暴露给父组件调用 focus 等方法？
围绕“在 React 18 中，如何把函数组件内部的 DOM 节点暴露给父组件调用 focus 等方法”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 forwardRef 包裹组件并转发 ref 到内部节点的写法及其必要性。
核心关键词React forwardRef 父组件 访问子组件 DOM - 0017
设计 useReducer 的 action 时，计算结果应该放进 payload 还是交给 reducer 自己算？
围绕“设计 useReducer 的 action 时，计算结果应该放进 payload 还是交给 reducer 自己算”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确让 reducer 基于当前 state 自行计算以保证正确性与可测试性的原则及例外情形。
核心关键词React reducer action payload 设计 - 0018
为什么 React 的 reducer 必须是纯函数，不能在里面发请求、写 ref 或调用定时器？
围绕“为什么 React 的 reducer 必须是纯函数，不能在里面发请求、写 ref 或调用定时器”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 reducer 可能在渲染期被重复调用、副作用应放在事件处理函数中的职责划分。
核心关键词React reducer 纯函数 副作用 原因 - 0019
React 19 中函数组件接收 ref 的方式发生了什么变化，与 forwardRef 有何差异？
围绕“React 19 中函数组件接收 ref 的方式发生了什么变化，与 forwardRef 有何差异”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 ref 成为普通 prop 后函数组件可直接解构接收的写法及迁移建议。
核心关键词React 19 ref as prop forwardRef 变化 - 0020
React 19 的 ref 回调清理函数怎样工作，为什么内联回调也会触发清理？
用 DOM 原生事件订阅解释 React 19 ref cleanup 的资源配对，说明节点移除、回调身份变化、Strict Mode 检查及旧版 null 清理的迁移。
核心关键词React 19 ref callback cleanup 清理函数 - 0021
React 为什么不应在渲染时读写 ref.current，惰性初始化为什么是例外？
区分渲染阶段的可变引用读写与可预测初始化，用点击缓存示例说明事件读写、state 展示和跨渲染容器，并解释资源创建的限制。
核心关键词React ref current 渲染读写纯度惰性初始化 - 0022
把 ref.current 当作 useEffect 的依赖，或者直接在 JSX 中渲染 ref.current，会有什么问题？
围绕“把 ref.current 当作 useEffect 的依赖，或者直接在 JSX 中渲染 ref.current，会”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 ref 变化不触发渲染导致依赖失效与界面不更新。
核心关键词React ref 非响应式 effect 依赖 ref.current - 0023
React 用 ref 保存前一个值时，“上一次渲染”和“上一次提交”有什么区别？
通过状态变化记录器解释 ref 保存的历史究竟属于哪个阶段，避免在 render 中读写可变历史，说明首次值、相同值、批处理和可见历史状态的设计。
核心关键词React useRef 保存前一个已提交值 - 0024
React 中 useRef 和 useState 都能跨渲染保存数据，二者的本质区别和适用场景是什么？
useRef 和 useState 都能跨渲染保留数据，为什么只有 state 更新会触发界面变化？用计时器句柄、搜索输入和异步闭包说明选择依据、快照语义及渲染阶段限制。
核心关键词React useRef 和 useState 区别 - 0025
为什么 React 的 Hooks 必须在每次渲染中以完全相同的顺序调用，不能放进条件或循环里？
React 如何关联多次渲染中的 useState、useRef 与 Effect？解释条件调用、循环和提前返回造成的顺序变化，展示把条件放进 Effect 的写法，并说明 React use API 的例外。
核心关键词React Hooks 为什么不能条件调用 - 0026
React 18 的 Strict Mode 下 useEffect 在开发环境为什么会执行两次，怎样写才是安全的？
围绕“React 18 的 Strict Mode 下 useEffect 在开发环境为什么会执行两次，怎样写才是安全的”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确挂载-卸载-重新挂载是刻意暴露缺失清理的检测手段、effect 必须写成可重入的对称结构。
核心关键词React 18 Strict Mode useEffect 执行两次 - 0027
React 的 useImperativeHandle 适合在什么情况下用来约束父组件对子组件的访问？
围绕“React 的 useImperativeHandle 适合在什么情况下用来约束父组件对子组件的访问”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确只暴露少量命令式方法（如 focus、scrollTo）而非整颗 DOM 节点的封装动机。
核心关键词React useImperativeHandle 暴露 命令式 API - 0028
React 的 useLayoutEffect 与 useEffect 执行时机有什么差异，这决定了怎样的使用边界？
围绕“React 的 useLayoutEffect 与 useEffect 执行时机有什么差异，这决定了怎样的使用边界”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确绘制前同步执行可读写布局避免视觉闪烁、以及阻塞渲染与 SSR 警告的代价。
核心关键词React useLayoutEffect useEffect 时机 闪烁 - 0029
React 的 useMemo 能解决哪两类问题，为什么不能把它当作结果一定会被缓存的语义保证？
围绕“React 的 useMemo 能解决哪两类问题，为什么不能把它当作结果一定会被缓存的语义保证”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确跳过昂贵计算与保持引用稳定配合 memo 两类用途、以及 React 可能丢弃缓存需按性能优化而非正确性依赖使用。
核心关键词React useMemo 用途 缓存 语义保证 - 0030
useReducer 配合 Context 能否替代 Redux 做全局状态管理，适用边界在哪里？
围绕“useReducer 配合 Context 能否替代 Redux 做全局状态管理，适用边界在哪里”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须从订阅粒度导致的全树渲染、中间件与调试工具链缺失说明适用边界。
核心关键词React useReducer Context Redux 替代 边界 - 0031
useReducer 返回的 dispatch 函数身份稳定吗，写进 useEffect 依赖数组时能否省略？
围绕“useReducer 返回的 dispatch 函数身份稳定吗，写进 useEffect 依赖数组时能否省略”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 dispatch 身份稳定可安全省略，以及 dispatch 后 state 未变时 React 跳过渲染的行为。
核心关键词React useReducer dispatch 稳定 依赖数组 - 0032
useReducer 的第三个参数 init 函数有什么作用？
围绕“useReducer 的第三个参数 init 函数有什么作用”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确惰性计算初始状态与利用 init 从外部 props 重建状态两种用途。
核心关键词React useReducer init 惰性初始化 第三个参数 - 0033
什么时候应该把 React 组件里的 useState 重构为 useReducer？
围绕“什么时候应该把 React 组件里的 useState 重构为 useReducer”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须给出可操作的判断标准，如状态转移逻辑集中、多个字段联动更新、下一状态依赖旧状态的复杂计算。
核心关键词React useReducer useState 何时重构 - 0034
什么情况下必须使用 React setState 的函数式更新形式而不是直接传新值？
围绕“什么情况下必须使用 React setState 的函数式更新形式而不是直接传新值”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须诊断基于过期快照连续更新导致丢更新的问题及 updater 拿到最新 pending state 的语义。
核心关键词React setState 函数式更新 updater - 0035
给 React 的 useState 传一个函数和直接传初始值有什么区别？
围绕“给 React 的 useState 传一个函数和直接传初始值有什么区别”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确惰性初始化只在首次渲染执行、以及误写成调用函数结果的常见坑。
核心关键词React useState 惰性初始化 函数参数 - 0036
为什么 useSyncExternalStore 的 getSnapshot 必须返回缓存的值，而不能每次新建一个对象？
围绕“为什么 useSyncExternalStore 的 getSnapshot 必须返回缓存的值，而不能每次新建一个对”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须诊断每次返回新引用会被判定为 store 已变化从而触发无限重渲染。
核心关键词React useSyncExternalStore getSnapshot 缓存 无限循环 - 0037
React 的 useSyncExternalStore 是为解决什么问题而设计的？
围绕“React 的 useSyncExternalStore 是为解决什么问题而设计的”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确并发渲染下读取外部 store 可能出现界面不一致（tearing）及该 API 提供的同步保证。
核心关键词React useSyncExternalStore tearing 并发