摘要:函數主要執行兩個操作,一個是判斷當前是否還有任務,如果沒有,則從鏈中移除。
系列文章
React Fiber源碼分析 第一篇
React Fiber源碼分析 第二篇(同步模式)
React Fiber源碼分析 第三篇(異步狀態)
React Fiber源碼分析 第四篇(歸納總結)
React Fiber是React在V16版本中的大更新,利用了閑余時間看了一些源碼,做個小記錄~
如果有錯誤,請輕噴
1.scheduleRootUpdate這個函數主要執行了兩個操作 1個是創建更新createUpdate并放到更新隊列enqueueUpdate, 1個是執行sheculeWork函數
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函數分析, 他直接返回了一個包含了更新信息的對象
function createUpdate(expirationTime) { return { // 優先級 expirationTime: expirationTime, // 更新類型 tag: UpdateState, // 更新的對象 payload: null, callback: null, // 指向下一個更新 next: null, // 指向下一個更新effect nextEffect: null }; }
3.接著更新payload和callback屬性, payload即為更新的對象, 然后執行enqueuUpdate, enqueueUpdate相對比較容易理解, 不過里面有一注釋挺重要
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是同一個對象引用,這里會在createWorkInProcess提到
往下走就是重要的scheduleWork, 它是render階段真正的開始
function scheduleWork(fiber, expirationTime) { // 更新優先級 var root = scheduleWorkToRoot(fiber, expirationTime); ...if (!isWorking && nextRenderExpirationTime !== NoWork && expirationTime < nextRenderExpirationTime) { // This is an interruption. (Used for performance tracking.) 如果這是一個打斷原有更新的任務, 先把現有任務記錄 interruptedBy = fiber; resetStack(); } // 設置下一個操作時間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先執行一個scheduleWorkToRoot函數, 該函數主要是更新其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.接著會執行一個markPendingPriorityLevel函數,這個函數主要是更新root的最高優先級和最低優先級(earliestPendingTime和lastestPendingTime;), 同時設置下一個執行操作的時間nextExpirationTimeToWorkOn(即root中具有最高優先級的fiber的expirationTime),關于這個函數的latestSuspendedTime;以后再說
最后scheduleWork會執行requestWork
function requestWork(root, expirationTime) { addRootToSchedule(root, expirationTime); if (isRendering) { // rendering狀態,直接返回 return; } if (isBatchingUpdates) { // isBatchingUpdates, 直接返回。 react的state更新是會合并的 ...return; } // TODO: Get rid of Sync and use current time? if (expirationTime === Sync) { // 執行同步 performSyncWork(); } else { // 異步, 暫不分析 scheduleCallbackWithExpirationTime(root, expirationTime); } }
6.requestWork 會先執行addRootToSchedule,由函數名稱可知其作用,將root加到schedule, 即設置firstScheduledRoot, lastScheduledRoot以及他們的nextScheduleRoot屬性,說白了就是一個閉環鏈式結構 first => next => next => last(next => first), 同時更新root的expirationTime屬性
function addRootToSchedule(root, expirationTime) { // root尚未開始過任務 將root加到schedule if (root.nextScheduledRoot === null) { ... } else { // root已經開始執行過任務, 更新root的expirationTime var remainingExpirationTime = root.expirationTime; if (remainingExpirationTime === NoWork || expirationTime < remainingExpirationTime) { root.expirationTime = expirationTime; } } }
7.接著requestWork會判斷是否正在渲染中,防止重入。剩余的工作將安排在當前渲染批次的末尾,如果正在渲染直接返回后, 因為已經把root加上到Schedule里面了,依然會把該root執行
同時判斷是否正在batch update, 這里留到分析setState的時候說, 最后根據異步或者同步執行不同函數, 此處執行同步performSyncWork(),performSyncWork直接執行performWork(Sync, null);
function performWork(minExpirationTime, dl) { deadline = dl; // 找出優先級最高的root findHighestPriorityRoot(); if (deadline !== null) { // ...異步 } else { // 循環執行root任務 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首先執行findHighestPriorityRoot函數。findHighestPriorityRoot函數主要執行兩個操作, 一個是判斷當前root是否還有任務,如果沒有, 則從firstScheuleRoot鏈中移除。 一個是找出優先級最高的root和其對應的優先級并賦值給
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) { // 判斷是否還有任務并移除 } else { // 找出最高的優先級root和其對應的優先級 } } } // 賦值 nextFlushedRoot = highestPriorityRoot; nextFlushedExpirationTime = highestPriorityWork; }
9.緊著, performWork會根據傳入的參數dl來判斷進行同步或者異步操作, 這里暫不討論異步,
while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && (minExpirationTime === NoWork || minExpirationTime >= nextFlushedExpirationTime)) { performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime, true); findHighestPriorityRoot(); }
10.接著, 會進行performWorkOnRoot函數, 并傳入優先級最高的root和其對應的expirationTime以及一個true作為參數,performWorkOnRoot函數的第三個參數isExpired主要是用來判斷是否已超過執行時間, 由于進行的是同步操作, 所以默認超過
performWorkOnRoot函數會先將rendering狀態設為true, 然后判斷是否異步或者超時進行操作
function performWorkOnRoot(root, expirationTime, isExpired) { // 將rendering狀態設為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的產物會掛載到root的finishWork屬性上, 首先performWorkOnRoot會先判斷root的finishWork是否不為空, 如果存在的話則直接進入commit的階段, 否則進入到renderRoot函數, 設置finishWork屬性
renderRoot有三個參數, renderRoot(root, isYieldy, isExpired), 同步狀態下isYield的值是false,
renderRoot 先將 isWorking設為true,
renderRoot會先判斷是否是一個從新開始的root, 是的話會重置各個屬性
首先是resetStach()函數, 對原有的進行中的root任務中斷, 進行存儲
緊接著將nextRootnextRendeExpirationTime重置, 同時創建第一個nextUnitOfWork, 也就是一個工作單元
這個nextUnitOfWork也是一個workProgress, 也是root.current的alternater屬性, 而它的alternate屬性則指向了root.current, 形成了一個雙緩沖池
if (expirationTime !== nextRenderExpirationTime || root !== nextRoot || nextUnitOfWork === null) { // 判斷是否是一個從新開始的root resetStack(); nextRoot = root; nextRenderExpirationTime = expirationTime; nextUnitOfWork = createWorkInProgress(nextRoot.current, null, nextRenderExpirationTime); root.pendingCommitExpirationTime = NoWork; .... .... }
12.接著執行wookLoop(isYield)函數, 該函數通過循環執行, 遍歷每一個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 先 獲取 參數的alaernate屬性, 賦值給current,根據注釋的意思, workInProgress是作為一個代替品存在來操作, 然后會執行下面這個語句
next = beginWork(current$$1, workInProgress, nextRenderExpirationTime);
14.beginWork主要根據workInprogress的tag來做不同的處理, 并返回其child, 也就是下一個工作單元 如
若next存在, 則返回到workLoop函數繼續循環, 若不存在, 則執行completeUnitOfWork(workInProgress)函數
completeUnitOfWork函數, 會判斷是否有sibiling, 有則直接返回賦值給next, 否則判斷父fiber是否有sibiling, 一直循環到最上層父fiber為null, 執行的同時會把effect逐級傳給父fiber
這個時候函數執行完畢, 會返回到renderRoot函數, renderRoot函數繼續往下走
首先將isWorking = false;執行, 然后會判斷nextUnitWork是否為空, 否的話則將root.finishWork設為空(異步, 該任務未執行完)并結束函數
isWorking = false; if (nextUnitOfWork !== null) { onYield(root); return; }
重置nextRoot等
nextRoot = null; interruptedBy = null;
賦值finishWork
var rootWorkInProgress = root.current.alternate; onComplete(root, rootWorkInProgress, expirationTime); function onComplete(root, finishedWork, expirationTime) { root.pendingCommitExpirationTime = expirationTime; root.finishedWork = finishedWork; }
15.返回到performWorkOnRoot函數, 進入commit階段, 將rending狀態設為false,返回到performWork函數, 繼續進入循環執行root, 直到所有root完成
重置各個狀態量, 如果還存在nextFlushedExpirationTime不為空, 則進行scheduleCallbackWithExpirationTime函數異步操作
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;結語
以上就是同步模式下的源碼分析~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108956.html
摘要:系列文章源碼分析第一篇源碼分析第二篇同步模式源碼分析第三篇異步狀態源碼分析第四篇歸納總結前言是在版本中的大更新,利用了閑余時間看了一些源碼,做個小記錄流程圖源碼分析先由編譯,調用,入參為,打印出來可以看到,,分別代表著元素原生元素,回調函數 系列文章 React Fiber源碼分析 第一篇 React Fiber源碼分析 第二篇(同步模式) React Fiber源碼分析 第三篇(...
摘要:為什么網頁性能會變高要回答這個問題,需要回頭看是單線程的知識點。在分析的過程中,發現了的源碼中使用了很多鏈式結構,回調鏈,任務鏈等,這個主要是為了增刪時性能比較高 系列文章 React Fiber源碼分析 第一篇 React Fiber源碼分析 第二篇(同步模式) React Fiber源碼分析 第三篇(異步狀態) React Fiber源碼分析 第四篇(歸納總結) 前言 Rea...
摘要:因為版本將真正廢棄這三生命周期到目前為止,的渲染機制遵循同步渲染首次渲染,更新時更新時卸載時期間每個周期函數各司其職,輸入輸出都是可預測,一路下來很順暢。通過進一步觀察可以發現,預廢棄的三個生命周期函數都發生在虛擬的構建期間,也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景 前段時間準備前端招聘事項...
摘要:系列文章源碼分析第一篇源碼分析第二篇同步模式源碼分析第三篇異步狀態源碼分析第四篇歸納總結前言是在版本中的大更新,利用了閑余時間看了一些源碼,做個小記錄流程圖源碼分析調用時,會調用的方法,同時將新的作為參數傳進會先調用獲取一個維護兩個時間一個 系列文章 React Fiber源碼分析 第一篇 React Fiber源碼分析 第二篇(同步模式) React Fiber源碼分析 第三篇(...
摘要:他們的應用是比較復雜的,組件樹也是非常龐大,假設有一千個組件要渲染,每個耗費一千個就是由于是單線程的,這里都在努力的干活,一旦開始,中間就不會停。 悄悄的, React v16.7 發布了。 React v16.7: No, This Is Not The One With Hooks. showImg(https://segmentfault.com/img/bVblq9L?w=97...
閱讀 2628·2021-11-19 09:56
閱讀 873·2021-09-24 10:25
閱讀 1632·2021-09-09 09:34
閱讀 2195·2021-09-09 09:33
閱讀 1052·2019-08-30 15:54
閱讀 541·2019-08-29 18:33
閱讀 1264·2019-08-29 17:19
閱讀 505·2019-08-29 14:19