从 Event Loop 到 React 调度机制

一、事件循环的整体架构（The Big Picture）

1. Call Stack（调用栈）：主线程，执行所有同步代码（LIFO）。

2. Web APIs / C++ Bindings：浏览器提供的能力（定时器、Fetch、DOM 事件等），在后台运行，不阻塞主线程。

3. Queues（任务队列）：存放“未来要执行”的回调函数。

4. Event Loop（事件循环）：调度器，决定下一步该执行谁。

架构示意图

┌───────────────────────────┐      ┌───────────────────────────┐
│  JavaScript Engine (V8)   │      │      Browser Web APIs     │
│                           │      │                           │
│  ┌─────────────────────┐  │      │  ┌──────────┐ ┌────────┐  │
│  │     Call Stack      │  │      │  │DOM Events│ │  Fetch │  │
│  │ (Main Thread/LIFO)  │  │      │  └──────────┘ └────────┘  │
│  │ [ Sync Code Exec ]  │◀─┼─────┼──│ setTimeout / Interval  │  │
│  └──────────┬──────────┘  │      │  └──────────────┬─────────┘  │
└─────────────┼─────────────┘      └─────────────────┼────────────┘
              │                                      │ (Complete)
              ▼                                      ▼
     ┌──────────────────┐               ┌─────────────────────────┐
     │    Event Loop    │ ◀──────────── │     Task Queues         │
     └─────────┬────────┘               └─────────────────────────┘
               │
               ▼

二、三类关键队列与执行优先级

1️⃣ 微任务队列（Microtask Queue）—— VIP 通道

• 优先级：最高

• 规则：
• 主线程一空，必须清空整个微任务队列
• 执行微任务时新产生的微任务，会立即插队继续执行

• 典型成员：
• Promise.then / catch / finally
• queueMicrotask
• MutationObserver

• 风险：无限微任务 = 页面直接卡死

• React 关联：状态更新批处理、调度优化的关键基础

2️⃣ 动画帧队列（Animation Frame Queue）—— 渲染前的最后机会

• 优先级：中等（仅发生在浏览器准备渲染时）

• 特性：
• 每一帧（约 16.6ms）最多执行一次
• 执行时机在 Paint 之前

• 典型成员：
• requestAnimationFrame (rAF)

3️⃣ 宏任务队列（Macrotask Queue）—— 普通通道

• 优先级：最低

• 规则：
• 每一次事件循环 只执行一个宏任务

• 典型成员：
• setTimeout / setInterval
• DOM 事件回调（click / scroll）
• I/O、MessageChannel

三、事件循环的完整执行流程

       START
         │
         ▼
┌───────────────────┐
│ 1. Run Script     │  同步代码执行
└────────┬──────────┘
         │
         ▼
┌───────────────────┐
│ 2. Microtasks     │  清空所有微任务（包括新增的）
└────────┬──────────┘
         │
         ▼
┌───────────────────┐
│ 3. Need Render?   │  是否达到刷新节奏（≈60Hz）
└────────┬──────────┘
    Yes  │   No
    ▼    │
┌───────────────────┐
│ 4. rAF Callbacks  │  requestAnimationFrame
└────────┬──────────┘
         │
     ┌───▼───┐
     │ Paint │  样式 / 布局 / 绘制
     └───┬───┘
         │
         ▼
┌───────────────────┐
│ 5. Macrotask      │  只执行一个宏任务
└────────┬──────────┘
         │
         └──── Loop Back

微任务不清空，浏览器绝不渲染；宏任务一次只跑一个。

四、代码实战：一次看懂所有队列

console.log('1. Script Start');

setTimeout(() => {
  console.log('2. setTimeout (Macro)');
}, 0);

requestAnimationFrame(() => {
  console.log('3. rAF (Animation)');
});

Promise.resolve()
  .then(() => {
    console.log('4. Promise (Micro 1)');
  })
  .then(() => {
    console.log('5. Promise (Micro 2)');
  });

console.log('6. Script End');

执行顺序解析

1. 同步阶段：1 → 6

2. 微任务阶段：4 → 5

3. 渲染阶段：3（如果本帧需要渲染）

4. 宏任务阶段：2

1 → 6 → 4 → 5 → 3 → 2

注：rAF 与 setTimeout 的先后可能受刷新节奏影响，但 微任务永远最先执行。

五、React 为什么要这样设计？

React 各阶段与事件循环的映射

• Render 阶段：
• 同步执行
• 构建 Virtual DOM

• Commit 阶段：
• 同步更新真实 DOM

• 状态更新调度：
• 借助 微任务 实现批处理

• useEffect：
• 发生在渲染完成之后
• 不阻塞 Paint，避免卡顿

useEffectEvent 的“穿透”原理

• Effect 执行时：
• 渲染早已完成
• 微任务队列已清空

• React 内部的 ref.current 已指向最新闭包

六、总结速查表