面了这么多次，第一次被后端追着问 React 八股

2026-09-16 · 杭州星庆文化 · AI 全栈偏前端
心态：答不好就当复习；工作里天天写 Hooks，不等于能把原理讲顺。

今天这场有点懵。

不是项目讲不清——RAG 链路、SSE、页面不直连模型，这些准备过。懵的是：对面像是后端的面试官，上来一串 React 基础概念。面了这么多次，这种「从虚拟 DOM 一路问到 Hook」的排法第一次遇到；日常业务里也确实很少有人当面考你「class 生命周期有哪些」。

既然问到了，答不好就在这儿过一遍。下面按今天被问的顺序记。

1. React 的核心思想是什么？

一句话：用声明式 UI + 组件化，把「状态变化」映射成界面。

再拆开三点就够面试：

声明式：你描述「现在应该长什么样」，而不是一步步操作 DOM。
组件化：UI 拆成可复用、可组合的单元，数据向下、事件向上。
单向数据流：状态变了 → 重新计算 UI → 再高效落到真实 DOM（中间隔着虚拟 DOM / Fiber）。

别背成「React 就是虚拟 DOM」。虚拟 DOM 是实现手段，核心是 state → UI 这条心智模型。

2. 虚拟 DOM 和 JS DOM 有什么区别？

	真实 DOM（浏览器 DOM）	虚拟 DOM（Virtual DOM）
是什么	浏览器里真实的节点树，改它会触发布局、绘制	JS 对象树，描述「UI 应该长啥样」
成本	读写、增删都相对贵	创建、对比都是普通对象运算，便宜
谁在用	浏览器渲染引擎	React（以及 Vue 等）内部协调用

为什么要它？
不是因为「虚拟 DOM 一定比直接改 DOM 快」。批量、频繁的 UI 更新时，先在内存里算差异，再 最小代价 去动真实 DOM，通常更稳；同时让你可以用声明式写 UI，不用手写一堆 appendChild。

面试可补一句：React 16+ 真正调度的是 Fiber，虚拟 DOM 是描述层，Fiber 负责可中断的更新。

3. Diff 算法（协调）在干什么？

Diff 要解决的是：新旧两棵树，哪些节点要增、删、改、移。

React 不会做「任意两棵树完全对比」（那是 O(n³)）。它有几条启发式假设，把复杂度压到近似 O(n)：

不同类型直接换：<div> 变 <span>，整棵子树拆掉重建，不做细比。
同层比、不跨层：默认只和同层级节点比，不做「从深层挪到另一支」的智能搬迁。
列表靠 key：同级多节点时，用稳定唯一的 key 识别「是同一个」，才能正确复用、减少错位更新。

业务里最常踩的就是 列表 key：用 index 当 key，插入/删除时容易错复用组件状态。

讲到这儿可以收口：Diff 产出的是「要改哪些真实 DOM」，后面交给 commit 阶段真正改浏览器。

4. Class 组件和函数式组件有什么区别？

	Class 组件	函数式组件
写法	`class X extends React.Component`	`function X(props)` / 箭头函数
状态	`this.state` + `setState`	`useState` / `useReducer`
副作用	生命周期方法	`useEffect` / `useLayoutEffect` 等
实例	有 `this`，方法要绑或箭头函数	无实例，每次渲染就是一次函数调用
现状	遗留代码、错误边界等少数场景仍见	新代码默认写法

补充两点就够：

函数组件 + Hooks 不是「没有生命周期」，而是用 Hooks 表达「同步到渲染 / 订阅副作用」等意图。
Class 里常踩 this 指向、生命周期拆太碎；Hooks 要小心闭包陈旧值和依赖数组。

今天日常业务几乎全是函数组件，被突然问 Class，生疏很正常——但概念还是要能对上。

5. 类组件的生命周期（常考版）

按挂载 → 更新 → 卸载记三轮即可。

挂载

constructor：初始化 state、绑方法（少用副作用）
static getDerivedStateFromProps：少用，由 props 推导 state
render
componentDidMount：请求、订阅、DOM 测量

更新（props / state / forceUpdate）

getDerivedStateFromProps
shouldComponentUpdate：性能优化，返回 false 可跳过渲染
render
getSnapshotBeforeUpdate：DOM 更新前读布局（少用）
componentDidUpdate：依赖「更新后」的副作用（注意别死循环 setState）

卸载

componentWillUnmount：清定时器、取消订阅、Abort 请求

废弃/少提：componentWillMount / WillReceiveProps / WillUpdate 在严格模式和并发下有问题，新代码别提当方案。

和 Hooks 对照记更不容易忘：

Class	Hooks 大致对应
`componentDidMount` + `DidUpdate`	`useEffect(() => { ... }, [deps])`
仅挂载一次	`useEffect(() => { ... }, [])`
`componentWillUnmount`	`useEffect` 的 return 清理函数

6. 受控组件 vs 非受控组件

都是表单场景里的概念。

受控（Controlled）
表单值由 React state 驱动：value={x} + onChange 改 state。单一数据源在 React，校验、联动、提交前改值都方便。中后台大表单基本这路。

非受控（Uncontrolled）
值主要待在 DOM 里，用 defaultValue / ref（inputRef.current.value）在需要时读取。写起来少，但和 React 其它状态不好同步。

	受控	非受控
数据在哪	React state	DOM
典型写法	`value` + `onChange`	`defaultValue` + `ref`
适合	校验、联动、实时反馈	简单表单、文件选择、和第三方 DOM 库集成

文件上传的 <input type="file"> 通常是非受控（不能用 value 随意写文件路径）。

7. Hook 是什么？

Hook 是让函数组件「挂钩」上状态和副作用等 React 能力的 API。

常见几个：

useState：局部状态
useEffect：副作用（请求、订阅、改标题）
useContext：读 Context
useRef：可变盒子 / DOM 引用（改它不触发渲染）
useMemo / useCallback：缓存计算结果 / 函数引用（别默认全包）
自定义 Hook：把可复用逻辑抽成 useXxx

规则（必背）：

只在 React 函数组件或自定义 Hook 顶层调用（不在循环、条件、嵌套函数里）
只在 React 能跟踪到的函数里调用（不是普通 JS 函数随便调）

规则本质是：Hooks 靠 每次渲染相同的调用顺序 把「第 n 个 Hook」对上内部链表。顺序乱了，状态就串了。

写在最后

这场不是「没做过 React」，是 表达层生锈：线上写的是业务和工程问题（SSR/SEO、大表单、BFF、流式 UI），很少被要求从「虚拟 DOM → Diff → Class 生命周期」整串背一遍。

后端同事按教材清单来问，完全合理；我这边答得磕绊，也合理。补完上面七条，下次至少能：

先给结论，再补一张对比表；
主动把 Class 生命周期映射到 Hooks；
承认日常多用函数组件，但原理能讲清。

React 基础这篇当复盘存档，下次再被「从原理问起」，至少不会懵第二次。