Update 與 UpdateQueue 對象

1 ) 概述

• 在fiber對象中有一個屬性 fiber.updateQueue
• 是一個鏈式隊列（即使用鏈表實現的隊列存儲結構）
• 是和頁面更新有關的

2 ）Update對象相關的數據結構

// https://github.com/facebook/react/blob/v18.2.0/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js#L123
export type Update<State> = {// eventTime: number, // 這個屬性后續被刪除了 可以忽略了lane: Lane,tag: 0 | 1 | 2 | 3,payload: any,callback: (() => mixed) | null,next: Update<State> | null,
};export type SharedQueue<State> = {pending: Update<State> | null,lanes: Lanes,hiddenCallbacks: Array<() => mixed> | null,
};export type UpdateQueue<State> = {baseState: State,firstBaseUpdate: Update<State> | null,lastBaseUpdate: Update<State> | null,shared: SharedQueue<State>,callbacks: Array<() => mixed> | null,
};

• Update 屬性
  • lane: update所屬優先級
  • tag: 表示 update種，4種. UpdateState, ReplaceState, ForceUpdate, CaptureUpdate
  • payload: 載荷，update對象真正需要更新的數據，可以設置成一個回調函數或者對象.
  • callback: 回調函數.commit完成之后會調用.
  • next: 指向鏈表中的下一個，由于UpdateQueue是一個環形鏈表，最后一個update.next指向第一個update對象
• UpdateQueue 屬性
  • baseState: 表示此隊列的基礎state
  • firstBaseUpdate: 指向基礎隊列的隊首
  • lastBaseUpdate: 指向基礎隊列的隊尾
  • shared: 共享隊列
  • callbacks: 用于保存有callback回調函數的update對象，在commit之后，會依次調用這里的回調函數.
• SharedQueue 屬性
  • pending:指向即將輸入的update隊列.在class組件中調用setState()之后，會將新的update對象添加到這個隊列中來

updateQueue是fiber對象的一個屬性，它們之間數據結構和引用關系如下

Hooks 對象

1 ) 概述

• Hook用于 function 組件中，能夠保持function組件的狀態
• 與class組件中的 state在性質上是相同的，都是為了保持組件的狀態
• 在rect@16.8以后，官方開始推薦使用Hook語法，常用的api有usestate, useEffect,usecallback等
• 到目前為止，官方一共定義了17種Hook類型

2 ）結構類型

// https://github.com/facebook/react/blob/v18.2.0/packages/react-reconciler/src/ReactFiberHooks.new.js#L148
export type Hook = {|memoizedState: any,baseState: any,baseQueue: Update<any, any> | null,queue: any,next: Hook | null,
|};// /packages/react-reconciler/src/ReactFiberHooks.new.js#L126
export type Update<S, A> = {|lane: Lane,action: A,hasEagerState: boolean,eagerState: S | null,next: Update<S, A>,
|};// /packages/react-reconciler/src/ReactFiberHooks.new.js#L134
export type UpdateQueue<S, A> = {|pending: Update<S, A> | null,lanes: Lanes,dispatch: (A => mixed) | null,lastRenderedReducer: ((S, A) => S) | null,lastRenderedState: S | null,
|};

• Hook 屬性

  • memoizedState: 內存狀態，用于輸出成最終的fiber樹
  • basestate: 基礎狀態，當Hook.queue更過后，basestate也會更新.
  • baseQueue: 基礎狀態隊列，在reconciler階段會輔助狀態合并.
  • queue: 指向一個Update隊列
  • next: 指向該function組件的下一個Hook對象，使得多個Hook之間也構成了一個鏈表.

• 注意

  • Hook.queue 和 Hook.baseQueue(即 UpdateQueue 和 Update)是為了保證 Hook 對象能夠順利更新
  • 與 fiber.updateQueue 中的 UpdateQueue 和 Update 是不一樣的（且它們在不同的文件）

• Hook與fiber的關系

  • 在fiber對象中有一個屬性 fiber.memoizedState 指向fiber節點的內存狀態.
  • 在function類型的組件中，fiber.memoizedState 就指向Hook隊列(Hook隊列保存了 function類型的組件狀態).
  • 所以Hook也不能脫離fiber而存在，它們之間的引用關系如下：

Task 對象

• scheduler包中，沒有為task對象定義type,其定義是直接在js代碼中：

  // https://github.com/facebook/react/blob/v18.2.0/packages/scheduler/src/forks/Scheduler.js#L345
  var newTask = {id: taskIdCounter++,callback,priorityLevel,startTime,expirationTime,sortIndex: -1,
  };
  

• 屬性解釋：

  • id: 位移標識
  • callback: task最核心的字段，指向react-reconciler包所提供的回調函數.
  • prioritylevel: 優先級
  • startTime: 一個時間戳，代表task的開始時間（創建時間+延時時間）.
  • expirationTime: 過期時間.
  • sortIndex: 控制task在隊列中的次序，值越小的越靠前

• 注意task中沒有next屬性，它不是一個鏈表，其順序是通過堆排序來實現的

• 小頂堆數組，始終保證數組中的第一個task對象優先級最高

• 堆參考
  • 最小堆：https://blog.csdn.net/Tyro_java/article/details/133468244
  • 最大堆：https://blog.csdn.net/Tyro_java/article/details/133530983