摘要：函數(shù)主要執(zhí)行兩個(gè)操作，一個(gè)是判斷當(dāng)前是否還有任務(wù)，如果沒有，則從鏈中移除。

React Fiber源碼分析 第一篇
React Fiber源碼分析 第二篇（同步模式）
React Fiber源碼分析 第三篇（異步狀態(tài)）
React Fiber源碼分析 第四篇（歸納總結(jié)）

React Fiber是React在V16版本中的大更新，利用了閑余時(shí)間看了一些源碼，做個(gè)小記錄~
如果有錯(cuò)誤,請(qǐng)輕噴

1.scheduleRootUpdate這個(gè)函數(shù)主要執(zhí)行了兩個(gè)操作 1個(gè)是創(chuàng)建更新createUpdate并放到更新隊(duì)列enqueueUpdate， 1個(gè)是執(zhí)行sheculeWork函數(shù)

function scheduleRootUpdate(current$$1, element, expirationTime, callback) {
var update = createUpdate(expirationTime);
  update.payload = { element: element };

  callback = callback === undefined ? null : callback;
  if (callback !== null) {
    update.callback = callback;
  }
  enqueueUpdate(current$$1, update);

  scheduleWork(current$$1, expirationTime);
  return expirationTime;
}

2.先從createUpdate函數(shù)分析， 他直接返回了一個(gè)包含了更新信息的對(duì)象

function createUpdate(expirationTime) {
  return {
    // 優(yōu)先級(jí)
    expirationTime: expirationTime,
    // 更新類型
    tag: UpdateState,
    // 更新的對(duì)象
    payload: null,
    callback: null,
    // 指向下一個(gè)更新
    next: null,
    // 指向下一個(gè)更新effect
    nextEffect: null
  };
}

3.接著更新payload和callback屬性， payload即為更新的對(duì)象， 然后執(zhí)行enqueuUpdate， enqueueUpdate相對(duì)比較容易理解， 不過里面有一注釋挺重要

Both queues are non-empty. The last update is the same in both lists, because of structural sharing. So, only append to one of the lists 意思是alternate的updateQueue和fiber的updateQueue是同一個(gè)對(duì)象引用，這里會(huì)在createWorkInProcess提到

往下走就是重要的scheduleWork, 它是render階段真正的開始

function scheduleWork(fiber, expirationTime) {
  // 更新優(yōu)先級(jí)
  var root = scheduleWorkToRoot(fiber, expirationTime);
  ...if (!isWorking && nextRenderExpirationTime !== NoWork && expirationTime < nextRenderExpirationTime) {
    // This is an interruption. (Used for performance tracking.) 如果這是一個(gè)打斷原有更新的任務(wù)， 先把現(xiàn)有任務(wù)記錄
    interruptedBy = fiber;
    resetStack();
  }
  // 設(shè)置下一個(gè)操作時(shí)間nextExpirationTimeToWorkOn
  markPendingPriorityLevel(root, expirationTime);
  if (
  // If we"re in the render phase, we don"t need to schedule this root
  // for an update, because we"ll do it before we exit...
  !isWorking || isCommitting$1 ||
  // ...unless this is a different root than the one we"re rendering.
  nextRoot !== root) {
    var rootExpirationTime = root.expirationTime;
    requestWork(root, rootExpirationTime);
  }
  ...
}

4.scheduleWork先執(zhí)行一個(gè)scheduleWorkToRoot函數(shù)， 該函數(shù)主要是更新其expirationTime以及上層fiber的childrenExpirationTime

function scheduleWorkToRoot(fiber, expirationTime) {
  // Update the source fiber"s expiration time
  if (fiber.expirationTime === NoWork || fiber.expirationTime > expirationTime) {
    fiber.expirationTime = expirationTime;
  }
  var alternate = fiber.alternate;
  if (alternate !== null && (alternate.expirationTime === NoWork || alternate.expirationTime > expirationTime)) {
    alternate.expirationTime = expirationTime;
  }
  // 如果是HostRoot 即直接返回
  var node = fiber.return;
  if (node === null && fiber.tag === HostRoot) {
    return fiber.stateNode;
  }
  // 若子fiber中有更新， 即更新其childrenExpirationTime
  while (node !== null) {
    ...
  }
  return null;
}

5.接著會(huì)執(zhí)行一個(gè)markPendingPriorityLevel函數(shù)，這個(gè)函數(shù)主要是更新root的最高優(yōu)先級(jí)和最低優(yōu)先級(jí)（earliestPendingTime和lastestPendingTime;）, 同時(shí)設(shè)置下一個(gè)執(zhí)行操作的時(shí)間nextExpirationTimeToWorkOn（即root中具有最高優(yōu)先級(jí)的fiber的expirationTime），關(guān)于這個(gè)函數(shù)的latestSuspendedTime;以后再說

最后scheduleWork會(huì)執(zhí)行requestWork

function requestWork(root, expirationTime) {
  addRootToSchedule(root, expirationTime);
  if (isRendering) {
    // rendering狀態(tài)，直接返回
    return;
  }

  if (isBatchingUpdates) {
    // isBatchingUpdates， 直接返回。 react的state更新是會(huì)合并的
    ...return;
  }

  // TODO: Get rid of Sync and use current time?
  if (expirationTime === Sync) {
    // 執(zhí)行同步
    performSyncWork();
  } else {
    // 異步， 暫不分析
    scheduleCallbackWithExpirationTime(root, expirationTime);
  }
}

6.requestWork 會(huì)先執(zhí)行addRootToSchedule，由函數(shù)名稱可知其作用，將root加到schedule, 即設(shè)置firstScheduledRoot， lastScheduledRoot以及他們的nextScheduleRoot屬性，說白了就是一個(gè)閉環(huán)鏈?zhǔn)浇Y(jié)構(gòu) first => next => next => last(next => first), 同時(shí)更新root的expirationTime屬性

function addRootToSchedule(root, expirationTime) {
   // root尚未開始過任務(wù) 將root加到schedule
  if (root.nextScheduledRoot === null) {
    ...
  } else {
    // root已經(jīng)開始執(zhí)行過任務(wù)， 更新root的expirationTime
    var remainingExpirationTime = root.expirationTime;
    if (remainingExpirationTime === NoWork || expirationTime < remainingExpirationTime) {
      root.expirationTime = expirationTime;
    }
  }
}

7.接著requestWork會(huì)判斷是否正在渲染中，防止重入。剩余的工作將安排在當(dāng)前渲染批次的末尾，如果正在渲染直接返回后， 因?yàn)橐呀?jīng)把root加上到Schedule里面了，依然會(huì)把該root執(zhí)行
同時(shí)判斷是否正在batch update， 這里留到分析setState的時(shí)候說， 最后根據(jù)異步或者同步執(zhí)行不同函數(shù)， 此處執(zhí)行同步performSyncWork()，performSyncWork直接執(zhí)行performWork(Sync, null);

function performWork(minExpirationTime, dl) {
  deadline = dl;
  // 找出優(yōu)先級(jí)最高的root
  findHighestPriorityRoot();

  if (deadline !== null) {
    // ...異步
  } else {
    // 循環(huán)執(zhí)行root任務(wù)
    while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && (minExpirationTime === NoWork || minExpirationTime >= nextFlushedExpirationTime)) {
      performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime, true);
      findHighestPriorityRoot();
    }
  }
  ...
  // If there"s work left over, schedule a new callback.
  if (nextFlushedExpirationTime !== NoWork) {
    scheduleCallbackWithExpirationTime(nextFlushedRoot, nextFlushedExpirationTime);
  }
　...
}

8.performWork首先執(zhí)行findHighestPriorityRoot函數(shù)。findHighestPriorityRoot函數(shù)主要執(zhí)行兩個(gè)操作， 一個(gè)是判斷當(dāng)前root是否還有任務(wù)，如果沒有， 則從firstScheuleRoot鏈中移除。 一個(gè)是找出優(yōu)先級(jí)最高的root和其對(duì)應(yīng)的優(yōu)先級(jí)并賦值給
nextFlushedRootnextFlushedExpirationTime

function findHighestPriorityRoot() {
  var highestPriorityWork = NoWork;
  var highestPriorityRoot = null;
  if (lastScheduledRoot !== null) {
    var previousScheduledRoot = lastScheduledRoot;
    var root = firstScheduledRoot;
    while (root !== null) {
      var remainingExpirationTime = root.expirationTime;
      if (remainingExpirationTime === NoWork) {
         // 判斷是否還有任務(wù)并移除
      } else {
         // 找出最高的優(yōu)先級(jí)root和其對(duì)應(yīng)的優(yōu)先級(jí)
      }
    }
  }
  // 賦值
  nextFlushedRoot = highestPriorityRoot;
  nextFlushedExpirationTime = highestPriorityWork;
}

9.緊著， performWork會(huì)根據(jù)傳入的參數(shù)dl來判斷進(jìn)行同步或者異步操作， 這里暫不討論異步，

while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && (minExpirationTime === NoWork || minExpirationTime >= nextFlushedExpirationTime)) {
      performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime, true);
      findHighestPriorityRoot();
    }

10.接著， 會(huì)進(jìn)行performWorkOnRoot函數(shù)， 并傳入優(yōu)先級(jí)最高的root和其對(duì)應(yīng)的expirationTime以及一個(gè)true作為參數(shù)，performWorkOnRoot函數(shù)的第三個(gè)參數(shù)isExpired主要是用來判斷是否已超過執(zhí)行時(shí)間， 由于進(jìn)行的是同步操作， 所以默認(rèn)超過
performWorkOnRoot函數(shù)會(huì)先將rendering狀態(tài)設(shè)為true, 然后判斷是否異步或者超時(shí)進(jìn)行操作

function performWorkOnRoot(root, expirationTime, isExpired) {
  // 將rendering狀態(tài)設(shè)為true
  isRendering = true;

  // Check if this is async work or sync/expired work.
  if (deadline === null || isExpired) {
    // Flush work without yielding.
    // 同步
    var finishedWork = root.finishedWork;
    if (finishedWork !== null) {
      // This root is already complete. We can commit it.
      completeRoot(root, finishedWork, expirationTime);
    } else {
      root.finishedWork = null;
      // If this root previously suspended, clear its existing timeout, since
      // we"re about to try rendering again.
      var timeoutHandle = root.timeoutHandle;
      if (enableSuspense && timeoutHandle !== noTimeout) {
        root.timeoutHandle = noTimeout;
        // $FlowFixMe Complains noTimeout is not a TimeoutID, despite the check above
        cancelTimeout(timeoutHandle);
      }
      var isYieldy = false;
      renderRoot(root, isYieldy, isExpired);
      finishedWork = root.finishedWork;
      if (finishedWork !== null) {
        // We"ve completed the root. Commit it.
        completeRoot(root, finishedWork, expirationTime);
      }
    }
  } else {
    // Flush async work.異步操作
    ......
    }
  }

  isRendering = false;
}

11.renderRoot的產(chǎn)物會(huì)掛載到root的finishWork屬性上， 首先performWorkOnRoot會(huì)先判斷root的finishWork是否不為空， 如果存在的話則直接進(jìn)入commit的階段， 否則進(jìn)入到renderRoot函數(shù)， 設(shè)置finishWork屬性
renderRoot有三個(gè)參數(shù)， renderRoot(root, isYieldy, isExpired)， 同步狀態(tài)下isYield的值是false,
renderRoot 先將 isWorking設(shè)為true,

renderRoot會(huì)先判斷是否是一個(gè)從新開始的root， 是的話會(huì)重置各個(gè)屬性

首先是resetStach()函數(shù)， 對(duì)原有的進(jìn)行中的root任務(wù)中斷， 進(jìn)行存儲(chǔ)
緊接著將nextRootnextRendeExpirationTime重置， 同時(shí)創(chuàng)建第一個(gè)nextUnitOfWork, 也就是一個(gè)工作單元
這個(gè)nextUnitOfWork也是一個(gè)workProgress, 也是root.current的alternater屬性， 而它的alternate屬性則指向了root.current， 形成了一個(gè)雙緩沖池

if (expirationTime !== nextRenderExpirationTime || root !== nextRoot || nextUnitOfWork === null) {
    // 判斷是否是一個(gè)從新開始的root
    resetStack();
    nextRoot = root;
    nextRenderExpirationTime = expirationTime;
    nextUnitOfWork = createWorkInProgress(nextRoot.current, null, nextRenderExpirationTime);
    root.pendingCommitExpirationTime = NoWork;
    ....
    ....
  }

12.接著執(zhí)行wookLoop（isYield）函數(shù)， 該函數(shù)通過循環(huán)執(zhí)行， 遍歷每一個(gè)nextUniOfWork,

function workLoop(isYieldy) {
  if (!isYieldy) {
    // Flush work without yielding
    while (nextUnitOfWork !== null) {
      nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    }
  } else {
    // Flush asynchronous work until the deadline runs out of time.
    while (nextUnitOfWork !== null && !shouldYield()) {
      nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    }
  }
}

13.performUnitOfWork 先 獲取 參數(shù)的alaernate屬性， 賦值給current,根據(jù)注釋的意思， workInProgress是作為一個(gè)代替品存在來操作， 然后會(huì)執(zhí)行下面這個(gè)語句

next = beginWork(current$$1, workInProgress, nextRenderExpirationTime);

14.beginWork主要根據(jù)workInprogress的tag來做不同的處理， 并返回其child， 也就是下一個(gè)工作單元 如

isWorking = false;
if (nextUnitOfWork !== null) {
 onYield(root);
 return;
}

nextRoot = null;
interruptedBy = null;

var rootWorkInProgress = root.current.alternate;
onComplete(root, rootWorkInProgress, expirationTime);
function onComplete(root, finishedWork, expirationTime) {
  root.pendingCommitExpirationTime = expirationTime;
  root.finishedWork = finishedWork;
}

if (deadline !== null) {
    callbackExpirationTime = NoWork;
    callbackID = null;
  }
  // If there"s work left over, schedule a new callback.
  if (nextFlushedExpirationTime !== NoWork) {
    scheduleCallbackWithExpirationTime(nextFlushedRoot, nextFlushedExpirationTime);
  }

  // Clean-up.
  deadline = null;
  deadlineDidExpire = false;