流程图

Author: djwxfdt

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "mmdc:scheduler": "npx mmdc -i ./packages/scheduler/flow.mmd -o ./packages/scheduler/images/flow.svg"
+    "mmdc:scheduler": "./script/mmdc.sh packages/scheduler/mmd"
   },
   "repository": {
     "type": "git",

packages/scheduler/README.md

@@ -2,4 +2,8 @@
 
 这是React内部使用的调度系统，核心入口函数是unstable_scheduleCallback。以下是流程图，详细的解释在代码里面看。
 
-![流程图](./images/flow.svg)
+![流程图1](./mmd/global.mmd.svg)
+
+![流程图2](./mmd/workloop.mmd.svg)
+
+![流程3](./mmd/flow.mmd.svg)

packages/scheduler/images/flow.svg

@@ -1,6 +1,8 @@
 
 graph TD;
 
+classDef someclass fill:#f96;
+
 main((入口)) --> task;
 
 task --> unstable_scheduleCallback;
@@ -13,7 +15,6 @@ push -- 如果当前不存在调度流程 --> requestHostCallback;
 
 push -- 设置了延迟时间 --> timerQueue;
 
-
 requestHostCallback --->schedulePerformWorkUntilDeadline;
 
 requestHostCallback -- 将flushWork保存到全局作为回调函数 --> flushWork;
@@ -38,7 +39,6 @@ performWorkUntilDeadline --> flushWork;
 
 performWorkUntilDeadline --将deadline设置为当前时间加yieldInterval --> deadline
 
-yieldInterval --> 5ms;
 
 isHostCallbackScheduled;
 
@@ -52,13 +52,7 @@ flushWork -- true --> isPerformingWork;
 
 flushWork -- 保存当前环境变量 --> workLoop;
 
-workLoop --> advanceTimers;
-
-advanceTimers -- 检查延迟队列 --> timerQueue;
-
-advanceTimers --取出过期任务到过期队列--> taskQueue;
-
-workLoop --> D2{检查是否满足执行条件}
+workLoop:::someclass --> D2{检查是否满足执行条件}
 
 D2 --> runTask[执行任务task];
 

packages/scheduler/flow.mmd renamed to packages/scheduler/mmd/flow.mmd

@@ -0,0 +1,21 @@
+graph TD;
+
+    g[全局变量]
+
+    var1>yieldInterval = 5ms];
+
+    var2>timerQueue:延迟任务队列];
+
+    var3>taskQueue:过期任务队列];
+
+    var4>isHostCallbackScheduled:是否正在执行调度逻辑]
+
+    var5>isHostTimeoutScheduled:是否有定时任务计时器]
+
+    g --- var1 
+    g --- var2
+    g --- var3 
+    g --- var4
+    g --- var5
+
+

packages/scheduler/mmd/flow.mmd.svg

@@ -0,0 +1,44 @@
+sequenceDiagram title: workLoop
+  participant flushWork
+  participant workLoop
+  participant advanceTimers
+  participant timerQueue
+  participant taskQueue
+
+  participant task
+
+  flushWork ->> workLoop:调用
+  loop while循环
+    workLoop -->>+advanceTimers:调用advanceTimers
+    loop while循环
+      advanceTimers ->>timerQueue:peek
+      alt 队列为空
+        advanceTimers ->> workLoop:返回
+      else 队列不为空
+        alt 最前面的任务已过期
+          advanceTimers ->>timerQueue:pop
+          advanceTimers ->>taskQueue:push
+        else 没有任务过期
+          advanceTimers ->>-workLoop: 
+        end
+      end
+    end
+
+    loop while循环  
+      workLoop ->> taskQueue:peek
+      alt 调度没被暂停
+        alt 当前已经没时间了,或者有输入绘制事件
+          workLoop ->> workLoop:跳出循环
+        else 执行需要被调度的任务回调
+          workLoop ->> +task:执行回调
+          task --> -workLoop: 返回需要链式调用的回调函数
+        end
+      end
+    end
+  end
+
+  alt 任务已经全部被执行
+    workLoop ->> workLoop: 启动定时器requestHostTimeout
+  end
+  workLoop ->> flushWork: 返回
+

packages/scheduler/mmd/global.mmd

@@ -307,7 +307,7 @@ function workLoop(hasTimeRemaining: boolean, initialTime: number) {
           currentTask.isQueued = false;
         }
         /**
-         * 如果不存在后续的任务需要执行，则弹出当前任务
+         * 弹出已被执行的任务
          */
         if (currentTask === peek(taskQueue)) {
           pop(taskQueue);