React 面试题精选（2026版）

🟢 第一阶段：基础必问

1. React 的核心特性是什么？

   • 关键词：声明式编程、组件化、虚拟 DOM、单向数据流。
   • 追问：虚拟 DOM 真的比直接操作 DOM 快吗？

2. useState 和 useEffect 的常见陷阱有哪些？

   • 闭包陷阱 (Stale Closure)
   • 无限循环依赖
   • 异步更新机制

3. 受控组件 (Controlled) vs 非受控组件 (Uncontrolled)

   • 区别与应用场景
   • 何时使用 useRef？

4. React 中的 Key 有什么作用？为什么不能用 index？

   • Diff 算法优化原理
   • 列表顺序变化时的状态错乱风险

---

🟡 第二阶段：Hooks 进阶与原理

1. useMemo 和 useCallback 的区别及使用场景？

   • 缓存值 vs 缓存函数引用
   • 配合 React.memo 的最佳实践
   • 反模式：不要滥用

2. 自定义 Hook 的设计原则是什么？

   • 命名规范 (use 开头)
   • 逻辑复用与状态隔离

3. useLayoutEffect 和 useEffect 的区别？

   • 执行时机：DOM 变更后同步 vs 绘制后异步
   • 适用场景：测量布局 vs 副作用处理

4. 解释一下 React 的“闭包陷阱”及其解决方案

   • 现象与本质
   • 解法：依赖数组、函数式更新、useRef

---

🔴 第三阶段：React 18 & 新特性

1. React 18 的并发模式 (Concurrent Mode) 是什么？

   • 可中断渲染与优先级调度
   • 新 API：startTransition, useDeferredValue, Suspense

2. 自动批处理 (Automatic Batching) 带来了什么改变？

   • 从事件处理扩展到 Promise/定时器
   • 减少不必要的重渲染

3. 了解 React Server Components (RSC) 吗？它解决了什么问题？

   • 服务端渲染组件的优势
   • Bundle 体积优化与直接数据库访问
   • 限制：不能使用 Hooks 和浏览器 API

---

🟣 第四阶段：性能优化与架构

1. 如何分析和优化 React 应用的性能？

   • 工具：DevTools Profiler, Lighthouse
   • 手段：代码分割、虚拟列表、状态原子化

2. Context API 的性能陷阱及解决方案？

   • 全局更新导致的重渲染问题
   • 解决：拆分 Context、配合 memo、使用 Zustand/Jotai

3. 错误边界 (Error Boundaries) 是什么？Hooks 能写吗？

   • 捕获子组件错误
   • 限制：目前仅支持类组件

---

💻 第五阶段：手写代码题

1. 手写一个 useRequest Hook

   • 管理 loading, error, data 状态
   • 支持请求取消 (AbortController)

2. 实现一个简单的 React.memo 或 useMemo

   • 依赖比较与缓存逻辑

3. 实现一个虚拟列表 (Virtual List)

   • 滚动事件监听与可视区域计算

4. 实现 useDebounce 或 useThrottle

   • 定时器清理与闭包应用