path：packages/react-reconciler/src/ReactUpdateQueue.js

更新

export type Update<State> = {expirationTime: ExpirationTime, // 到期時(shí)間tag: 0 | 1 | 2 | 3, // 更新類型payload: any, // 負(fù)載callback: (() => mixed) | null, // 回調(diào)函數(shù)next: Update<State> | null, // 下一個(gè)更新nextEffect: Update<State> | null, // 下一個(gè)效果 }; 復(fù)制代碼

React 的狀態(tài)更新分為四種情況，他們分別對(duì)應(yīng) Update 的 tag 屬性的四個(gè)值：

• UpdateState
• ReplaceState
• ForceUpdate
• CaptureUpdate

export const UpdateState = 0; // 更新狀態(tài) export const ReplaceState = 1; // 替換狀態(tài) export const ForceUpdate = 2; // 強(qiáng)制更新 export const CaptureUpdate = 3; // 捕獲更新 復(fù)制代碼

創(chuàng)建更新

/*** 創(chuàng)建更新* @param expirationTime* @returns {{next: null, payload: null, expirationTime: ExpirationTime, callback: null, tag: number, nextEffect: null}}*/ export function createUpdate(expirationTime: ExpirationTime): Update<*> {return {expirationTime: expirationTime,tag: UpdateState,payload: null,callback: null,next: null,nextEffect: null,}; } 復(fù)制代碼

調(diào)用此方法創(chuàng)建的更新默認(rèn)為是局部更新，需要合并前后狀態(tài)。

更新隊(duì)列

export type UpdateQueue<State> = {baseState: State,firstUpdate: Update<State> | null,lastUpdate: Update<State> | null,firstCapturedUpdate: Update<State> | null,lastCapturedUpdate: Update<State> | null,firstEffect: Update<State> | null,lastEffect: Update<State> | null,firstCapturedEffect: Update<State> | null,lastCapturedEffect: Update<State> | null, }; 復(fù)制代碼

創(chuàng)建更新隊(duì)列

/*** 創(chuàng)建更新隊(duì)列* @param baseState* @returns {UpdateQueue<State>}*/ export function createUpdateQueue<State>(baseState: State): UpdateQueue<State> {const queue: UpdateQueue<State> = {baseState,firstUpdate: null,lastUpdate: null,firstCapturedUpdate: null,lastCapturedUpdate: null,firstEffect: null,lastEffect: null,firstCapturedEffect: null,lastCapturedEffect: null,};return queue; } 復(fù)制代碼

數(shù)據(jù)結(jié)構(gòu)

從上面的代碼中可以看到，更新隊(duì)列是一個(gè)單向鏈表：

appendUpdateToQueue

追加更新到鏈表尾部

/*** 添加更新到隊(duì)列中* @param queue* @param update*/ function appendUpdateToQueue<State>(queue: UpdateQueue<State>,update: Update<State>, ) {// 將更新追加到列表的末尾。if (queue.lastUpdate === null) {// 隊(duì)列是空的queue.firstUpdate = queue.lastUpdate = update;} else {queue.lastUpdate.next = update;queue.lastUpdate = update;} } 復(fù)制代碼

state 更新

每次更新的時(shí)候需要根據(jù)不同的更新類型來獲取下一次的 state：

• UpdateState 需要合并前一次的狀態(tài)和本次的狀態(tài)
• ReplaceState 直接使用下一次的狀態(tài)
• ForceUpdate 使用前一次的狀態(tài)
• CaptureUpdate

/*** 從跟新獲取狀態(tài)* @param workInProgress* @param queue* @param update* @param prevState* @param nextProps* @param instance* @returns {State|*}*/ function getStateFromUpdate<State>(workInProgress: Fiber,queue: UpdateQueue<State>,update: Update<State>,prevState: State,nextProps: any,instance: any, ): any {switch (update.tag) {case ReplaceState: {const payload = update.payload;if (typeof payload === 'function') {// 更新器函數(shù)const nextState = payload.call(instance, prevState, nextProps);return nextState;}// 狀態(tài)對(duì)象return payload;}case CaptureUpdate: {workInProgress.effectTag =(workInProgress.effectTag & ~ShouldCapture) | DidCapture;}// Intentional fallthroughcase UpdateState: {const payload = update.payload;let partialState;if (typeof payload === 'function') {// Updater functionpartialState = payload.call(instance, prevState, nextProps);} else {// 部分狀態(tài)對(duì)象partialState = payload;}if (partialState === null || partialState === undefined) {// Null 和 undefined 被視為 no-ops。return prevState;}// 合并部分狀態(tài)和前一個(gè)狀態(tài)。return Object.assign({}, prevState, partialState);}case ForceUpdate: {hasForceUpdate = true;return prevState;}}return prevState; } 復(fù)制代碼

從上面的代碼可以看到，更新 state 時(shí)可以接收一個(gè)更新器函數(shù)，這個(gè)更新器函數(shù)被綁定到當(dāng)前的實(shí)例上運(yùn)行，也就是在 React 文檔 中寫到的，setState 可以接收一個(gè)函數(shù)作為參數(shù)：

setState((prevState, nextProps) => {// do something }) 復(fù)制代碼

• prevState 參數(shù)是上一次調(diào)用 setState 之后的狀態(tài)，而不是已經(jīng)更新到 dom 中的狀態(tài)，因?yàn)闋顟B(tài)更新是異步的，為了避免不必要的重新渲染來提升性能。
• nextProps 參數(shù)是下一次的 props 對(duì)象

處理更新

/*** * @param workInProgress* @param queue* @param props* @param instance* @param renderExpirationTime*/ export function processUpdateQueue<State>(workInProgress: Fiber,queue: UpdateQueue<State>,props: any,instance: any,renderExpirationTime: ExpirationTime, ): void {hasForceUpdate = false;// 確保處理的更新隊(duì)列的 work 是一個(gè)復(fù)制品queue = ensureWorkInProgressQueueIsAClone(workInProgress, queue);if (__DEV__) {currentlyProcessingQueue = queue;}// These values may change as we process the queue.// 當(dāng)我們處理隊(duì)列時(shí)，這些值可能會(huì)改變。let newBaseState = queue.baseState;let newFirstUpdate = null;let newExpirationTime = NoWork;// Iterate through the list of updates to compute the result.// 迭代更新列表以計(jì)算結(jié)果。let update = queue.firstUpdate;let resultState = newBaseState;while (update !== null) {const updateExpirationTime = update.expirationTime;if (updateExpirationTime < renderExpirationTime) {// This update does not have sufficient priority. Skip it.// 此更新沒有足夠的優(yōu)先級(jí)。跳過它。if (newFirstUpdate === null) {// This is the first skipped update. It will be the first update in// the new list.// 這是第一個(gè)跳過的更新。這將是新列表中的第一個(gè)更新。newFirstUpdate = update;// Since this is the first update that was skipped, the current result// is the new base state.// 由于這是跳過的第一個(gè)更新，所以當(dāng)前結(jié)果是 new base state。newBaseState = resultState;}// Since this update will remain in the list, update the remaining// expiration time.// 由于此更新將保留在列表中，所以更新剩余的過期時(shí)間。if (newExpirationTime < updateExpirationTime) {newExpirationTime = updateExpirationTime;}} else {// This update does have sufficient priority. Process it and compute// a new result.// 這次更新確實(shí)有足夠的優(yōu)先級(jí)。處理它并計(jì)算一個(gè)新的結(jié)果。resultState = getStateFromUpdate(workInProgress,queue,update,resultState,props,instance,);const callback = update.callback;if (callback !== null) {workInProgress.effectTag |= Callback;// Set this to null, in case it was mutated during an aborted render.// 將其設(shè)置為null，以防在中止渲染期間發(fā)生突變。update.nextEffect = null;if (queue.lastEffect === null) {queue.firstEffect = queue.lastEffect = update;} else {queue.lastEffect.nextEffect = update;queue.lastEffect = update;}}}// Continue to the next update.// 繼續(xù)下一個(gè)更新。update = update.next;}// Separately, iterate though the list of captured updates.// 另外，遍歷捕獲的更新列表。let newFirstCapturedUpdate = null;update = queue.firstCapturedUpdate;while (update !== null) {const updateExpirationTime = update.expirationTime;if (updateExpirationTime < renderExpirationTime) {// This update does not have sufficient priority. Skip it.// 這個(gè)更新沒有足夠的優(yōu)先級(jí)。跳過它。if (newFirstCapturedUpdate === null) {// This is the first skipped captured update. It will be the first// update in the new list.// 這是第一次跳過捕獲的更新。這將是新列表中的第一個(gè)更新。newFirstCapturedUpdate = update;// If this is the first update that was skipped, the current result is// the new base state.// 如果這是跳過的第一個(gè)更新，則當(dāng)前結(jié)果是新的基本狀態(tài)。if (newFirstUpdate === null) {newBaseState = resultState;}}// Since this update will remain in the list, update the remaining// expiration time.// 由于此更新將保留在列表中，所以更新剩余的過期時(shí)間。if (newExpirationTime < updateExpirationTime) {newExpirationTime = updateExpirationTime;}} else {// This update does have sufficient priority. Process it and compute// a new result.// 這次更新確實(shí)有足夠的優(yōu)先級(jí)。處理它并計(jì)算一個(gè)新的結(jié)果。resultState = getStateFromUpdate(workInProgress,queue,update,resultState,props,instance,);const callback = update.callback;if (callback !== null) {workInProgress.effectTag |= Callback;// Set this to null, in case it was mutated during an aborted render.// 將其設(shè)置為 null，以防在中止 render 期間發(fā)生突變。update.nextEffect = null;if (queue.lastCapturedEffect === null) {queue.firstCapturedEffect = queue.lastCapturedEffect = update;} else {queue.lastCapturedEffect.nextEffect = update;queue.lastCapturedEffect = update;}}}update = update.next;}if (newFirstUpdate === null) {queue.lastUpdate = null;}if (newFirstCapturedUpdate === null) {queue.lastCapturedUpdate = null;} else {workInProgress.effectTag |= Callback;}if (newFirstUpdate === null && newFirstCapturedUpdate === null) {// We processed every update, without skipping. That means the new base// state is the same as the result state.// 我們處理了每個(gè)更新，沒有跳過。這意味著新的基狀態(tài)與結(jié)果狀態(tài)相同。newBaseState = resultState;}queue.baseState = newBaseState;queue.firstUpdate = newFirstUpdate;queue.firstCapturedUpdate = newFirstCapturedUpdate;// Set the remaining expiration time to be whatever is remaining in the queue.// This should be fine because the only two other things that contribute to// expiration time are props and context. We're already in the middle of the// begin phase by the time we start processing the queue, so we've already// dealt with the props. Context in components that specify// shouldComponentUpdate is tricky; but we'll have to account for// that regardless.// 將剩余的過期時(shí)間設(shè)置為隊(duì)列中剩余的時(shí)間。// 這應(yīng)該沒問題，因?yàn)橛绊戇^期時(shí)間的另外兩個(gè)因素是 props 和 context。// 在開始處理隊(duì)列時(shí)，我們已經(jīng)處于 begin 階段的中間，// 所以我們已經(jīng)處理了這些 props。// 指定 shouldComponentUpdate 的組件中的 Context 比較復(fù)雜;// 但無論如何我們都要考慮到這一點(diǎn)。workInProgress.expirationTime = newExpirationTime;workInProgress.memoizedState = resultState;if (__DEV__) {currentlyProcessingQueue = null;} } 復(fù)制代碼

提交更新

提交更新

/*** 提交更新隊(duì)列* @param finishedWork* @param finishedQueue* @param instance* @param renderExpirationTime*/ export function commitUpdateQueue<State>(finishedWork: Fiber,finishedQueue: UpdateQueue<State>,instance: any,renderExpirationTime: ExpirationTime, ): void {// 如果已完成的渲染包含捕獲的更新，// 并且仍然有較低優(yōu)先級(jí)的更新遺留下來，// 那么我們需要將捕獲的更新保存在隊(duì)列中，// 以便在以較低優(yōu)先級(jí)再次處理隊(duì)列時(shí)重新基于它們，而不是丟棄它們。if (finishedQueue.firstCapturedUpdate !== null) {// 將捕獲的更新列表連接到普通列表的末尾。if (finishedQueue.lastUpdate !== null) {finishedQueue.lastUpdate.next = finishedQueue.firstCapturedUpdate;finishedQueue.lastUpdate = finishedQueue.lastCapturedUpdate;}// 清除捕獲的更新列表。finishedQueue.firstCapturedUpdate = finishedQueue.lastCapturedUpdate = null;}// 提交效果commitUpdateEffects(finishedQueue.firstEffect, instance);finishedQueue.firstEffect = finishedQueue.lastEffect = null;commitUpdateEffects(finishedQueue.firstCapturedEffect, instance);finishedQueue.firstCapturedEffect = finishedQueue.lastCapturedEffect = null; } 復(fù)制代碼

提交更新效果

/*** 提交更新效果* @param effect* @param instance*/ function commitUpdateEffects<State>(effect: Update<State> | null,instance: any, ): void {while (effect !== null) {const callback = effect.callback;if (callback !== null) {effect.callback = null;callCallback(callback, instance);}effect = effect.nextEffect;} } 復(fù)制代碼

其他方法

ensureWorkInProgressQueueIsAClone

/*** 確保工作中的處理隊(duì)列是復(fù)制品* 1. 判斷當(dāng)前隊(duì)列和更新隊(duì)列是不是相等* 2. 若相等則克隆，若不等則返回當(dāng)前隊(duì)列* @param workInProgress* @param queue* @returns {UpdateQueue<State>}*/ function ensureWorkInProgressQueueIsAClone<State>(workInProgress: Fiber,queue: UpdateQueue<State>, ): UpdateQueue<State> {const current = workInProgress.alternate;if (current !== null) {// 如果正在工作的隊(duì)列等于當(dāng)前隊(duì)列，我們需要首先克隆它。if (queue === current.updateQueue) {queue = workInProgress.updateQueue = cloneUpdateQueue(queue);}}return queue; } 復(fù)制代碼

cloneUpdateQueue

/*** 克隆更新隊(duì)列* @param currentQueue* @returns {UpdateQueue<State>}*/ function cloneUpdateQueue<State>(currentQueue: UpdateQueue<State>, ): UpdateQueue<State> {const queue: UpdateQueue<State> = {baseState: currentQueue.baseState,firstUpdate: currentQueue.firstUpdate,lastUpdate: currentQueue.lastUpdate,// TODO: With resuming, if we bail out and resuse the child tree, we should// keep these effects.firstCapturedUpdate: null,lastCapturedUpdate: null,firstEffect: null,lastEffect: null,firstCapturedEffect: null,lastCapturedEffect: null,};return queue; } 復(fù)制代碼

enqueueUpdate

/*** 排隊(duì)更新* @param fiber* @param update*/ export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {// 更新隊(duì)列是惰性創(chuàng)建的。const alternate = fiber.alternate;let queue1;let queue2;if (alternate === null) {// 只有一個(gè) fiberqueue1 = fiber.updateQueue;queue2 = null;if (queue1 === null) {queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);}} else {// 有兩個(gè) owner。queue1 = fiber.updateQueue;queue2 = alternate.updateQueue;if (queue1 === null) {if (queue2 === null) {// Neither fiber has an update queue. Create new ones.// 這兩種 fiber 都沒有更新隊(duì)列。創(chuàng)造一個(gè)新隊(duì)列。queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);queue2 = alternate.updateQueue = createUpdateQueue(alternate.memoizedState,);} else {// Only one fiber has an update queue. Clone to create a new one.// 只有一個(gè) fiber 有更新隊(duì)列。克隆以創(chuàng)建一個(gè)新的。queue1 = fiber.updateQueue = cloneUpdateQueue(queue2);}} else {if (queue2 === null) {// Only one fiber has an update queue. Clone to create a new one.// 只有一個(gè) fiber 有更新隊(duì)列。克隆以創(chuàng)建一個(gè)新的。queue2 = alternate.updateQueue = cloneUpdateQueue(queue1);} else {// Both owners have an update queue.// 兩個(gè)所有者都有一個(gè)更新隊(duì)列。}}}if (queue2 === null || queue1 === queue2) {// There's only a single queue.// 只有一個(gè)隊(duì)列。appendUpdateToQueue(queue1, update);} else {// There are two queues. We need to append the update to both queues,// while accounting for the persistent structure of the list — we don't// want the same update to be added multiple times.// 有兩個(gè)隊(duì)列。我們需要將更新附加到兩個(gè)隊(duì)列，// 同時(shí)考慮到列表的持久結(jié)構(gòu)——我們不希望將相同的更新添加多次。if (queue1.lastUpdate === null || queue2.lastUpdate === null) {// One of the queues is not empty. We must add the update to both queues.// 其中一個(gè)隊(duì)列不是空的。我們必須將更新添加到兩個(gè)隊(duì)列。appendUpdateToQueue(queue1, update);appendUpdateToQueue(queue2, update);} else {// 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.// 兩個(gè)隊(duì)列都不是空的。由于結(jié)構(gòu)共享，這兩個(gè)列表中的最新更新是相同的。// 因此，只向其中一個(gè)列表追加。appendUpdateToQueue(queue1, update);// But we still need to update the `lastUpdate` pointer of queue2.// 但是我們?nèi)匀恍枰?queue2 的 `lastUpdate` 指針。queue2.lastUpdate = update;}}if (__DEV__) {if (fiber.tag === ClassComponent &&(currentlyProcessingQueue === queue1 ||(queue2 !== null && currentlyProcessingQueue === queue2)) &&!didWarnUpdateInsideUpdate) {warningWithoutStack(false,'An update (setState, replaceState, or forceUpdate) was scheduled ' +'from inside an update function. Update functions should be pure, ' +'with zero side-effects. Consider using componentDidUpdate or a ' +'callback.',);didWarnUpdateInsideUpdate = true;}} } 復(fù)制代碼

enqueueCapturedUpdate

/*** 排隊(duì)捕獲的更新* @param workInProgress* @param update*/ export function enqueueCapturedUpdate<State>(workInProgress: Fiber,update: Update<State>, ) {// 捕獲的更新進(jìn)入一個(gè)單獨(dú)的列表，并且只在正在進(jìn)行的隊(duì)列中。let workInProgressQueue = workInProgress.updateQueue;if (workInProgressQueue === null) {workInProgressQueue = workInProgress.updateQueue = createUpdateQueue(workInProgress.memoizedState,);} else {// TODO：我把它放在這里，而不是 createWorkInProgress，這樣我們就不會(huì)不必要地克隆隊(duì)列。也許有更好的方法來構(gòu)造它。。workInProgressQueue = ensureWorkInProgressQueueIsAClone(workInProgress,workInProgressQueue,);}// Append the update to the end of the list.// 將更新追加到列表的末尾。if (workInProgressQueue.lastCapturedUpdate === null) {// This is the first render phase update// 這是第一個(gè)渲染階段的更新workInProgressQueue.firstCapturedUpdate = workInProgressQueue.lastCapturedUpdate = update;} else {workInProgressQueue.lastCapturedUpdate.next = update;workInProgressQueue.lastCapturedUpdate = update;} } 復(fù)制代碼

callCallback

/*** 調(diào)用回調(diào)* 1. 回調(diào)不存在則拋出錯(cuò)誤* 2. 回調(diào)存在則使用上下文執(zhí)行回調(diào)** @param callback* @param context*/ function callCallback(callback, context) {invariant(typeof callback === 'function','Invalid argument passed as callback. Expected a function. Instead ' +'received: %s',callback,);callback.call(context); } 復(fù)制代碼

遺留問題

commitUpdateEffects 提交更新效果的時(shí)候是根據(jù) Effect 效果的鏈表進(jìn)行迭代的？這些 Update 的 nextEffect 是什么時(shí)候構(gòu)成了鏈表結(jié)構(gòu)？因?yàn)槲覜]上面看到的更新隊(duì)列只是一個(gè) Update 使用 next 組成的一個(gè)鏈表結(jié)構(gòu)

commitUpdateQueue 提交的時(shí)候調(diào)用的也是 commitUpdateEffects，傳入的 finishedQueue.firstEffect 和 finishedQueue.firstCapturedEffect，createUpdate 是在何處被調(diào)用創(chuàng)建了更新的？這些 Effect 又是些什么東西呢？

提交更新的時(shí)候?yàn)槭裁床皇鞘褂?Update.next 而是 Update.nextEffect 呢

enqueueUpdate、enqueueCapturedUpdate、processUpdateQueue、createUpdate 在什么時(shí)候被調(diào)用

轉(zhuǎn)載于:https://juejin.im/post/5d04251de51d4556be5b3a49

總結(jié)

以上是生活随笔為你收集整理的React 深入学习：React 更新队列的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。