React Fiber 架构的原理是什么？为什么传统的 Stack Reconciler 不够好？

传统 Stack Reconciler 的问题：

• 递归遍历虚拟 DOM 树，一旦开始无法中断
• 如果组件树很大，同步递归会阻塞主线程超过 16ms，导致页面卡顿
• 不支持任务优先级——动画/输入等交互无法优先处理

Fiber 架构核心概念：

1. Fiber 节点：每个组件对应一个 Fiber 节点，包含：

• type/key — 标识
• stateNode — 对应真实 DOM 或组件实例
• child/sibling/return — 组成链表结构的指针
• pendingProps/memoizedProps — 新旧 props
• memoizedState — 组件状态（Hooks 链表）
• effectTag — 标记副作用类型（Placement/Update/Deletion）
• expirationTime / lanes — 优先级

2. 双缓冲（Double Buffering）：

• current 树：当前屏幕上的 Fiber 树
• workInProgress 树：正在构建的 Fiber 树（完成后直接切换）

3. 增量渲染（Time Slicing）：

• 将渲染任务拆分为多个小单元（Fiber 节点）
• 每执行完一个单元，检查是否超时，若超时则让出主线程
• 使用 requestIdleCallback 或 requestAnimationFrame 的调度机制

4. 优先级调度：

Immediate → UserBlocking → Normal → Low → Idle
（动画）   （输入响应）   （默认）  （数据预取）（日志）

工作流程：

beginWork（向下DFS构建Fiber树）→ completeWork（向上收集effect list）→ commit（一次性提交DOM变更）
         ↑ 可中断，使用 deadline 控制          ↑ 不可中断，同步执行

收益：

• 高优先级任务（用户输入/动画）可打断低优先级任务（大数据渲染）
• 画面保持 60fps 流畅度
• 为 Suspense/并发模式（Concurrent Mode）奠定基础