一、Hooks 是什么（从设计动机说）
一句话：
Hooks = 用函数 + 闭包 + 链表，模拟 Class 的生命周期和实例状态
React 团队当初想解决 3 个核心痛点：
1️⃣ Class 太复杂（this、绑定、生命周期分散）
2️⃣ 逻辑复用靠 HOC / render props 太重
3️⃣ 状态逻辑和 UI 强耦合、难拆
Hooks 的目标是：
状态逻辑可组合、可复用、可预测
二、Hooks 的优点（不说废话版）
✅ 1. 逻辑复用能力极强
function useFetch() {}
function useDebounce() {}
👉 逻辑复用 ≠ 组件嵌套
✅ 2. 代码结构更贴近“业务”
对比：
// Class：生命周期割裂
componentDidMount() {}
componentDidUpdate() {}
// Hooks：逻辑聚合
useEffect(() => {
// 订阅 + 更新
}, []);
✅ 3. 更利于函数式编程 / 并发渲染
- 无实例
- 无 this
- 可中断、可重放（Concurrent Mode）
三、Hooks 的缺点（真实痛点）
❌ 1. 心智负担高（闭包陷阱）
useEffect(() => {
console.log(count);
}, []);
👉 新手 100% 会踩
❌ 2. 依赖数组极易写错
- 少了 → 用旧值
- 多了 → 无限触发
❌ 3. 不利于 OOP 场景
- 复杂对象状态
- 多态、继承
四、Hooks 的底层实现原理（重点）
1️⃣ Hooks 本质是什么？
Hooks 本质是：
在 Fiber 上挂一条“Hooks 链表”
React 内部（极简伪代码）
Fiber = {
memoizedState: hook1 -> hook2 -> hook3
}
每个 Hook 是一个节点：
hook = {
memoizedState,
queue,
next
}
2️⃣ 为什么 Hooks 不能写在 if 里？
if (flag) {
useState();
}
useEffect();
👉 因为 Hooks 是靠“调用顺序”取值的
第 1 个 useState → hook1
第 2 个 useEffect → hook2
一旦顺序变了：
链表就错位了
3️⃣ Hooks 执行流程（简化）
首次渲染（mount）
render()
→ mountState
→ mountEffect
→ 建立 hooks 链表
更新（update）
render()
→ updateState
→ updateEffect
→ 复用链表节点
五、useState 底层是怎么更新的？
const [state, setState] = useState(0);
本质结构：
hook.memoizedState = 0;
hook.queue = {
pending: update1 -> update2
};
setState 做了什么？
setState
→ 创建 update
→ 放进 queue
→ 调度 Fiber 更新
六、useEffect 的底层机制（很多人答不清）
useEffect(() => {
return () => cleanup;
}, deps);
本质三步：
1️⃣ 比较 deps（Object.is）
2️⃣ 变化 → 标记 effect
3️⃣ commit 阶段执行副作用
effect 真正执行时机
| 阶段 | 是否执行 |
|---|---|
| render | ❌ |
| commit | ✅ |
| paint 后 | ✅（异步 effect） |
七、Hooks 参数到底代表什么（核心）
1️⃣ useState(initialState)
useState(0)
| 参数 | 含义 |
|---|---|
| initialState | 初始状态（只在 mount 用一次） |
👉 支持函数：
useState(() => compute());
2️⃣ useEffect(callback, deps)
useEffect(fn, deps);
参数含义
| 参数 | 作用 |
|---|---|
| callback | 副作用函数 |
| deps | 决定是否重新执行 |
deps 三种情况（必会）
| deps | 行为 |
|---|---|
| 不传 | 每次 render |
| [] | 只执行一次 |
| [a, b] | a / b 变才执行 |
3️⃣ useMemo / useCallback
本质一样，区别是“缓存什么”
useMemo(() => value, deps); // 缓存值
useCallback(() => fn, deps); // 缓存函数
👉 缓存的是“引用稳定性”
4️⃣ useRef(initialValue)
const ref = useRef(0);
| 特点 | 说明 |
|---|---|
| 不触发渲染 | 改了也不 rerender |
| 引用稳定 | render 间不变 |
| 常见用途 | DOM / 定时器 / 上一值 |
5️⃣ useLayoutEffect vs useEffect
| 对比 | useEffect | useLayoutEffect |
|---|---|---|
| 执行时机 | paint 后 | paint 前 |
| 是否阻塞 | 否 | 是 |
| 场景 | 请求 / 订阅 | 测量 DOM |
八、Hooks 的“正确使用心法”（工程经验）
✅ 推荐
- 状态最小化
- effect 拆分
- 自定义 Hook 抽逻辑
❌ 避免
- 一个 effect 干一堆事
- 忽略 eslint 依赖警告
- 滥用 useMemo
九、Hooks vs Class，面试总结句
你可以直接这么说：
Hooks 通过 闭包 + 链表 管理状态，
解决了 Class 中逻辑分散和复用困难的问题，
但也引入了 依赖管理和闭包陷阱的心智成本。
