React Effect 中立即 setState 会怎样触发一次同步重渲染，为什么可能让浏览器来不及绘制中间帧？
React Effect 中立即 setState 会怎样触发一次同步重渲染，为什么可能让浏览器来不及绘制中间帧？ 本文先给出可直接复述的结论，再用最小代码说明React Effect setState 同步重渲染 绘制 中间帧的工作方式、判断依据、项目边界和常见误区。
核心关键词React Effect setState 同步重渲染 绘制 中间帧
面试知识索引 · 分类、标签与搜索
5000+ 道程序员面试题，每题都有完整答案
程序员面试题库第 71 页，收录第 3501–3550 题，共 5000 道完整解析，覆盖前端、JavaScript、React、Vue、Node.js、AI Agent、网络、数据库与系统设计。
5000+完整问题
52技术分类
178检索标签
100索引分页
快速定位
分类、标签与关键词搜索
技术分类52 个
全部分类5000AI Agent511浏览器301JavaScript285React281AI 开发262CSS240Node.js217TypeScript206Vue180前端工程化138React Native135
查看全部 52 个分类
热门标签178 个
查看其余 163 个标签
测试109数据库事务95实时通信92Web 可访问性90动画79可观测性77Agent 记忆75向量检索66工具调用66LangGraph59Prompt56任务规划53排障与运维53数据库索引52浏览器自动化51Flexbox50值与类型50GraphQL49事务与并发49构建与镜像49DNS 与 TLS48工程协作与交付48AI 评测47CSS Grid47Express 服务47MCP47副作用与同步47向量与嵌入47文件与多媒体47流与二进制47传输与协议46列表与性能46可维护代码46响应式原理46容器运行46指标日志追踪46数据建模与运维46文件与 I/O46表单与输入46MCP 协议45RAG45Vite 与模块构建45Webpack45内存与虚拟化45原生集成45多 Agent45工作负载与发布45应用与性能45数据处理45模块与工具链45组件与模板45缓存与数据结构45网络与运维45评估与调试45身份认证与授权45运行时与开发45Web 系统方案44一致性与容错44侦听与生命周期44分布式使用44原生组件与交互44可访问交互44消息与异步处理44渲染与调度44索引与执行计划44组件设计44缓存与代理44进程与并发44层叠与选择器43攻击面与防御43文档数据库43权限与安全43离线与渐进增强43语义与文档43请求与通信 API43Worker 与线程协作42事件系统42存储与离线数据42服务架构42服务端与流式渲染42服务端工程42泛型设计42版本控制42类型收窄42类型运算42组件与端到端42编码与执行42进程与线程42DOM 与文档操作41Flex 布局41HTTP 语义41NestJS 架构41REST 与接口契约41SQL 查询41加载与交互性能41动画与视觉41类型工程41记忆与状态41运行时与调度41Agent 架构40WebAssembly 集成40单元与集成测试40多 Agent 协作40工作流编排40模块与语言机制40浏览器与 UI 自动化40生产运行40函数与作用域39响应式设计39性能与并发39类型系统基础39Grid 布局38数组与集合38盒模型与排版38Hooks 与复用37应用开发37推理与成本37状态共享37知识库数据37模型与应用评测36对象与原型35状态与渲染35语言与并发35异步与 Promise34Effect32RAG 检索31React 性能31响应式与性能31微调与数据31TanStack Query30全栈边界30数据与缓存30大模型基础29路由与数据流29事件循环28流式交互28提示与上下文设计27数据与服务端27组件与依赖注入27组件与响应式27多模态应用24应用与渲染24Hydration22沙箱安全22状态管理18算法18CI/CD13语言与运行时10React Server Components6搜索与排序4实用函数实现3链表栈队列3图算法2字符串算法2树与遍历2索引与高级结构2Kubernetes1作用域与函数1动态规划1异步与浏览器1手写与交互性能1数组与双指针1相等比较1
第 71 页
本页面试问题
按稳定语义路径排序
- 3501
- 3502
React 18 StrictMode 开发模式下，如何让第三方实例在重复挂载检查中不泄漏也不被销毁后误用？
React 18 StrictMode 开发模式下，如何让第三方实例在重复挂载检查中不泄漏也不被销毁后误用？ 本文先给出可直接复述的结论，再用最小代码说明React 18 StrictMode 第三方实例 销毁 泄漏的工作方式、判断依据、项目边界和常见误区。
核心关键词React 18 StrictMode 第三方实例 销毁 泄漏 - 3503
React 18 的 useInsertionEffect 面向 CSS-in-JS 注入样式解决了什么时序问题，普通业务代码为什么不该用它？
React 18 的 useInsertionEffect 面向 CSS-in-JS 注入样式解决了什么时序问题，普通业务代码为什么不该用它？ 本文先给出可直接复述的结论，再用最小代码说明React 18 useInsertionEffect CSS-in-JS 样式注入的工作方式、判断依据、项目边界和常见误区。
核心关键词React 18 useInsertionEffect CSS-in-JS 样式注入 - 3504
React 中需要读取 DOM 尺寸并立刻影响下一次绘制时，为什么选 useLayoutEffect 而不是 useEffect？
React 中需要读取 DOM 尺寸并立刻影响下一次绘制时，为什么选 useLayoutEffect 而不是 useEffect？ 本文先给出可直接复述的结论，再用最小代码说明React useLayoutEffect DOM 测量 闪烁 useEffect的工作方式、判断依据、项目边界和常见误区。
核心关键词React useLayoutEffect DOM 测量 闪烁 useEffect - 3505
React 服务端渲染中使用 useLayoutEffect 触发警告时，应该怎样决定改用 useEffect 还是条件渲染？
React 服务端渲染中使用 useLayoutEffect 触发警告时，应该怎样决定改用 useEffect 还是条件渲染？ 本文先给出可直接复述的结论，再用最小代码说明React useLayoutEffect SSR 警告 useEffect fallback的工作方式、判断依据、项目边界和常见误区。
核心关键词React useLayoutEffect SSR 警告 useEffect fallback - 3506
React 18 订阅外部 store 时，为什么 useSyncExternalStore 常优于手写 useEffect + setState？
React 18 订阅外部 store 时，为什么 useSyncExternalStore 常优于手写 useEffect + setState？ 本文先给出可直接复述的结论，再用最小代码说明React 18 useSyncExternalStore 外部 store useEffect的工作方式、判断依据、项目边界和常见误区。
核心关键词React 18 useSyncExternalStore 外部 store useEffect - 3507
React 聊天室组件切换 roomId 时，WebSocket Effect 应如何在依赖变化中避免收到上个房间消息？
React 聊天室组件切换 roomId 时，WebSocket Effect 应如何在依赖变化中避免收到上个房间消息？ 本文先给出可直接复述的结论，再用最小代码说明React WebSocket Effect roomId 依赖 清理 重连的工作方式、判断依据、项目边界和常见误区。
核心关键词React WebSocket Effect roomId 依赖 清理 重连 - 3508
React 所说的“用 Effect 与外部系统同步”具体是什么意思？
React 所说的“用 Effect 与外部系统同步”具体是什么意思？ 本文先给出可直接复述的结论，再用最小代码说明React useEffect 与外部系统同步的工作方式、判断依据、项目边界和常见误区。
核心关键词React useEffect 与外部系统同步 - 3509
在不使用实验性 API 的稳定 React 版本里，如何把“状态变化后通知”与“用户主动提交”分开实现？
在不使用实验性 API 的稳定 React 版本里，如何把“状态变化后通知”与“用户主动提交”分开实现？ 本文先给出可直接复述的结论，再用最小代码说明React 稳定版 分离事件逻辑与 Effect 不用实验 API的工作方式、判断依据、项目边界和常见误区。
核心关键词React 稳定版 分离事件逻辑与 Effect 不用实验 API - 3510
React 回调 ref 适合什么场景，条件 DOM 出现后为什么不一定需要 Effect？
用条件输入框解释回调 ref 如何跟随节点连接与移除，比较对象 ref 与挂载 Effect，说明回调身份、动态节点和清理边界。
核心关键词React callback ref 条件 DOM 挂载处理 - 3511
用 useReducer 加 Context 复用状态逻辑时，为什么常把 state 和 dispatch 拆成两个 Context？
用 useReducer 加 Context 复用状态逻辑时，为什么常把 state 和 dispatch 拆成两个 Context？ 本文先给出可直接复述的结论，再用最小代码说明React Context 拆分 state dispatch 性能 复用的工作方式、判断依据、项目边界和常见误区。
核心关键词React Context 拆分 state dispatch 性能 复用 - 3512
自定义 Hook 内部注册的事件监听或定时器，清理责任应该由谁承担？
自定义 Hook 内部注册的事件监听或定时器，清理责任应该由谁承担？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 清理函数 责任的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 清理函数 责任 - 3513
把 useEffect 逻辑抽进自定义 Hook 后，Hook 参数变化时如何保证 effect 正确重新执行？
把 useEffect 逻辑抽进自定义 Hook 后，Hook 参数变化时如何保证 effect 正确重新执行？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 依赖穿透 effect 参数的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 依赖穿透 effect 参数 - 3514
为什么 React 自定义 Hook 的函数名必须以 use 开头？
为什么 React 自定义 Hook 的函数名必须以 use 开头？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 命名 use 开头 原因的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 命名 use 开头 原因 - 3515
设计自定义 Hook 的返回值时，应该返回数组元组还是对象？
设计自定义 Hook 的返回值时，应该返回数组元组还是对象？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 返回值 数组 对象的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 返回值 数组 对象 - 3516
自定义 Hook 返回的回调函数在每次渲染都变新引用，导致调用方 effect 反复执行，该如何处理？
自定义 Hook 返回的回调函数在每次渲染都变新引用，导致调用方 effect 反复执行，该如何处理？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook useCallback 返回函数 稳定引用的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook useCallback 返回函数 稳定引用 - 3517
两个组件同时调用同一个自定义 Hook，它们内部的状态会互相共享吗？
两个组件同时调用同一个自定义 Hook，它们内部的状态会互相共享吗？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 状态共享 独立的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 状态共享 独立 - 3518
复用一段包含状态与副作用的逻辑时，应该抽成自定义 Hook 还是抽成组件？
复用一段包含状态与副作用的逻辑时，应该抽成自定义 Hook 还是抽成组件？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 组件 复用 取舍的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 组件 复用 取舍 - 3519
React 的自定义 Hook 与普通的 JavaScript 工具函数有什么本质区别？
React 的自定义 Hook 与普通的 JavaScript 工具函数有什么本质区别？ 本文先给出可直接复述的结论，再用最小代码说明React 自定义 Hook 工具函数 区别的工作方式、判断依据、项目边界和常见误区。
核心关键词React 自定义 Hook 工具函数 区别 - 3520
只想响应某个交互而不因读取最新 state 让整个 useEffect 反复重跑，React 提供了什么思路？
只想响应某个交互而不因读取最新 state 让整个 useEffect 反复重跑，React 提供了什么思路？ 本文先给出可直接复述的结论，再用最小代码说明React Effect Event useEffectEvent 实验性的工作方式、判断依据、项目边界和常见误区。
核心关键词React Effect Event useEffectEvent 实验性 - 3521
在 React useEffect 里启动的定时器总是读到旧的 state，这是为什么，有哪些修复方式？
在 React useEffect 里启动的定时器总是读到旧的 state，这是为什么，有哪些修复方式？ 本文先给出可直接复述的结论，再用最小代码说明React useEffect 定时器 读到旧 state 修复的工作方式、判断依据、项目边界和常见误区。
核心关键词React useEffect 定时器 读到旧 state 修复 - 3522
在 React 的 useEffect 中订阅聊天服务或 WebSocket 时，为什么清理函数必不可少？
在 React 的 useEffect 中订阅聊天服务或 WebSocket 时，为什么清理函数必不可少？ 本文先给出可直接复述的结论，再用最小代码说明React useEffect 订阅 清理函数 重复连接的工作方式、判断依据、项目边界和常见误区。
核心关键词React useEffect 订阅 清理函数 重复连接 - 3523
eslint-plugin-react-hooks 能发现哪些错误，规则应该怎么配置？
说明 rules-of-hooks 与 exhaustive-deps 分别检查什么，给出 ESLint 9 的基础 flat config，区分插件推荐预设中的额外诊断，并介绍条件 Hook、遗漏依赖和自定义 Effect Hook 的修复思路。
核心关键词eslint-plugin-react-hooks exhaustive-deps 规则 - 3524
一段响应式逻辑应该写在 React 事件处理函数里还是 useEffect 里，判断标准是什么？
一段响应式逻辑应该写在 React 事件处理函数里还是 useEffect 里，判断标准是什么？ 本文先给出可直接复述的结论，再用最小代码说明React 事件处理 useEffect 如何选择的工作方式、判断依据、项目边界和常见误区。
核心关键词React 事件处理 useEffect 如何选择 - 3525
在 React 18 中，如何把函数组件内部的 DOM 节点暴露给父组件调用 focus 等方法？
在 React 18 中，如何把函数组件内部的 DOM 节点暴露给父组件调用 focus 等方法？ 本文先给出可直接复述的结论，再用最小代码说明React forwardRef 父组件 访问子组件 DOM的工作方式、判断依据、项目边界和常见误区。
核心关键词React forwardRef 父组件 访问子组件 DOM - 3526
设计 useReducer 的 action 时，计算结果应该放进 payload 还是交给 reducer 自己算？
设计 useReducer 的 action 时，计算结果应该放进 payload 还是交给 reducer 自己算？ 本文先给出可直接复述的结论，再用最小代码说明React reducer action payload 设计的工作方式、判断依据、项目边界和常见误区。
核心关键词React reducer action payload 设计 - 3527
为什么 React 的 reducer 必须是纯函数，不能在里面发请求、写 ref 或调用定时器？
为什么 React 的 reducer 必须是纯函数，不能在里面发请求、写 ref 或调用定时器？ 本文先给出可直接复述的结论，再用最小代码说明React reducer 纯函数 副作用 原因的工作方式、判断依据、项目边界和常见误区。
核心关键词React reducer 纯函数 副作用 原因 - 3528
React 19 中函数组件接收 ref 的方式发生了什么变化，与 forwardRef 有何差异？
React 19 中函数组件接收 ref 的方式发生了什么变化，与 forwardRef 有何差异？ 本文先给出可直接复述的结论，再用最小代码说明React 19 ref as prop forwardRef 变化的工作方式、判断依据、项目边界和常见误区。
核心关键词React 19 ref as prop forwardRef 变化 - 3529
React 19 的 ref 回调清理函数怎样工作，为什么内联回调也会触发清理？
用 DOM 原生事件订阅解释 React 19 ref cleanup 的资源配对，说明节点移除、回调身份变化、Strict Mode 检查及旧版 null 清理的迁移。
核心关键词React 19 ref callback cleanup 清理函数 - 3530
React 为什么不应在渲染时读写 ref.current，惰性初始化为什么是例外？
区分渲染阶段的可变引用读写与可预测初始化，用点击缓存示例说明事件读写、state 展示和跨渲染容器，并解释资源创建的限制。
核心关键词React ref current 渲染读写纯度惰性初始化 - 3531
把 ref.current 当作 useEffect 的依赖，或者直接在 JSX 中渲染 ref.current，会有什么问题？
把 ref.current 当作 useEffect 的依赖，或者直接在 JSX 中渲染 ref.current，会有什么问题？ 本文先给出可直接复述的结论，再用最小代码说明React ref 非响应式 effect 依赖 ref.current的工作方式、判断依据、项目边界和常见误区。
核心关键词React ref 非响应式 effect 依赖 ref.current - 3532
React 用 ref 保存前一个值时，“上一次渲染”和“上一次提交”有什么区别？
通过状态变化记录器解释 ref 保存的历史究竟属于哪个阶段，避免在 render 中读写可变历史，说明首次值、相同值、批处理和可见历史状态的设计。
核心关键词React useRef 保存前一个已提交值 - 3533
React 中 useRef 和 useState 都能跨渲染保存数据，二者的本质区别和适用场景是什么？
React 中 useRef 和 useState 都能跨渲染保存数据，二者的本质区别和适用场景是什么？ 本文先给出可直接复述的结论，再用最小代码说明React useRef 和 useState 区别的工作方式、判断依据、项目边界和常见误区。
核心关键词React useRef 和 useState 区别 - 3534
为什么 React 的 Hooks 必须在每次渲染中以完全相同的顺序调用，不能放进条件或循环里？
为什么 React 的 Hooks 必须在每次渲染中以完全相同的顺序调用，不能放进条件或循环里？ 本文先给出可直接复述的结论，再用最小代码说明React Hooks 为什么不能条件调用的工作方式、判断依据、项目边界和常见误区。
核心关键词React Hooks 为什么不能条件调用 - 3535
React 18 的 Strict Mode 下 useEffect 在开发环境为什么会执行两次，怎样写才是安全的？
React 18 的 Strict Mode 下 useEffect 在开发环境为什么会执行两次，怎样写才是安全的？ 本文先给出可直接复述的结论，再用最小代码说明React 18 Strict Mode useEffect 执行两次的工作方式、判断依据、项目边界和常见误区。
核心关键词React 18 Strict Mode useEffect 执行两次 - 3536
React 的 useImperativeHandle 适合在什么情况下用来约束父组件对子组件的访问？
React 的 useImperativeHandle 适合在什么情况下用来约束父组件对子组件的访问？ 本文先给出可直接复述的结论，再用最小代码说明React useImperativeHandle 暴露 命令式 API的工作方式、判断依据、项目边界和常见误区。
核心关键词React useImperativeHandle 暴露 命令式 API - 3537
React 的 useLayoutEffect 与 useEffect 执行时机有什么差异，这决定了怎样的使用边界？
React 的 useLayoutEffect 与 useEffect 执行时机有什么差异，这决定了怎样的使用边界？ 本文先给出可直接复述的结论，再用最小代码说明React useLayoutEffect useEffect 时机 闪烁的工作方式、判断依据、项目边界和常见误区。
核心关键词React useLayoutEffect useEffect 时机 闪烁 - 3538
React 的 useMemo 能解决哪两类问题，为什么不能把它当作结果一定会被缓存的语义保证？
React 的 useMemo 能解决哪两类问题，为什么不能把它当作结果一定会被缓存的语义保证？ 本文先给出可直接复述的结论，再用最小代码说明React useMemo 用途 缓存 语义保证的工作方式、判断依据、项目边界和常见误区。
核心关键词React useMemo 用途 缓存 语义保证 - 3539
useReducer 配合 Context 能否替代 Redux 做全局状态管理，适用边界在哪里？
useReducer 配合 Context 能否替代 Redux 做全局状态管理，适用边界在哪里？ 本文先给出可直接复述的结论，再用最小代码说明React useReducer Context Redux 替代 边界的工作方式、判断依据、项目边界和常见误区。
核心关键词React useReducer Context Redux 替代 边界 - 3540
useReducer 返回的 dispatch 函数身份稳定吗，写进 useEffect 依赖数组时能否省略？
useReducer 返回的 dispatch 函数身份稳定吗，写进 useEffect 依赖数组时能否省略？ 本文先给出可直接复述的结论，再用最小代码说明React useReducer dispatch 稳定 依赖数组的工作方式、判断依据、项目边界和常见误区。
核心关键词React useReducer dispatch 稳定 依赖数组 - 3541
useReducer 的第三个参数 init 函数有什么作用？
useReducer 的第三个参数 init 函数有什么作用？ 本文先给出可直接复述的结论，再用最小代码说明React useReducer init 惰性初始化 第三个参数的工作方式、判断依据、项目边界和常见误区。
核心关键词React useReducer init 惰性初始化 第三个参数 - 3542
什么时候应该把 React 组件里的 useState 重构为 useReducer？
什么时候应该把 React 组件里的 useState 重构为 useReducer？ 本文先给出可直接复述的结论，再用最小代码说明React useReducer useState 何时重构的工作方式、判断依据、项目边界和常见误区。
核心关键词React useReducer useState 何时重构 - 3543
什么情况下必须使用 React setState 的函数式更新形式而不是直接传新值？
什么情况下必须使用 React setState 的函数式更新形式而不是直接传新值？ 本文先给出可直接复述的结论，再用最小代码说明React setState 函数式更新 updater的工作方式、判断依据、项目边界和常见误区。
核心关键词React setState 函数式更新 updater - 3544
给 React 的 useState 传一个函数和直接传初始值有什么区别？
给 React 的 useState 传一个函数和直接传初始值有什么区别？ 本文先给出可直接复述的结论，再用最小代码说明React useState 惰性初始化 函数参数的工作方式、判断依据、项目边界和常见误区。
核心关键词React useState 惰性初始化 函数参数 - 3545
为什么 useSyncExternalStore 的 getSnapshot 必须返回缓存的值，而不能每次新建一个对象？
为什么 useSyncExternalStore 的 getSnapshot 必须返回缓存的值，而不能每次新建一个对象？ 本文先给出可直接复述的结论，再用最小代码说明React useSyncExternalStore getSnapshot 缓存 无限循环的工作方式、判断依据、项目边界和常见误区。
核心关键词React useSyncExternalStore getSnapshot 缓存 无限循环 - 3546
React 的 useSyncExternalStore 是为解决什么问题而设计的？
React 的 useSyncExternalStore 是为解决什么问题而设计的？ 本文先给出可直接复述的结论，再用最小代码说明React useSyncExternalStore tearing 并发的工作方式、判断依据、项目边界和常见误区。
核心关键词React useSyncExternalStore tearing 并发 - 3547
React 并发渲染中『渲染可中断』具体指什么，中断后工作会被浪费吗？
React 并发渲染中『渲染可中断』具体指什么，中断后工作会被浪费吗？ 本文先给出可直接复述的结论，再用最小代码说明React 并发渲染 可中断 时间切片的工作方式、判断依据、项目边界和常见误区。
核心关键词React 并发渲染 可中断 时间切片 - 3548
用 React DevTools Profiler 的火焰图和排序图如何定位最耗时的组件？
用 React DevTools Profiler 的火焰图和排序图如何定位最耗时的组件？ 本文先给出可直接复述的结论，再用最小代码说明React DevTools Profiler 火焰图 定位慢组件的工作方式、判断依据、项目边界和常见误区。
核心关键词React DevTools Profiler 火焰图 定位慢组件 - 3549
如何诊断一个组件发生了本不该发生的重渲染，根因通常有哪些？
如何诊断一个组件发生了本不该发生的重渲染，根因通常有哪些？ 本文先给出可直接复述的结论，再用最小代码说明React 排查 多余重渲染 原因的工作方式、判断依据、项目边界和常见误区。
核心关键词React 排查 多余重渲染 原因 - 3550
React.memo 的 arePropsEqual 如何编写，为什么不能忽略函数 prop？
通过候选人列表说明 React.memo 自定义比较器需要覆盖全部输出与事件行为，解释函数 prop 导致旧闭包的风险、不可变数据前提，以及有界逐项比较和深比较的成本取舍。
核心关键词React.memo arePropsEqual 自定义比较