## 一、为什么 React 要推出 Fiber？旧架构的根本问题 >旧架构：同步递归，无法中断 **React 15 的 Reconciler 本质是一个递归函数：** ```javascript // React 15 Stack Reconciler 伪代码 function reconcile(vnode) { const domNode = createOrUpdateDOM(vnode); // 递归处理子节点 —— 一旦开始就无法停止 vnode.children.forEach(child => { reconcile(child); // 调用栈不断压栈 }); return domNode; } ``` 问题复现：假设有一个 1000 个节点的列表更新 ```javascript // 这个更新会同步阻塞主线程 function HugeList() { const [item, setItems] = useState(Array.form({length: 1000})); return (

))}

) } ``` 浏览器每帧约 16.6ms，若 JS 占用超过这个时间，就会掉帧：主线程时间线（旧架构）： ``` |--JS 渲染 80ms（阻塞）--|--浏览器绘制--| 用户在 JS 执行期间点击按钮 → 无响应！动画在 JS 执行期间 → 卡顿！ ``` ## 二、Fiber 节点：从树到链表 ### 2.1 Fiber 节点的完整结构 React 源码中每个组件对应一个 Fiber 对象： ```javascript // packages/react-reconciler/src/ReactFiber.js（简化版） function createFiber(tag, pendingProps, key) { return { // 节点身份 tag, // 0=FunctionComponent, 1=ClassComponent, 5=HostComponent(div/span)... key, // React key type, // 'div' | MyComponent | null stateNode, // 真实 DOM 节点或类组件实例 // 链表指针 —— 这是 Fiber 与"树"的核心区别 return: null, // 指向父节点 child: null, // 指向第一个子节点 sibling: null, // 指向下一个兄弟节点 // 状态与属性 pendingProps, // 本次渲染传入的 props memoizedProps, // 上次渲染完成的 props memoizedState, // hooks 链表的头节点（函数组件） // 副作用 flags: 0, // 二进制标记：Placement=2, Update=4, Deletion=8 subtreeFlags: 0,// 子树的副作用汇总（React 18 优化） updateQueue, // 待处理的 setState 更新队列 // 优先级 lanes: 0, // 当前节点的优先级 childLanes: 0, // 子树中最高优先级 // 双缓冲 alternate: null,// 指向另一棵树中对应的 Fiber 节点 }; } ``` ### 2.2 链表结构 vs 树结构假设有这样的组件树： ```HTML

``` 旧架构（树）：必须递归遍历，回溯靠调用栈 ``` App ├── Header └── Main ├── List └── Footer ``` **Fiber（链表）：** 通过指针遍历，随时可以暂停保存当前指针 ``` App.child → Header Header.return → App Header.sibling → Main Main.child → List List.return → Main List.sibling → Footer Footer.return → Main Main.return → App ``` 对应代码验证： ``` // 可以在 React DevTools 或源码断点里看到这个结构 // 遍历 Fiber 树的工作循环（可中断版本） let workInProgress = rootFiber; while (workInProgress !== null) { // 处理当前节点 performUnitOfWork(workInProgress); // 关键：每次循环都可以检查是否需要让出主线程 if (shouldYield()) { // 保存 workInProgress 指针，下次从这里继续 break; } } function performUnitOfWork(fiber) { // 向下走：处理当前节点，返回子节点 const next = beginWork(fiber); if (next === null) { // 没有子节点，向上/向右走 completeUnitOfWork(fiber); } else { workInProgress = next; } } ``` ## 三、双缓冲机制 ### 3.1 两棵树的关系 ```javascript // React 内部维护两棵 Fiber 树 const root = { current: currentFiber, // 当前显示在屏幕上的树 // workInProgress 在内存中构建，完成后替换 current }; ``` ### 3.2 克隆与复用 ``` // 创建 workInProgress 节点时，优先复用旧节点的 alternate function createWorkInProgress(current, pendingProps) { let workInProgress = current.alternate; if (workInProgress === null) { // 第一次渲染，创建新节点 workInProgress = createFiber(current.tag, pendingProps, current.key); workInProgress.alternate = current; current.alternate = workInProgress; } else { // 后续渲染，复用节点，重置脏数据 workInProgress.pendingProps = pendingProps; workInProgress.flags = NoFlags; workInProgress.subtreeFlags = NoFlags; } // 复制不变的字段 workInProgress.type = current.type; workInProgress.stateNode = current.stateNode; // 复用真实 DOM 引用 workInProgress.memoizedState = current.memoizedState; return workInProgress; } ``` ### 3.3 切换的原子性 ```javascript // commit 阶段结束时，一行代码完成切换 function commitRoot(root) { // ... 操作完真实 DOM 后 ... // 原子切换：workInProgress 变成新的 current root.current = finishedWork; // finishedWork 就是 workInProgress 树的根 } ``` ## 四、Render 阶段：beginWork 与 completeWork ### 4.1 beginWork：自顶向下处理节点 ```javascript // 简化版 beginWork function beginWork(current, workInProgress) { switch (workInProgress.tag) { case FunctionComponent: { const Component = workInProgress.type; const props = workInProgress.pendingProps; // 执行函数组件，内部会运行所有 hooks const nextChildren = renderWithHooks(current, workInProgress, Component, props); // 对比子节点（核心 diff） reconcileChildren(current, workInProgress, nextChildren); return workInProgress.child; // 返回子节点继续向下 } case HostComponent: { // div / span 等原生节点 const nextProps = workInProgress.pendingProps; reconcileChildren(current, workInProgress, nextProps.children); return workInProgress.child; } } } ``` ### 4.2 reconcileChildren：Diff 算法给节点打标记 ```javascript function reconcileChildren(current, workInProgress, nextChildren) { if (current === null) { // 首次挂载：所有节点打 Placement 标记 workInProgress.child = mountChildFibers(workInProgress, null, nextChildren); } else { // 更新：diff 算法比对新旧子节点 workInProgress.child = reconcileChildFibers(workInProgress, current.child, nextChildren); } } // diff 的结果：给 Fiber 节点打上 flags 标记 // 新增节点：fiber.flags |= Placement (二进制 0000010) // 更新节点：fiber.flags |= Update (二进制 0000100) // 删除节点：fiber.flags |= Deletion (二进制 0001000) ``` ### 4.3 实际 Diff 场景示例 ```html // 更新前

// 更新后

``` Diff 处理过程： ```javascript // React 维护一个 key → oldFiber 的 Map const existingChildren = new Map(); existingChildren.set('a', fiberA); existingChildren.set('b', fiberB); existingChildren.set('c', fiberC); // 遍历新 children // key='b': Map 中找到 → 复用 fiberB，不打标记（原地不动就不需要移动） // key='a': Map 中找到，但 index 比上一个小 → fiberA.flags |= Placement（需要移动） // key='d': Map 中没有 → 新 Fiber，flags |= Placement（新增） // key='c': 遍历完还在 Map 里 → fiberC.flags |= Deletion（删除） ``` ### 4.4 completeWork：自底向上收集副作用 ```javascript function completeWork(current, workInProgress) { switch (workInProgress.tag) { case HostComponent: { if (current !== null && workInProgress.stateNode != null) { // 更新：比对 props 变化，生成 updatePayload const oldProps = current.memoizedProps; const newProps = workInProgress.pendingProps; const updatePayload = prepareUpdate(oldProps, newProps); // updatePayload = ['style', {color: 'red'}, 'children', 'new text'] // 把需要更新的属性存起来，commit 阶段统一操作 DOM if (updatePayload) { workInProgress.updateQueue = updatePayload; workInProgress.flags |= Update; // 打 Update 标记 } } else { // 首次挂载：创建真实 DOM 节点（但还不插入） const instance = createInstance(workInProgress.type, workInProgress.pendingProps); appendAllChildren(instance, workInProgress); // 把子 DOM 挂上去 workInProgress.stateNode = instance; // 保存 DOM 引用 } // 将子树的 flags 冒泡到父节点的 subtreeFlags // 这样 commit 阶段只需要检查 subtreeFlags 就知道子树有没有副作用 bubbleProperties(workInProgress); return null; } } } ``` ## 五、Commit 阶段：三个子阶段 ### 5.1 commitBeforeMutationEffects（DOM 变更前） ```javascript // 对应 getSnapshotBeforeUpdate 生命周期 function commitBeforeMutationEffects(root, firstEffect) { let fiber = firstEffect; while (fiber !== null) { if (fiber.flags & Snapshot) { // 类组件：调用 getSnapshotBeforeUpdate const snapshot = instance.getSnapshotBeforeUpdate(prevProps, prevState); instance.__reactInternalSnapshotBeforeUpdate = snapshot; } fiber = fiber.nextEffect; } } ``` ### 5.2 commitMutationEffects（操作真实 DOM） ```javascript function commitMutationEffects(root, finishedWork) { // 遍历有 flags 的 Fiber 节点 let fiber = finishedWork; while (fiber !== null) { const flags = fiber.flags; // 处理删除 if (flags & Deletion) { commitDeletion(root, fiber); // 内部会调用 removeChild，并且清理 ref、调用 componentWillUnmount / useEffect cleanup } // 处理插入 if (flags & Placement) { commitPlacement(fiber); // 内部：parent.appendChild(fiber.stateNode) // 或 parent.insertBefore(fiber.stateNode, before) } // 处理更新 if (flags & Update) { const updatePayload = fiber.updateQueue; // updatePayload = ['style', {color: 'red'}, 'children', 'hello'] for (let i = 0; i < updatePayload.length; i += 2) { const propKey = updatePayload[i]; const propValue = updatePayload[i + 1]; domNode[propKey] = propValue; // 直接操作 DOM } } fiber = fiber.nextEffect; } } ``` ### 5.3 commitLayoutEffects（DOM 变更后，同步执行） ```javascript function commitLayoutEffects(finishedWork) { let fiber = finishedWork; while (fiber !== null) { if (fiber.flags & Update) { if (fiber.tag === FunctionComponent) { // 执行 useLayoutEffect 的回调（此时 DOM 已更新） commitHookEffectListMount(HookLayout, fiber); // useLayoutEffect 是同步的！会阻塞浏览器绘制 } if (fiber.tag === ClassComponent) { if (current === null) { instance.componentDidMount(); // 首次挂载 } else { instance.componentDidUpdate(prevProps, prevState, snapshot); } } } // 更新 ref if (fiber.flags & Ref) { fiber.ref.current = fiber.stateNode; } fiber = fiber.nextEffect; } } ``` ### 5.4 useEffect vs useLayoutEffect 的本质区别 ```javascript // useLayoutEffect：同步，在 commitLayoutEffects 中执行 // 此时浏览器还没有绘制，会阻塞渲染 useLayoutEffect(() => { // 这里读取 DOM 尺寸是准确的，但会延迟浏览器绘制 const height = divRef.current.getBoundingClientRect().height; setHeight(height); }, []); // useEffect：异步，在浏览器绘制完成后执行（通过 MessageChannel 调度） useEffect(() => { // 不阻塞渲染，适合数据请求、订阅 fetchData().then(setData); }, []); ``` 内部调度对比： ```javascript // useLayoutEffect：commitLayoutEffects 同步调用 commitHookEffectListMount(HookLayout | HookHasEffect, fiber); // useEffect：commitRootImpl 结束后异步调度 scheduleCallback(NormalSchedulerPriority, () => { flushPassiveEffects(); // 在这里执行 useEffect }); // flushPassiveEffects 通过 MessageChannel 推迟到下一个宏任务 ``` ## 六、优先级调度：Lane 模型 ### 6.1 Lane 的二进制设计 ```javascript // packages/react-reconciler/src/ReactFiberLane.js export const NoLanes = 0b0000000000000000000000000000000; export const SyncLane = 0b0000000000000000000000000000001; // 最高优先级 export const InputContinuousLane = 0b0000000000000000000000000000100; export const DefaultLane = 0b0000000000000000000000000010000; export const TransitionLane1 = 0b0000000000000000000000001000000; export const IdleLane = 0b0100000000000000000000000000000; // 最低优先级 // 二进制操作的优势：可以用一个数字表示多个 lane 的集合 // 比如 root.pendingLanes = SyncLane | DefaultLane = 0b10001 // 判断是否包含某个 lane：(root.pendingLanes & SyncLane) !== 0 // 合并两个 lane 集合：laneA | laneB // 移除某个 lane：pendingLanes &= ~lane ``` ### 6.2 不同用户行为触发不同 Lane ```javascript // React 内部根据事件类型分配 lane function getEventPriority(domEventName) { switch (domEventName) { // 离散事件：点击、键盘 → SyncLane（最高） case 'click': case 'keydown': case 'keyup': return DiscreteEventPriority; // → SyncLane // 连续事件：滚动、鼠标移动 → InputContinuousLane case 'mousemove': case 'scroll': case 'wheel': return ContinuousEventPriority; // → InputContinuousLane default: return DefaultEventPriority; // → DefaultLane } } ``` ### 6.3 startTransition 降低优先级 ```javascript function SearchPage() { const [query, setQuery] = useState(''); const [results, setResults] = useState([]); function handleInput(e) { // 输入框更新：SyncLane（高优先级，立即响应） setQuery(e.target.value); // 搜索结果更新：TransitionLane（低优先级，可被打断） startTransition(() => { setResults(heavySearch(e.target.value)); }); } return ( <> {/* isPending 来自 useTransition，可以显示加载状态 */} ); } ``` 内部发生了什么： ```javascript // startTransition 的实现 function startTransition(scope) { const prevTransition = ReactCurrentBatchConfig.transition; // 设置 transition 标记 ReactCurrentBatchConfig.transition = {}; try { scope(); // 执行回调，内部的 setState 会读取到 transition 标记 } finally { ReactCurrentBatchConfig.transition = prevTransition; } } // setState 内部根据 transition 标记分配 lane function requestUpdateLane(fiber) { if (ReactCurrentBatchConfig.transition !== null) { // 在 transition 中 → 分配 TransitionLane return claimNextTransitionLane(); // TransitionLane1 ~ TransitionLane16 } // 否则根据当前执行上下文分配 return getCurrentPriorityLevel(); } ``` ### 6.4 高优先级打断低优先级 **时间线示例：** ``` t=0ms: 开始处理 TransitionLane 更新（搜索结果渲染） t=3ms: 用户再次输入 → 触发 SyncLane 更新 t=3ms: shouldYield() 返回 true → 暂停 TransitionLane 工作 t=3ms: 处理 SyncLane 更新（更新输入框，立即响应） t=5ms: SyncLane 处理完毕，重新从根节点开始 TransitionLane （注意：是重新开始，不是断点续传！） ``` ```javascript // workLoop 中的中断检查 function workLoopConcurrent() { while (workInProgress !== null && !shouldYield()) { performUnitOfWork(workInProgress); } } // shouldYield 检查是否有更高优先级的任务 function shouldYield() { const currentTime = getCurrentTime(); // 当前时间切片已用完（默认 5ms） if (currentTime >= deadline) { // 还有同步任务等待 → 必须让出 if (needsPaint || schedulerIsSynchronouslyRendering) { return true; } } return false; } ``` ## 七、时间切片的底层实现 ### 7.1 为什么用 MessageChannel 而不是 setTimeout ```javascript // 问题：setTimeout 最小延迟约 4ms（嵌套后），精度不够 setTimeout(() => { processNextChunk(); // 4ms 后才执行，浪费时间 }, 0); // React 的选择：MessageChannel（真正的宏任务，延迟约 0-1ms） const channel = new MessageChannel(); const port = channel.port2; channel.port1.onmessage = function() { // 在这里执行下一个时间切片的工作 performWorkUntilDeadline(); }; function scheduleNextChunk() { port.postMessage(null); // 触发宏任务，立即入队 } ``` ### 7.2 完整的调度循环 ```javascript // Scheduler 包的核心循环 function performWorkUntilDeadline() { if (scheduledHostCallback !== null) { const currentTime = getCurrentTime(); // 设置截止时间：当前时间 + 5ms（每个切片 5ms） deadline = currentTime + yieldInterval; // yieldInterval = 5 const hasMoreWork = scheduledHostCallback(true, currentTime); if (hasMoreWork) { // 还有工作，发送下一个 MessageChannel 消息 port.postMessage(null); } else { isMessageLoopRunning = false; scheduledHostCallback = null; } } } // 对应的帧时间线： // |--宏任务: React 5ms--|--浏览器处理输入/绘制--|--宏任务: React 5ms--| // ↑ shouldYield() 让出主线程 ``` ## 八、Hooks 在 Fiber 中的存储 ### 8.1 hooks 以链表形式挂在 Fiber 上 ```javascript // 函数组件的 memoizedState 是 hook 链表的头节点 function Counter() { const [count, setCount] = useState(0); // hook1 const [name, setName] = useState('Tom'); // hook2 useEffect(() => {}, [count]); // hook3 const ref = useRef(null); // hook4 } // 对应的 Fiber.memoizedState 结构： Fiber.memoizedState │ ▼ hook1 (useState) hook2 (useState) hook3 (useEffect) hook4 (useRef) { → { → { → { memoizedState: 0, memoizedState: 'Tom', memoizedState: { memoizedState: {current: null}, queue: updateQueue1, queue: updateQueue2, tag: HookHasEffect, queue: null, next: hook2 next: hook3 create: () => {}, next: null } } deps: [0], } destroy: undefined, next: hook4 }, next: hook4 } ``` ### 8.2 为什么 hooks 不能在条件语句中使用 ```javascript // 错误写法：会破坏链表顺序 function BadComponent({ show }) { const [a, setA] = useState(0); // 首次渲染：hook1 = {state: 0} if (show) { const [b, setB] = useState(''); // 首次渲染：hook2 = {state: ''} } const [c, setC] = useState(false); // 首次渲染：hook3 = {state: false} } // 第一次渲染（show=true）：链表 = [hook_a, hook_b, hook_c] // 第二次渲染（show=false）：React 按顺序读取链表 // 第1个 hook → 给 a ✓ // 第2个 hook → 本来给 b，但 if 不执行了，直接给 c ✗ 错乱！ // 第3个 hook → 多出来，报错！ ``` ## 九、完整流程串联一次 setState 的完整生命周期： ```javascript // 1. 用户触发更新 setCount(1); // 2. 创建 Update 对象，加入 Fiber 的 updateQueue const update = { lane: SyncLane, // 点击事件 → 同步优先级 action: 1, // 新 state next: null, }; enqueueUpdate(fiber, update); // 3. 向上查找 root，标记 pendingLanes markUpdateLaneFromFiberToRoot(fiber, SyncLane); // 沿途：fiber.lanes |= SyncLane // 沿途：parent.childLanes |= SyncLane（便于 bailout 优化） // 4. 调度渲染 ensureRootIsScheduled(root); // SyncLane → 同步调度（本次宏任务内完成） // 其他 lane → Scheduler 异步调度 // 5. Render 阶段（可中断） performConcurrentWorkOnRoot(root); → workLoopConcurrent() → performUnitOfWork() × N → beginWork() // 重新执行函数组件，计算新 state → completeWork() // 创建/更新 DOM 属性，打 flags // 6. Commit 阶段（不可中断） commitRoot(root); → commitBeforeMutationEffects() // getSnapshotBeforeUpdate → commitMutationEffects() // 操作真实 DOM → root.current = finishedWork // 切换双缓冲 → commitLayoutEffects() // useLayoutEffect / componentDidMount → scheduleCallback(flushPassiveEffects) // 异步调度 useEffect // 7. 浏览器绘制 // 8. 执行 useEffect 回调 ``` ## 十、开发中的 Fiber 感知 ```javascript // useDeferredValue：内部用 TransitionLane，与 startTransition 同理 function SearchPage() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); // 低优先级版本的 query return ( <> setQuery(e.target.value)} /> {/* HeavyList 接收低优先级的 deferredQuery，不阻塞输入框 */} ); } // React.memo + Fiber bailout：跳过不必要的子树渲染 const Child = React.memo(({ value }) =>

{value}

); // beginWork 中检查：如果 props 没变且 lanes 不包含当前渲染优先级 // → 直接 return null，跳过整个子树（bailout 优化） ``` **核心结论：** Fiber 的本质是把同步递归改造成可中断的链表遍历，配合双缓冲保证原子性、Lane 模型管理优先级、时间切片归还主线程，最终实现了"高优先级任务插队不影响用户体验"的 Concurrent Mode 基础。

React Fiber架构原理