100行代碼實現(xiàn)React核心調(diào)度功能

大家好，我卡頌。

想必大家都知道React有一套基于Fiber架構(gòu)的調(diào)度系統(tǒng)。

這套調(diào)度系統(tǒng)的基本功能包括：

• 更新有不同優(yōu)先級

• 一次更新可能涉及多個組件的render，這些render可能分配到多個宏任務(wù)中執(zhí)行（即時間切片）

• 高優(yōu)先級更新會打斷進(jìn)行中的低優(yōu)先級更新

本文會用100行代碼實現(xiàn)這套調(diào)度系統(tǒng)，讓你快速了解React的調(diào)度原理。

我知道你不喜歡看大段的代碼，所以本文會以圖+代碼片段的形式講解原理。

文末有完整的在線Demo，你可以自己上手玩玩。

開整！

準(zhǔn)備工作

我們用work這一數(shù)據(jù)結(jié)構(gòu)代表一份工作，work.count代表這份工作要重復(fù)做某件事的次數(shù)。

在Demo中要重復(fù)做的事是“執(zhí)行insertItem方法，向頁面插入<span/>”：

const insertItem = (content: string) => {
  const ele = document.createElement('span');
  ele.innerText = `${content}`;
  contentBox.appendChild(ele);
};

所以，對于如下work：

const work1 = {
  count: 100
}

代表：執(zhí)行100次insertItem向頁面插入100個<span/>。

work可以類比React的一次更新，work.count類比這次更新要render的組件數(shù)量。所以Demo是對React更新流程的類比。

來實現(xiàn)第一版的調(diào)度系統(tǒng)，流程如圖：

包括三步：

1. 向workList隊列（用于保存所有work）插入work

2. schedule方法從workList中取出work，傳遞給perform

3. perform方法執(zhí)行完work的所有工作后重復(fù)步驟2

// 保存所有work的隊列
const workList: work[] = [];

// 調(diào)度
function schedule() {
  // 從隊列尾取一個work
  const curWork = workList.pop();
  
  if (curWork) {
    perform(curWork);
  }
}

// 執(zhí)行
function perform(work: Work) {
  while (work.count) {
    work.count--;
    insertItem();
  }
  schedule();
}

button.onclick = () => {
  workList.unshift({
    count: 100
  })
  schedule();
}

Scheduler

• ImmediatePriority，最高的同步優(yōu)先級

• UserBlockingPriority

• NormalPriority

• LowPriority

• IdlePriority，最低優(yōu)先級

  
  

// 將回調(diào)函數(shù)fn以LowPriority優(yōu)先級調(diào)度
scheduleCallback(LowPriority, fn)

const task1 = {
  expiration: startTime + timeout,
  callback: fn
}

startTime - 1 < startTime

用Scheduler改造Demo

// 改造前
const curWork = workList.pop();

const work1 = {
  count: 100,
  priority: NormalPriority
}

// 改造后
// 對workList排序后取priority值最小的（值越小，優(yōu)先級越高）
const curWork = workList.sort((w1, w2) => {
   return w1.priority - w2.priority;
})[0];

改造后流程的變化

const someTask = {
  callback: perform.bind(null, work),
  expiration: xxx
}

while (work.count) {
  work.count--;
  insertItem();
}

while (!needYield() && work.count) {
  work.count--;
  insertItem();
}

高優(yōu)先級打斷低優(yōu)先級的例子

• 插入一個低優(yōu)先級work，屬性如下

const work1 = {
  count: 100,
  priority: LowPriority
}

• 經(jīng)歷schedule（調(diào)度），perform（執(zhí)行），在執(zhí)行了80次工作時，突然插入一個高優(yōu)先級work，此時：

const work1 = {
  // work1已經(jīng)執(zhí)行了80次工作，還差20次執(zhí)行完
  count: 20,
  priority: LowPriority
}
// 新插入的高優(yōu)先級work
const work2 = {
  count: 100,
  priority: ImmediatePriority
}

• work1工作中斷，繼續(xù)schedule。由于work2優(yōu)先級更高，會進(jìn)入work2對應(yīng)perform，執(zhí)行100次工作

• work2執(zhí)行完后，繼續(xù)schedule，執(zhí)行work1剩余的20次工作

1. 在步驟3中，work1執(zhí)行的工作被打斷。這是微觀角度的打斷

2. 由于work1被打斷，所以繼續(xù)schedule。下一個執(zhí)行工作的是更高優(yōu)的work2。work2的到來導(dǎo)致work1被打斷，這是宏觀角度的打斷

調(diào)度系統(tǒng)的實現(xiàn)原理

總結(jié)

• schedule
• perform