【JS React】快速理解React工作流

一张图搞懂React核心工作流

关键节点

1. 状态更新 → 自动批处理 → 调度器（分优先级）。
2. Render 阶段：Fiber 树构建 → Diff → 副作用链表。
3. Commit 阶段：DOM 操作 → 同步副作用 → 浏览器渲染。
4. 异步任务队列：useEffect 回调。

//react 工作流核心节点
//  状态更新节点  
    A[状态更新] --> B[自动批处理]

// 状态结束之后进入调度节点, 调度器 Scheduler
    B --> C{调度阶段}
    C -->|高优先级| D1[立即调度]
    C -->|低优先级| D2[延迟调度]
    D1 --> E[时间切片拆分任务]
    D2 --> E
    E --> F[任务优先级队列]

// 调度结束，进入Render
    F --> G{进入 Render 阶段}
    G --> H[构建 Fiber 树]
    H --> I[Diff 算法]
    I --> J[标记副作用 flags]
    J --> K[生成副作用链表]
    K --> L{进入 Commit 阶段}

//render结束之后，进入commit阶段
   L --> M1[Before Mutation]
         M1 -->|同步清理| N1[执行 getSnapshotBeforeUpdate]
        L --> M2[Mutation]
        M2 -->|DOM 操作| N2[插入/更新/删除节点]
        L --> M3[Layout]
        M3 -->|同步执行| N3[useLayoutEffect]
        M3 --> N4[更新 refs]

//浏览器渲染
    N2 --> O[浏览器渲染流水线]
    O --> P[样式计算 → 布局 → 绘制 → 合成]
    P --> Q[异步任务队列]
    Q --> R[执行 useEffect]