flowchart TD
%% 设置样式
classDef default fill:#f0f8ff,stroke:#333,stroke-width:1px
classDef phase fill:#e6ffe6,stroke:#333,stroke-width:1px
classDef commit fill:#ffe6e6,stroke:#333,stroke-width:1px
classDef error fill:#ffe6e6,stroke:red,stroke-width:2px
%% 初始阶段
Start([开始]) --> Update[触发更新<br><font size=2>useState/setState/forceUpdate<br>创建update对象<br>标记updateLane优先级</font>]
Update --> Priority{判断优先级<br><font size=2>concurrent/sync/batch模式<br>确定调度优先级</font>}
Priority --> Schedule[创建调度任务<br><font size=2>ensureRootIsScheduled<br>注册调度优先级</font>]
Schedule --> A[开始调度<br><font size=2>performConcurrentWorkOnRoot</font>]:::phase
%% 调度循环
A --> B{空闲时间检查<br><font size=2>shouldYield检查<br>时间片控制</font>}
B -- 有空闲时间 --> C[处理Fiber节点<br><font size=2>beginWork<br>创建/更新子Fiber</font>]:::phase
B -- 需要让出 --> G[等待下次回调<br><font size=2>scheduler.scheduleCallback</font>]
%% Fiber处理
C --> Process{处理类型<br><font size=2>workInProgress.tag</font>}
Process -- 初次渲染 --> Mount[创建节点<br><font size=2>mountChildFibers<br>创建DOM节点</font>]:::phase
Process -- 更新 --> Update2[更新处理<br><font size=2>reconcileChildFibers<br>diff算法对比</font>]:::phase
Process -- 删除 --> Delete[删除处理<br><font size=2>标记Deletion<br>解绑ref</font>]:::phase
%% 遍历逻辑
Mount & Update2 & Delete --> Traverse{遍历方向<br><font size=2>深度优先搜索</font>}
Traverse -- 有子节点 --> Child[处理子节点<br><font size=2>child指针</font>]
Traverse -- 无子有兄弟 --> Sibling[处理兄弟节点<br><font size=2>sibling指针</font>]
Traverse -- 完成当前分支 --> Return[返回父节点<br><font size=2>return指针</font>]
Child & Sibling & Return --> D[更新工作单元<br><font size=2>设置nextUnitOfWork</font>]
%% 时间切片控制
D --> E{时间检查<br><font size=2>5ms切片检查</font>}
E -- 继续 --> C
E -- 中断 --> F[保存状态<br><font size=2>保存上下文</font>]
F --> G
G --> H{任务完成检查}
H -- 未完成 --> B
H -- 已完成 --> Complete[完成构建<br><font size=2>finishConcurrentRender</font>]:::phase
%% 错误处理
Complete --> ErrorCheck{错误检查}:::error
ErrorCheck -- 有错误 --> ErrorHandle[错误处理<br><font size=2>错误边界处理<br>getDerivedStateFromError</font>]:::error
ErrorCheck -- 无错误 --> I[进入Commit<br><font size=2>commitRoot</font>]:::commit
ErrorHandle --> I
%% Commit阶段
I --> Before[Before Mutation<br><font size=2>getSnapshotBeforeUpdate<br>调度useEffect清理</font>]:::commit
Before --> Mutation[Mutation阶段<br><font size=2>DOM操作<br>更新ref</font>]:::commit
Mutation --> Layout[Layout阶段<br><font size=2>生命周期调用<br>useLayoutEffect</font>]:::commit
Layout --> Effects[调度Effects<br><font size=2>异步调度useEffect</font>]:::commit
Effects --> K([结束])
%% Hooks更新
Update --> HookUpdate[Hook更新<br><font size=2>创建update队列<br>触发重新渲染</font>]
HookUpdate --> Priority
%% 错误捕获
C --> ErrorBoundary{错误捕获}:::error
ErrorBoundary -- 出错 --> ErrorCapture[错误收集<br><font size=2>创建错误更新</font>]:::error
ErrorCapture --> F
ErrorBoundary -- 正常 --> Process
