第2章 React 核心概念与 JSX 高频问答
本章聚焦面试中最高频的三大 React 核心概念：虚拟 DOM、JSX 原理、事件机制。我们将逐题拆解考察意图，提供可复用的结构化回答框架，并给出可直接套用的示例话术。掌握本章内容，你将具备面试官视角的答题思路，轻松应对核心概念类追问。
核心原则：回答 React 概念题遵循 "定义 → 原理 → 优势" 三层递进结构，先说 What 再说 How 最后说 Why，体现技术深度与系统性思维。
Q1：请解释 React 虚拟 DOM 的工作原理及其核心优势
🎯 面试官考察点：
- 是否理解虚拟 DOM 的本质是内存中的对象树
- 是否清晰描述 Diff 算法 + 批量更新的流程
- 能否区分"减少 DOM 操作"与"比真实 DOM 快"的表述差异
📐 回答框架：
- 定义：虚拟 DOM 是真实 DOM 的轻量级 JS 对象映射
- 流程：状态变更 → 构建新虚拟 DOM → Diff 对比 → 计算最小更新 → 批量操作真实 DOM
- 优势：减少直接 DOM 操作次数、提供跨平台抽象层、开发体验更声明式
💬 示例回答：
虚拟 DOM 是 React 在内存中维护的轻量级 DOM 树副本。当状态变更时，React 通过 Diff 算法对比新旧虚拟 DOM，计算出最小更新操作集，批量执行真实 DOM 更新。核心优势并非"快"，而是减少了直接 DOM 操作的次数与复杂度，同时提供了跨平台渲染能力。
🔍 可能追问：
- Diff 算法的具体策略是什么？
- 为什么列表渲染需要 key？
- 虚拟 DOM 与 Vue 的响应式系统有何区别？
避坑提醒：避免说"虚拟 DOM 比真实 DOM 操作快"，正确的表述是"虚拟 DOM 减少了不必要的 DOM 操作次数"，同时要强调跨平台抽象价值。
Q2：JSX 是什么？它是如何被浏览器识别和执行的？
🎯 面试官考察点：
- 是否清楚 JSX 是语法糖而非模板引擎
- 是否了解 Babel 编译与 React.createElement 的转换关系
- 能否指出 JSX 与 HTML/模板语法的关键差异
📐 回答框架：
- 定义：JSX 是 JS 的语法扩展，用于描述 UI 结构
- 转换：Babel 编译为 React.createElement 调用，返回虚拟 DOM 对象
- 本质：JS 表达式，支持任意 JS 表达式嵌入，但不是模板语言
- 规则：属性驼峰命名、class 写为 className、只能使用表达式
💬 示例回答：
JSX 是 React 的语法扩展，经 Babel 编译转为 React.createElement 调用，最终生成虚拟 DOM 对象。它是 JS 语法糖，而非模板引擎，因此支持任意 JS 表达式。使用时需注意：只能用表达式不能用语句，属性名采用驼峰命名，class 需写为 className。
🔍 可能追问：
- Babel 编译 JSX 的具体插件是什么？
- 为什么 JSX 中不能使用 if/else？
- React.createElement 的参数分别代表什么？
避坑提醒：切勿将 JSX 描述为"模板引擎"或"HTML 在 JS 中"；要强调它是 JS 表达式，经过编译后成为 createElement 调用链。另外要主动提到属性命名差异，体现工程细节。
Q3：解释 React 的事件机制，它与原生 DOM 事件有何区别？
🎯 面试官考察点：
- 是否理解合成事件（SyntheticEvent）的设计意图
- 是否清楚事件委托到根节点的原理
- 是否了解事件对象池回收机制及 persist() 的使用场景
📐 回答框架：
- 概念：合成事件是 React 对浏览器原生事件的跨浏览器封装
- 委托机制：所有事件绑定在根节点（React 17+ 为 root），统一分发
- 优势：跨浏览器兼容、自动事件对象池回收减少 GC、与组件生命周期解耦
- 注意：异步访问事件属性需调用 persist() 释放对象池
💬 示例回答：
React 通过合成事件 SyntheticEvent 封装原生事件，并将所有事件委托到根节点统一管理。这带来了跨浏览器兼容、自动事件对象池回收、与组件生命周期解耦等优势。需注意：异步回调中访问事件属性需手动调用 persist()，否则对象会被回收复用。
🔍 可能追问：
- React 17 和 React 16 的事件挂载节点有何变化？
- 如何混合使用原生事件和合成事件？
- 事件池回收机制的具体实现原理？
避坑提醒：不要只回答"事件委托"三个字，要讲清楚 委托到哪个节点（React 17 为 root）以及 为什么需要事件池（减少对象创建，提升性能）。同时强调合成事件不是原生事件的替代，而是兼容层。
面试官追问路径 · 由浅入深