共 30 道 React 方向的面试题，每题附完整答案与代码示例。点击右侧方框可标记掌握度。
虚拟 DOM 是一个 JavaScript 对象树，是真实 DOM 的轻量级副本。 工作流程 为什么需要虚拟 DOM 1. 减少直接 DOM 操作 ：DOM 操作昂贵（涉及重排重绘），虚拟 DOM 在…
常用 Hooks 1. useState — 状态管理 2. useEffect — 副作用 3. useRef — 引用（不触发重渲染） 4. useMemo — 缓存计算结果 5. useCall…
执行时机 Hook 执行时机 阻塞渲染 适合场景 ------ ---------- ---------- ---------- useEffect DOM 更新后 异步 执行 ❌ 数据请求、订阅、日…
三种情况 详细对比 依赖数组 执行时机 清理函数执行时机 ---------- ---------- ----------------- 不传 每次渲染后 下次 effect 执行前 + 卸载时 []…
区别 - useMemo 缓存 计算结果 （值） - useCallback 缓存 函数引用 什么时候用 useMemo 适用场景： 1. 昂贵的计算 2. 稳定引用对象 （作为其他 Hook 的依赖…
核心区别 特性 useState useRef ------ ---------- -------- 修改是否触发重渲染 ✅ ❌ 值的持久化 ✅ ✅ 读取方式 通过 state 变量 .current…
React 15 的问题 React 15 使用 递归 方式更新组件树（Stack Reconciler），一旦开始就无法中断，如果组件树很深，长任务会阻塞主线程，导致掉帧。 Fiber 是什么 Fi…
结论 - React 17 及之前 ：在 React 管理的事件处理函数中是"异步"的，在 setTimeout/原生事件中是同步的 - React 18+ ：所有更新都是"异步"的（自动批处理） R…
1. 父子通信（props） 2. Context（跨层级） 3. useRef + useImperativeHandle（父调子方法） 4. 状态提升（兄弟通信） 5. 事件总线（非推荐，但简单）…
高阶组件（HOC） HOC 是一个函数，接收组件返回新组件，用于逻辑复用。 常见 HOC： - withRouter（React Router） - connect（Redux） - withStyl…
1. React.memo（组件级记忆） 2. useMemo / useCallback 3. 状态下放 将频繁变化的状态隔离到小组件中： 4. 虚拟列表 5. 懒加载 6. key 优化 7. C…
key 的作用 key 是 React Diff 算法识别列表项的唯一标识，帮助 React 判断哪些元素变化了。 Diff 过程 React 将新旧虚拟 DOM 对比： 1. 相同 key 的元素视…
类组件生命周期 生命周期详解 Hooks 对应关系 类组件生命周期 Hooks 等价 --------------- ----------- constructor useState / useMem…
受控组件 表单数据由 React state 管理，每次输入都更新 state。 非受控组件 表单数据由 DOM 自己管理，React 通过 ref 获取值。 对比 特性 受控组件 非受控组件 ---…
基本用法 路由级懒加载 原理 1. React.lazy 返回一个特殊组件，内部状态为 pending 2. 触发 import() 动态加载模块（返回 Promise） 3. React 渲染时发现…
基本路由配置 导航 获取路由参数 嵌套路由（Outlet） 路由守卫 懒加载路由 v5 vs v6 变化 特性 v5 v6 ------ ----- ----- 路由组件 <Switch <Route…
核心理念对比 维度 React Vue ------ ------- ----- 编程范式 函数式 响应式 + 声明式 数据流 单向 双向绑定（v-model） 模板 vs JSX JSX 模板 + …
推荐「 CSS 变量 + Context + 根节点 class 」的方案，性能好、可动态换肤。 1. 用 CSS 变量定义两套主题 2. 用 Context 管理主题状态并切换根节点 class 其…
useReducer 用 (state, action) = newState 的 reducer 管理复杂状态，适合 多子状态、状态转移逻辑复杂 的场景（比一堆 useState 更清晰）。 和 u…
两者都是 让低优先级更新不阻塞 UI 响应 （并发渲染的一部分）： - useTransition ：把"非紧急"更新标记为 transition，期间紧急更新（如输入）优先渲染，紧急更新完成后再提交…
错误边界是 捕获子组件渲染/生命周期抛出的错误、避免整棵应用崩溃 的类组件，通过两个静态方法实现： 关键点 ： - 只能捕获渲染期错误 ，捕获不到事件回调、异步（setTimeout/Promise）…
useId 生成 跨服务端/客户端一致的唯一 ID ，专为 SSR/SSG 设计。 为什么不能用 random/Date ： - 服务端渲染时生成的 id 与客户端 hydration 时对不上 → …
自定义 Hook 是以 use 开头的函数，内部可调用其他 Hook，用于 抽取组件间可复用的状态逻辑 （而非 UI）。 最佳实践 ： 1. 命名必须以 use 开头（让 React 的 Hooks …
默认函数组件 不能接收 ref （React 把 ref 当特殊属性）。 - forwardRef ：让函数组件能接收父组件传来的 ref，转发到内部某个 DOM/组件 - useImperative…
它们不是银弹，用错反而更慢 （记忆化本身有成本）： - React.memo ：对 props 做浅比较，props 不变则跳过重渲染。但 每次父渲染都新建函数/对象传给子组件 → 浅比较永远不等 →…
Fiber 是 React 16 引入的 虚拟栈帧 ，把渲染任务拆成可中断/恢复的小单元。 reconciliation 两阶段 ： 1. render 阶段 （可中断）：从根开始，对比新旧 Virt…
React 在 根节点（React 17 起为容器根，17 前为 document） 上统一委托监听原生事件，再 派发到自己模拟的事件系统 ，所有 onClick 等拿到的是跨浏览器统一的 Synth…
并发渲染让 React 可以 同时维护多个版本的 UI ，根据优先级调度，保证用户输入等紧急更新优先响应。 startTransition 把某个更新标记为「可中断的低优先级更新」： 要点 ： - t…
三者都解决「逻辑复用」，各有取舍： 模式 优点 缺点 --- --- --- HOC 包裹清晰、可组合 嵌套地狱、props 来源不明、命名冲突 Render Props 灵活、状态可见 JSX 嵌套…
useSyncExternalStore 是 React 18 官方提供的 Hook，让组件 安全订阅外部可变数据源 （如 Redux store、浏览器 API、第三方状态库），并在数据变化时正确重…