graph TD
A[触发更新] --> B[scheduleUpdateOnFiber]
B --> C[markUpdateLaneFromFiberToRoot]
B --> D[ensureRootIsScheduled]
D --> E[performSyncWorkOnRoot]
subgraph "渲染阶段(Render Phase)"
E --> F[prepareFreshStack]
F --> G[workLoop]
G --> H[performUnitOfWork]
H --> I[beginWork]
I --> J{fiber.tag类型}
J -->|HostRoot| K1[updateHostRoot]
J -->|HostComponent| K2[updateHostComponent]
J -->|FunctionComponent| K3[updateFunctionComponent]
K1 --> L[reconcileChildren]
K2 --> L
K3 --> L
L --> M{current存在?}
M -->|是| N1[reconcileChildFibers]
M -->|否| N2[mountChildFibers]
N1 --> O{newChild类型}
O -->|文本/数字| P1[reconcileSingleTextNode]
O -->|对象| P2[reconcileSingleElement]
O -->|数组| P3[reconcileChildrenArray]
P1 --> Q1{current是否为文本节点?}
Q1 -->|是| R1[useFiber复用节点]
Q1 -->|否| R2[删除当前节点]
R1 --> R3[删除兄弟节点]
R2 --> R4[继续遍历]
R4 --> Q1
Q1 -->|无可复用| R5[创建新文本节点]
P2 --> Q2{key是否相同?}
Q2 -->|是| R6{type是否相同?}
R6 -->|是| R7[useFiber复用节点，更新props]
R6 -->|否| R8[删除所有节点]
Q2 -->|否| R9[删除当前及兄弟节点]
R9 -->R9-1[基于element，创建新的fiber对象]
P3 --> S1[构建existingChildren Map]
S1 --> S2[遍历新children]
S2 --> S3[updateFromMap处理元素]
S3 --> S4{需要移动?}
S4 -->|是| S5[标记Placement]
S4 -->|否| S6[更新lastPlacedIndex]
S2 --> S7[删除剩余旧节点]
%% completeWork流程
H --> H1[completeUnitOfWork]
H1 --> H2[completeWork]
H2 --> H3{fiber.tag类型}
H3 -->|HostComponent| H4[处理HostComponent]
H3 -->|HostRoot| H5[处理HostRoot]
H3 -->|HostText| H6[处理HostText]
H3 -->|FunctionComponent| H7[处理FunctionComponent]
H4 --> H4-1{是否有stateNode?}
H4-1 -->|否| H4-2[创建DOM节点]
H4-1 -->|是| H4-3[更新props]
H6 --> H6-1{是否有stateNode?}
H6-1 -->|否| H6-2[创建文本节点]
H6-1 -->|是| H6-3[对比更新文本]
H6-3 -->|内容不同| H6-4[标记Update]
H4 --> H8[bubbleProperties]
H5 --> H8
H6 --> H8
H7 --> H8
H8 --> H9[收集子孙节点flags]
end
subgraph "提交阶段(Commit Phase)"
T[commitRoot]
T --> V0{检查副作用}
V0 -->|有副作用| U1[beforeMutation阶段]
V0 -->|无副作用| U4[切换current树]
U1 --> U2[Mutation阶段]
U2 --> V1[commitMutationEffects]
V1 --> V2[DFS遍历Fiber树]
V2 --> V3[commitMutationEffectsOnFiber]
V3 --> V4{检查flags类型}
%% Placement分支
V4 -->|Placement| V5[commitPlacement]
V5 --> V5-1[getHostParent]
V5 --> V5-2[gethostSibling]
V5 --> V5-3[insertOrAppendPlacementNodeIntoContainer]
%% ChildDeletion分支
V4 -->|ChildDeletion| V6[commitDeletion]
V6 --> V6-1[commitNestedUnmounts]
V6-1 --> V6-2[遍历子树]
V6-2 --> V6-3{节点类型处理}
V6-3 -->|HostComponent| V6-4[解绑ref]
V6-3 -->|HostText| V6-5[记录firstHostFiber]
V6-3 -->|FunctionComponent| V6-6[处理effect]
V6 --> V6-7[removeChild移除DOM]
%% Update分支
V4 -->|Update| V7[commitUpdate]
V7 --> V7-1{节点类型}
V7-1 -->|HostText| V7-2[commitTextUpdate]
U2 --> U4
U4 --> U3[Layout阶段]
end
E --> T
