一句话概括 React Fiber 的渲染分为 render（构建 workInProgress 树，可中断）和 commit（DOM 生效，不可中断）两大阶段——把”计算该改什么”和”真正去改”分离开，是可中断渲染的核心设计。 核心流程 1. 两大阶段总览 setState → scheduleUpdateOnFiber() ↓ ...

一句话概括 React 维护两棵 Fiber 树——current 树（屏幕可见）和 workInProgress 树（后台构建），通过 alternate 指针复用节点，commit 阶段交换指针完成页面切换——这保证了用户永远看不到”渲染到一半”的残缺 UI。 核心知识点 1. 两棵树的角色 // 渲染前 root.current → currentTree (屏幕上显示的 UI...

一句话概括 React 18 的 Lane 优先级模型用 32 位二进制位掩码表示更新任务的紧急程度——SyncLane（点击输入）的更新可以打断 TransitionLane（过渡渲染），而饥饿保护确保低优先级任务最终一定会执行。 核心知识点 1. Lane：32 位 = 32 条优先级车道 const SyncLane = 0b000000000000000...

一句话概括 时间切片（Time Slicing）把一个长耗时的渲染任务切成一串 5ms 的小片段，利用浏览器帧空闲逐步执行——这保证了即便页面里有 10000 个元素在渲染，用户的点击和滚动也不会被阻塞。 核心知识点 1. 为什么不能一口气渲染完 浏览器 60fps → 每帧只有 16.6ms。如果 React sync 渲染耗时 100ms，就占用了 6 帧——这段时间用户输入全部...

一句话概括 React Fiber 是一套基于链表结构的可中断协调引擎，它将递归渲染拆解为可暂停、可优先级的异步工作单元，使 React 能在长渲染任务中主动让出主线程——这是 React 15 到 React 18 最根本的架构升级。 核心知识点 1. 递归 → 链表：为何 Fiber React 15 的 Stack Reconciler 使用递归调用栈做 Diff——递归不可中...

一句话概括 通过写一套约 150 行的手写 Hooks 运行时——包含链表存储、mount/update 双阶段、批量更新队列和 useEffect 依赖比较——把 React Hooks 从”黑盒”变成”透明的数据结构操作”。 核心知识点 1. 数据模型：Fiber + Hook 链表 + 双阶段 // 全局变量 let workInProgressFiber = null; ...

一句话概括 React Hooks 两条黄金规则——”只在顶层调用”和”只在 React 函数中调用”——不是拍脑袋的编码建议，而是 memoizedState 链表实现导致的必然约束：任何违规都会让状态指针错位，后续所有 Hook 全乱。 核心知识点 1. 规则一：顶层调用——根源在链表 每次渲染时 updateWorkInProgressHook 做一件事：currentHook...

一句话概括 React Hooks 的底层不是魔法，而是一条挂在 fiber.memoizedState 上的单向链表——每个 Hook 通过 next 指针串联，渲染时按调用顺序遍历链表读取状态。一旦条件执行破坏顺序，链表索引错位，所有状态全崩。 核心知识点 1. Hook 链表长什么样 每个组件 fiber 上的 memoizedState 不是存 state 值，而是指向一条 ...

一句话概括 useEffect 是 React 声明式副作用管理的核心——把副作用函数和依赖数组挂在 Fiber 的 effect 链表上，在渲染提交后异步执行、commit 前通过依赖比对（Object.is）跳过无关更新、并在下次 effect 执行前或组件卸载时自动清理（cleanup）。 核心知识点 1. useEffect 的执行时机 渲染阶段（render） → 提交阶段...

一句话概括 useState 是 React 函数组件的状态基石——把状态存在 Fiber 节点的单向链表（memoizedState）上，通过环形链表（updateQueue）管理更新，dispatch 触发后走调度→协调→渲染链路完成状态刷新。本质上 useState 就是 useReducer 的语法糖。 核心知识点 1. Hooks 存在哪？Fiber 的 memoizedSt...