用 ref 保存最新回调让 React Effect 少依赖一个函数，能解决什么又可能隐藏什么依赖错误？
用 ref 保存最新回调让 React Effect 少依赖一个函数，能解决什么又可能隐藏什么依赖错误？ 本文先给出可直接复述的结论，再用最小代码说明React Effect ref 保存最新回调 减少依赖 取舍的工作方式、判断依据、项目边界和常见误区。
核心关键词React Effect ref 保存最新回调 减少依赖 取舍
面试知识索引 · 分类、标签与搜索
React面试题，281 道完整答案
React面试题第 3 页，显示第 101–150 题，共找到 281 道完整解析，可继续按分类、标签与关键词缩小范围。
281筛选结果
52技术分类
178检索标签
6索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 3 页
本页面试问题
按稳定语义路径排序
- 0101
- 0102
React 中监听 matchMedia 媒体查询变化时，为什么 addEventListener 的返回结果和清理都要和查询对象绑定？
React 中监听 matchMedia 媒体查询变化时，为什么 addEventListener 的返回结果和清理都要和查询对象绑定？ 本文先给出可直接复述的结论，再用最小代码说明React matchMedia Effect 清理 媒体查询的工作方式、判断依据、项目边界和常见误区。
核心关键词React matchMedia Effect 清理 媒体查询 - 0103
React Effect 挂载、依赖更新和卸载时怎样建立与清理？
React Effect 挂载、依赖更新和卸载时怎样建立与清理？ 本文先给出可直接复述的结论，再用最小代码说明React useEffect cleanup 执行顺序的工作方式、判断依据、项目边界和常见误区。
核心关键词React useEffect cleanup 执行顺序 - 0104
当 React Effect 只想在少数值变化时运行，却把整段逻辑都搬进了 Effect，应如何重构以减少不必要同步？
当 React Effect 只想在少数值变化时运行，却把整段逻辑都搬进了 Effect，应如何重构以减少不必要同步？ 本文先给出可直接复述的结论，再用最小代码说明React Effect 移动逻辑 减少依赖 重构的工作方式、判断依据、项目边界和常见误区。
核心关键词React Effect 移动逻辑 减少依赖 重构 - 0105
useEffect 依赖对象或函数时，为什么可能每次渲染都重跑？
useEffect 依赖对象或函数时，为什么可能每次渲染都重跑？ 本文先给出可直接复述的结论，再用最小代码说明React useEffect 对象函数依赖反复执行的工作方式、判断依据、项目边界和常见误区。
核心关键词React useEffect 对象函数依赖反复执行 - 0106
React 组件要根据 navigator.onLine 与 online/offline 事件显示网络状态，Effect 里应同步哪个真相源？
React 组件要根据 navigator.onLine 与 online/offline 事件显示网络状态，Effect 里应同步哪个真相源？ 本文先给出可直接复述的结论，再用最小代码说明React online offline Effect 同步 浏览器状态的工作方式、判断依据、项目边界和常见误区。
核心关键词React online offline Effect 同步 浏览器状态 - 0107
React 父子组件都有 useEffect 时，挂载更新卸载的 Effect 与 cleanup 执行顺序对共享 DOM 操作有何影响？
React 父子组件都有 useEffect 时，挂载更新卸载的 Effect 与 cleanup 执行顺序对共享 DOM 操作有何影响？ 本文先给出可直接复述的结论，再用最小代码说明React 父子组件 Effect 顺序 cleanup的工作方式、判断依据、项目边界和常见误区。
核心关键词React 父子组件 Effect 顺序 cleanup - 0108
当 React 自定义 Hook 返回一个可手动停止函数，同时内部 Effect 也有 cleanup，二者职责如何避免重叠？
当 React 自定义 Hook 返回一个可手动停止函数，同时内部 Effect 也有 cleanup，二者职责如何避免重叠？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook cleanup 手动停止 职责的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook cleanup 手动停止 职责 - 0109
React 组件通过 window.postMessage 与 iframe 通信时，Effect 的依赖应包含 origin/target 的哪些部分才不会错发消息？
React 组件通过 window.postMessage 与 iframe 通信时，Effect 的依赖应包含 origin/target 的哪些部分才不会错发消息？ 本文先给出可直接复述的结论，再用最小代码说明React postMessage iframe Effect origin 依赖的工作方式、判断依据、项目边界和常见误区。
核心关键词React postMessage iframe Effect origin 依赖 - 0110
useEffect 为什么必须声明读到的响应式依赖，漏写会怎样？
useEffect 为什么必须声明读到的响应式依赖，漏写会怎样？ 本文先给出可直接复述的结论，再用最小代码说明React useEffect exhaustive-deps 漏依赖的工作方式、判断依据、项目边界和常见误区。
核心关键词React useEffect exhaustive-deps 漏依赖 - 0111
当 React 需要根据 props 变化重置子组件状态时，为什么优先改 key 而不是写 Effect 清状态？
当 React 需要根据 props 变化重置子组件状态时，为什么优先改 key 而不是写 Effect 清状态？ 本文先给出可直接复述的结论，再用最小代码说明React key 重置组件状态的工作方式、判断依据、项目边界和常见误区。
核心关键词React key 重置组件状态 - 0112
React 用 ResizeObserver 观察一个 ref 元素时，为什么观察目标应来自 Effect 内读取的 node 而不是把 ref.current 当稳定依赖？
React 用 ResizeObserver 观察一个 ref 元素时，为什么观察目标应来自 Effect 内读取的 node 而不是把 ref.current 当稳定依赖？ 本文先给出可直接复述的结论，再用最小代码说明React ResizeObserver ref.current Effect 依赖的工作方式、判断依据、项目边界和常见误区。
核心关键词React ResizeObserver ref.current Effect 依赖 - 0113
React 中「Effect Event」试图解决的事件逻辑与同步逻辑混杂问题是什么？
React 中「Effect Event」试图解决的事件逻辑与同步逻辑混杂问题是什么？ 本文先给出可直接复述的结论，再用最小代码说明React Effect Events 分离事件 副作用的工作方式、判断依据、项目边界和常见误区。
核心关键词React Effect Events 分离事件 副作用 - 0114
React hydration 场景里访问 window/document 的 Effect 为什么通常安全，而在渲染期直接访问会出错？
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 无限循环 依赖 诊断的工作方式、判断依据、项目边界和常见误区。
核心关键词React Effect setState 无限循环 依赖 诊断 - 0116
React Effect 需要“只在打开面板时取一次当前筛选”的快照语义时，怎样表达才能不被依赖变化无意刷新？
React Effect 需要“只在打开面板时取一次当前筛选”的快照语义时，怎样表达才能不被依赖变化无意刷新？ 本文先给出可直接复述的结论，再用最小代码说明React Effect 有意快照 冻结 打开时 依赖的工作方式、判断依据、项目边界和常见误区。
核心关键词React Effect 有意快照 冻结 打开时 依赖 - 0117
React 定时器 Effect 中读到旧 count 时，改用函数式 setState 与把 count 加依赖各自改变了什么？
React 定时器 Effect 中读到旧 count 时，改用函数式 setState 与把 count 加依赖各自改变了什么？ 本文先给出可直接复述的结论，再用最小代码说明React useEffect interval stale state setState 函数式更新的工作方式、判断依据、项目边界和常见误区。
核心关键词React useEffect interval stale state setState 函数式更新 - 0118
React 18 开发模式 StrictMode 下 Effect 为什么会额外经历一次建立—清理—建立，如何区分 bug 与预期行为？
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 会怎样触发一次同步重渲染，为什么可能让浏览器来不及绘制中间帧？ 本文先给出可直接复述的结论，再用最小代码说明React Effect setState 同步重渲染 绘制 中间帧的工作方式、判断依据、项目边界和常见误区。
核心关键词React Effect setState 同步重渲染 绘制 中间帧 - 0121
React 18 StrictMode 开发模式下，如何让第三方实例在重复挂载检查中不泄漏也不被销毁后误用？
React 18 StrictMode 开发模式下，如何让第三方实例在重复挂载检查中不泄漏也不被销毁后误用？ 本文先给出可直接复述的结论，再用最小代码说明React 18 StrictMode 第三方实例 销毁 泄漏的工作方式、判断依据、项目边界和常见误区。
核心关键词React 18 StrictMode 第三方实例 销毁 泄漏 - 0122
React 18 的 useInsertionEffect 面向 CSS-in-JS 注入样式解决了什么时序问题，普通业务代码为什么不该用它？
React 18 的 useInsertionEffect 面向 CSS-in-JS 注入样式解决了什么时序问题，普通业务代码为什么不该用它？ 本文先给出可直接复述的结论，再用最小代码说明React 18 useInsertionEffect CSS-in-JS 样式注入的工作方式、判断依据、项目边界和常见误区。
核心关键词React 18 useInsertionEffect CSS-in-JS 样式注入 - 0123
React 中需要读取 DOM 尺寸并立刻影响下一次绘制时，为什么选 useLayoutEffect 而不是 useEffect？
React 中需要读取 DOM 尺寸并立刻影响下一次绘制时，为什么选 useLayoutEffect 而不是 useEffect？ 本文先给出可直接复述的结论，再用最小代码说明React useLayoutEffect DOM 测量 闪烁 useEffect的工作方式、判断依据、项目边界和常见误区。
核心关键词React useLayoutEffect DOM 测量 闪烁 useEffect - 0124
React 服务端渲染中使用 useLayoutEffect 触发警告时，应该怎样决定改用 useEffect 还是条件渲染？
React 服务端渲染中使用 useLayoutEffect 触发警告时，应该怎样决定改用 useEffect 还是条件渲染？ 本文先给出可直接复述的结论，再用最小代码说明React useLayoutEffect SSR 警告 useEffect fallback的工作方式、判断依据、项目边界和常见误区。
核心关键词React useLayoutEffect SSR 警告 useEffect fallback - 0125
React 18 订阅外部 store 时，为什么 useSyncExternalStore 常优于手写 useEffect + setState？
React 18 订阅外部 store 时，为什么 useSyncExternalStore 常优于手写 useEffect + setState？ 本文先给出可直接复述的结论，再用最小代码说明React 18 useSyncExternalStore 外部 store useEffect的工作方式、判断依据、项目边界和常见误区。
核心关键词React 18 useSyncExternalStore 外部 store useEffect - 0126
React 聊天室组件切换 roomId 时，WebSocket Effect 应如何在依赖变化中避免收到上个房间消息？
React 聊天室组件切换 roomId 时，WebSocket Effect 应如何在依赖变化中避免收到上个房间消息？ 本文先给出可直接复述的结论，再用最小代码说明React WebSocket Effect roomId 依赖 清理 重连的工作方式、判断依据、项目边界和常见误区。
核心关键词React WebSocket Effect roomId 依赖 清理 重连 - 0127
React 所说的“用 Effect 与外部系统同步”具体是什么意思？
React 所说的“用 Effect 与外部系统同步”具体是什么意思？ 本文先给出可直接复述的结论，再用最小代码说明React useEffect 与外部系统同步的工作方式、判断依据、项目边界和常见误区。
核心关键词React useEffect 与外部系统同步 - 0128
在不使用实验性 API 的稳定 React 版本里，如何把“状态变化后通知”与“用户主动提交”分开实现？
在不使用实验性 API 的稳定 React 版本里，如何把“状态变化后通知”与“用户主动提交”分开实现？ 本文先给出可直接复述的结论，再用最小代码说明React 稳定版 分离事件逻辑与 Effect 不用实验 API的工作方式、判断依据、项目边界和常见误区。
核心关键词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 拆成两个 Context？ 本文先给出可直接复述的结论，再用最小代码说明React Context 拆分 state dispatch 性能 复用的工作方式、判断依据、项目边界和常见误区。
核心关键词React Context 拆分 state dispatch 性能 复用 - 0131
自定义 Hook 内部注册的事件监听或定时器，清理责任应该由谁承担？
自定义 Hook 内部注册的事件监听或定时器，清理责任应该由谁承担？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 清理函数 责任的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 清理函数 责任 - 0132
把 useEffect 逻辑抽进自定义 Hook 后，Hook 参数变化时如何保证 effect 正确重新执行？
把 useEffect 逻辑抽进自定义 Hook 后，Hook 参数变化时如何保证 effect 正确重新执行？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 依赖穿透 effect 参数的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 依赖穿透 effect 参数 - 0133
为什么 React 自定义 Hook 的函数名必须以 use 开头？
为什么 React 自定义 Hook 的函数名必须以 use 开头？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 命名 use 开头 原因的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 命名 use 开头 原因 - 0134
设计自定义 Hook 的返回值时，应该返回数组元组还是对象？
设计自定义 Hook 的返回值时，应该返回数组元组还是对象？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 返回值 数组 对象的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 返回值 数组 对象 - 0135
自定义 Hook 返回的回调函数在每次渲染都变新引用，导致调用方 effect 反复执行，该如何处理？
自定义 Hook 返回的回调函数在每次渲染都变新引用，导致调用方 effect 反复执行，该如何处理？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook useCallback 返回函数 稳定引用的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook useCallback 返回函数 稳定引用 - 0136
两个组件同时调用同一个自定义 Hook，它们内部的状态会互相共享吗？
两个组件同时调用同一个自定义 Hook，它们内部的状态会互相共享吗？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 状态共享 独立的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 状态共享 独立 - 0137
复用一段包含状态与副作用的逻辑时，应该抽成自定义 Hook 还是抽成组件？
复用一段包含状态与副作用的逻辑时，应该抽成自定义 Hook 还是抽成组件？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 组件 复用 取舍的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 组件 复用 取舍 - 0138
React 的自定义 Hook 与普通的 JavaScript 工具函数有什么本质区别？
React 的自定义 Hook 与普通的 JavaScript 工具函数有什么本质区别？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 工具函数 区别的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 工具函数 区别 - 0139
只想响应某个交互而不因读取最新 state 让整个 useEffect 反复重跑，React 提供了什么思路？
只想响应某个交互而不因读取最新 state 让整个 useEffect 反复重跑，React 提供了什么思路？ 本文先给出可直接复述的结论，再用最小代码说明React Effect Event useEffectEvent 实验性的工作方式、判断依据、项目边界和常见误区。
核心关键词React Effect Event useEffectEvent 实验性 - 0140
在 React useEffect 里启动的定时器总是读到旧的 state，这是为什么，有哪些修复方式？
在 React useEffect 里启动的定时器总是读到旧的 state，这是为什么，有哪些修复方式？ 本文先给出可直接复述的结论，再用最小代码说明React useEffect 定时器 读到旧 state 修复的工作方式、判断依据、项目边界和常见误区。
核心关键词React useEffect 定时器 读到旧 state 修复 - 0141
在 React 的 useEffect 中订阅聊天服务或 WebSocket 时，为什么清理函数必不可少？
在 React 的 useEffect 中订阅聊天服务或 WebSocket 时，为什么清理函数必不可少？ 本文先给出可直接复述的结论，再用最小代码说明React useEffect 订阅 清理函数 重复连接的工作方式、判断依据、项目边界和常见误区。
核心关键词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 如何选择的工作方式、判断依据、项目边界和常见误区。
核心关键词React 事件处理 useEffect 如何选择 - 0144
在 React 18 中，如何把函数组件内部的 DOM 节点暴露给父组件调用 focus 等方法？
在 React 18 中，如何把函数组件内部的 DOM 节点暴露给父组件调用 focus 等方法？ 本文先给出可直接复述的结论，再用最小代码说明React forwardRef 父组件 访问子组件 DOM的工作方式、判断依据、项目边界和常见误区。
核心关键词React forwardRef 父组件 访问子组件 DOM - 0145
设计 useReducer 的 action 时，计算结果应该放进 payload 还是交给 reducer 自己算？
设计 useReducer 的 action 时，计算结果应该放进 payload 还是交给 reducer 自己算？ 本文先给出可直接复述的结论，再用最小代码说明React reducer action payload 设计的工作方式、判断依据、项目边界和常见误区。
核心关键词React reducer action payload 设计 - 0146
为什么 React 的 reducer 必须是纯函数，不能在里面发请求、写 ref 或调用定时器？
为什么 React 的 reducer 必须是纯函数，不能在里面发请求、写 ref 或调用定时器？ 本文先给出可直接复述的结论，再用最小代码说明React reducer 纯函数 副作用 原因的工作方式、判断依据、项目边界和常见误区。
核心关键词React reducer 纯函数 副作用 原因 - 0147
React 19 中函数组件接收 ref 的方式发生了什么变化，与 forwardRef 有何差异？
React 19 中函数组件接收 ref 的方式发生了什么变化，与 forwardRef 有何差异？ 本文先给出可直接复述的结论，再用最小代码说明React 19 ref as prop forwardRef 变化的工作方式、判断依据、项目边界和常见误区。
核心关键词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，会有什么问题？ 本文先给出可直接复述的结论，再用最小代码说明React ref 非响应式 effect 依赖 ref.current的工作方式、判断依据、项目边界和常见误区。
核心关键词React ref 非响应式 effect 依赖 ref.current