React Hooks 面试专题

React Hooks 面试导航：把高频问法路由到稳定原子知识，并提供回答结构、易错边界和闭卷自测；不重复维护每个 Hook 的第二份正文。

#frame #react #synthesis #evergreen

[!info] related notes

所属 MOC: React MOC, React Hooks MOC

知识总览: React Hooks

高频索引: React 高频面试题索引

状态: useState, useRef, useReducer

Effect: useEffect, useEffect vs useLayoutEffect

性能: useMemo, useCallback, React.memo

逻辑复用: 自定义 Hook

React Hooks 面试专题

这篇笔记负责什么

本页不再重新解释所有 Hooks。

它只负责：

面试问题
→ 判断真正考察的机制
→ 跳到稳定知识节点
→ 用统一结构组织回答
→ 闭卷验证是否真正掌握

知识事实以各原子页和 React Hooks 为准。

第一类：为什么需要 Hooks

典型问法：

Hooks 解决了什么问题？
Function Component 与 Class Component 有什么变化？
Custom Hook 为什么比 HOC / render props 更自然？

回答主线：

先说明要解决的是状态、副作用和逻辑复用的组织问题；
再说明 Hooks 让逻辑按“业务关注点”组合，而不是按生命周期方法拆散；
最后指出函数组件仍有闭包、依赖和 render snapshot 等自己的心智负担。

知识入口：Class vs Function Component、自定义 Hook。

第二类：为什么 Hooks 不能随便放在条件里

真正考察：

Hook identity 与调用顺序。

回答不要停在“官方规定不能这样写”。

应该说明：

render N
Hook #1
Hook #2
Hook #3

render N+1
仍然需要以稳定顺序对应相同 Hook state

如果条件分支改变调用顺序，React 无法稳定匹配状态槽位。

知识入口：React Hooks。

第三类：useState

高频问题：

为什么 setter 后立即读还是旧值？
为什么连续 +3 要用函数式更新？
对象 state 为什么要不可变更新？
什么值不应该进入 state？

知识入口：

回答时优先使用：

render snapshot
→ enqueue update
→ batching / update queue
→ next render

而不是笼统说“setState 是异步的”。

第四类：useEffect

高频问题：

useEffect 是生命周期吗？
dependencies 为什么不能乱删？
Strict Mode 为什么像执行两次？
什么情况根本不需要 Effect？
stale closure 怎么产生？

知识入口：

稳定回答模型：

Effect 用来让 React state/props 与外部系统保持同步，不是“render 后的万能代码区”。

第五类：useRef

高频问题：

useRef 和 state 的区别？
为什么修改 ref 不触发 render？
ref 除了 DOM 还有什么用？

知识入口：useRef。

回答重点：

需要跨 render 保留
但变化不应该驱动 UI
→ ref candidate

第六类：useMemo / useCallback / memo

高频问题：

为什么不要滥用？
useMemo 和 useCallback 的区别？
为什么函数/对象 props 会影响 memo？

知识入口：

回答必须先说：

优化应该建立在 render/计算/identity 的真实成本证据上，而不是看到函数就包 useCallback。

第七类：Custom Hook

高频问题：

Custom Hook 复用的是什么？
两个组件调用同一个 Hook 会共享 state 吗？
什么时候应该抽 Hook？

知识入口：自定义 Hook。

关键边界：

Custom Hook 复用逻辑，每次调用仍拥有自己的 Hook state，除非显式连接同一个外部 store/context。

一个统一答题结构

面对任何 Hook 问题，都可以按四层回答：

1. Problem
   它解决什么问题？

2. Mechanism
   React 为什么这样设计？

3. Boundary
   它和相邻 Hook / 普通 JS 的边界是什么？

4. Failure mode
   最常见误用是什么？

例如回答 useEffect：

Problem
→ 同步外部系统

Mechanism
→ commit 后根据依赖 setup/cleanup

Boundary
→ 派生值和 event logic 不应默认放 Effect

Failure
→ 错误依赖、重复 state、stale closure

不推荐的面试回答方式

只背 API

“useRef 就是拿 DOM，useMemo 就是缓存值。”

缺少机制与边界。

用“异步”解释一切

React update、Effect、Promise、Event Loop 是不同机制。

生命周期一一映射

不要把 useEffect 机械翻译成几个 class lifecycle method 的相加。

为了显得高级主动堆 memo

优化需要证据。

学习检查

闭卷完成：

用 60 秒回答“Hooks 为什么必须保持调用顺序稳定”。
不使用“异步”两个字解释 setter 后为什么读到旧 state。
给三个“不需要 useEffect”的例子。
区分 state、ref、memoized value 三者职责。
解释 useMemo/useCallback/memo 的关系，但不要把它们称为默认优化。
说明 Custom Hook 为什么不会自动共享 state。
随机抽一个 Hook，用 Problem → Mechanism → Boundary → Failure 四层回答。