Electrolux_blog常见问题
本页为速查 + 指向专题文档。原理与流程勿在此重复大段源码，请读对应章节。
1. 基础
| 问题 | 简要回答 | 延伸 |
|---|---|---|
| React 是什么？ | 用于 UI 的库：声明式、组件化、跨平台 | 01-核心架构概述 |
| Virtual DOM？ | 轻量描述树，协调后更新真实 UI；便于 diff 与跨平台 | 同上 |
| 渲染分几阶段？ | Render（可中断）→ Commit（不可中断）→ Passive 副作用 | 06-并发 |
2. Fiber
| 问题 | 简要回答 | 延伸 |
|---|---|---|
| Fiber 是什么？ | 工作单元：链表树节点 + 可中断 render 架构 | 02-Fiber架构详解 |
| 核心字段？ | child/sibling/return 树链、memoizedState/Props、flags、lanes、alternate | 02、源码 ReactFiber.js |
| 双缓冲？ | current 与 workInProgress 两棵树，alternate 互指，减少分配 | 02 §3 |
3. Reconciliation
| 问题 | 简要回答 | 延伸 |
|---|---|---|
| Diff 假设？ | 不同类型换子树；同级用 key 复用 | 03-Reconciliation |
| 为何只比同层？ | 跨层 O(n³)；实际 UI 很少跨层移动节点 | 03 |
| key 作用？ | 稳定标识列表项，避免错误复用 DOM | 见下 §10 表格 |
4. Hooks
| 问题 | 简要回答 | 延伸 |
|---|---|---|
| Hooks 是什么？ | 16.8+ 在函数组件用 state/副作用等；存于 Fiber 链表 | 04-Hooks |
| 为何顺序调用？ | 按调用顺序对齐链表槽位；19 的 use 可条件调用 | 04 §4 |
| useState 原理？ | mount 建 Hook+队列；setState 入队；update 时 reducer 合并 | 04 §5 |
| useEffect 时机？ | Render 只登记；Commit 后 Passive 异步执行 | 04 §6 |
| useMemo vs useCallback？ | 缓存值 vs 缓存函数引用 | 04 §7 |
5. 性能
| 策略 | 说明 |
|---|---|
| Fiber + Lanes + Scheduler | 可中断、按优先级调度 |
| memo / useMemo / useCallback | 减少重渲染与重计算 |
| lazy + Suspense | 代码分割 |
| 自动批处理 | 18+ 多 setState 常合并一次渲染 |
6. 并发（18+）
| 问题 | 简要回答 | 延伸 |
|---|---|---|
| 并发渲染？ | 同线程可打断 render，非多线程 | 06 |
| useTransition？ | 非紧急更新走 TransitionLanes | 06 §6、04 §9 |
| useDeferredValue？ | 延迟显示重内容，输入仍快 | 06 §6 |
7. Suspense
| 问题 | 简要回答 | 延伸 |
|---|---|---|
| 作用？ | 子树未就绪时显示 fallback | 06 |
| 原理？ | render 中 throw thenable → 边界捕获 → retryLane 重试 | 06 §4 |
8. Server Components（19 稳定）
| 问题 | 简要回答 | 延伸 |
|---|---|---|
| RSC？ | 服务端渲染组件树，Flight 下发；Client 边界水合 | 07-RSC |
| 与 SSR 区别？ | 不仅是 HTML，还有组件描述 + 更小 client bundle | 07 §3 |
9. 读源码从哪开始
ReactHooks.js→ReactFiberHooks.js（Hooks）ReactFiberWorkLoop.js（循环、调度入口）ReactFiberLane.js（优先级）Scheduler.js（时间切片）
专题路径见各章「源码位置」。
10. 裸 React 工程：Do / Don't（高频）
| 场景 | ✅ Do | ❌ Don't | 原因 |
|---|---|---|---|
| 列表 key | 稳定唯一 item.id | 随机 key、可重排列表用 index | reconciliation 错位 |
| Hooks | 仅顶层；开 eslint-plugin-react-hooks | 条件/循环里调 Hook（use 除外） | 槽位错乱 / Invalid hook call |
| 单 React 实例 | react/react-dom 版本一致；库用 peerDeps | link 出两份 React | Invalid hook call |
| Effect | 幂等 + cleanup；数据拉取用专用库 | 无清理、把 effect 当 mount 一次 | Strict Mode 双调用 |
| props → state | 单一数据源；key 重置 | useEffect 同步 props 到 state | 多渲染、闪动 |
| 异步 setState | setX(p => …) | 闭包旧值 setX(x+1) | stale closure |
精简六条：稳定 key → 顶层 Hooks → 单 React 实例 → Effect 可清理 → 少派生 state → 函数式 setState。
11.
11. 总结
遇到问题先判断属于：渲染阶段（Render/Commit）、优先级（Lanes/Transition）、订阅外部 store（Zustand 等）、还是 RSC 边界。再打开上表对应专题文档，比通读源码更高效。