⭐️ 作者前言
我是 代码不加糖。
2026 年的 React 面试，已经不再是"API 背诵大赛" ，而是对 底层原理、性能优化、并发机制 的深度考察。
本文精选 12 道高频面试题 ，覆盖 基础 → Hooks → 原理 → 实战 ，每道题都附带 面试标准答法 + 进阶加分点。建议收藏，面试前刷一遍！🚀
一、基础认知篇（必问 3 题）
Q1：React 18 有哪些核心新特性？
✅ 标准答案：
-
✅ Concurrent Rendering（并发渲染）
-
✅ Automatic Batching（自动批处理）
-
✅ Transitions（
startTransition） -
✅ Suspense 增强
-
✅ 新的 Hydration API
加分点：
React 18 的核心不是新功能，而是 调度能力的升级，让 UI 更"可中断"。
Q2：React 和 Vue 的核心区别？
| 维度 | React | Vue |
|---|---|---|
| 思想 | UI = f(state) | MVVM |
| 响应式 | 手动 setState | 自动依赖追踪 |
| 模板 | JSX | Template |
| 灵活性 | 极高 | 适中 |
加分点：
React 是 UI 库 ，Vue 是 框架；
React 更偏"自由"，Vue 更偏"约束"。
Q3：什么是 Virtual DOM？它一定比 DOM 快吗？
✅ 标准答案：
-
Virtual DOM 是 JS 对象描述的 DOM 结构
-
通过 Diff 算法最小化 DOM 操作
加分点（杀手锏）：
❌ Virtual DOM 并不比原生 DOM 操作快
✅ 它的优势是 跨平台 + 可预测性
二、Hooks 深度篇（面试重灾区）
Q4：useState 和 useReducer 的区别？
| 场景 | 推荐 |
|---|---|
| 单一状态 | useState |
| 复杂状态逻辑 | useReducer |
| 多子值联动 | useReducer |
const [state, dispatch] = useReducer(reducer, initialState)加分点：
useReducer更接近 Redux，适合复杂状态流转。
Q5：useEffect 的清理函数什么时候执行？
✅ 标准答案：
-
组件卸载时
-
依赖项变化前
useEffect(() => {
const timer = setInterval(() => {}, 1000)
return () => clearInterval(timer)
}, [])
加分点：
清理函数防止 内存泄漏 + 重复订阅。
Q6：useMemo 和 useCallback 的区别？
| Hook | 缓存什么 |
|---|---|
| useMemo | 缓存计算结果 |
| useCallback | 缓存函数引用 |
const memoizedValue = useMemo(() => compute(a, b), [a, b])
const memoizedFn = useCallback(fn, [a])加分点：
二者都是性能优化手段，不是必选项。
三、原理 & 源码思想篇（高级面试）
Q7：React Fiber 是什么？
✅ 标准答案：
-
Fiber 是 React 的 协调引擎
-
将渲染任务拆分为 可中断的小单元
-
支持优先级调度
加分点：
Fiber 的诞生是为了解决 长时间渲染阻塞主线程 的问题。
Q8：setState 是同步还是异步？
✅ 标准答案：
-
React 18 之前：视情况（合成事件异步，原生事件同步）
-
React 18 之后：自动批处理，统一异步
setCount(c => c + 1)
加分点：
推荐使用 函数式更新，避免闭包陷阱。
Q9：React Diff 算法的核心策略？
三个假设：
-
同层比较
-
同类型节点复用
-
不同节点直接卸载重建
加分点：
O(n) 复杂度，靠的是 人为限制比较范围。
四、性能优化 & 实战篇
Q10：React 有哪些性能优化手段？
✅ 常用方案：
-
React.memo -
useMemo / useCallback -
key正确使用 -
懒加载（
React.lazy） -
虚拟化（如 react-window）
加分点：
优化前一定要 Profiler 分析，避免过早优化。
Q11：key 的作用是什么？不用 key 会怎样？
✅ 标准答案：
-
key 用于标识节点唯一性
-
帮助 Diff 算法复用 DOM
错误示例：
{list.map((item, index) => <li key={index}>...</li>)}加分点：
index 作为 key 在列表变动时会导致 不必要的 DOM 重建。
Q12：React 组件通信方式有哪些？
| 场景 | 方案 |
|---|---|
| 父子 | props |
| 跨层级 | Context |
| 全局 | Redux / Zustand |
| 状态提升 | 共同父组件 |
加分点：
小型项目用 Context，大型项目用状态管理库。
五、面试总结一句话（必背）
"React 面试的本质，不是考你记了多少 API，而是考你有没有理解 UI 是如何被描述和调度的。"
📢 写在最后
如果你正在准备 React 面试：
✅ 点赞 👍（证明你认真看了）
✅ 收藏 ⭐️（面试前复习用）
✅ 关注我 🚀（持续输出前端面试 & 原理干货）
💬 评论区互动：
你在 React 面试中被问到最难的一道题是什么？
欢迎在评论区"晒题"，我来帮你拆解！