建设网站的目的和意义,世界各国gdp排名,个人养老金制度出台有望年底,php网站源码带后台Update 与 UpdateQueue 对象 1 ) 概述
在fiber对象中有一个属性 fiber.updateQueue是一个链式队列#xff08;即使用链表实现的队列存储结构#xff09;是和页面更新有关的
2 #xff09;Update对象相关的数据结构
// https://github.com/facebook/react/blob/v18.2.0/pa…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 UpdateState {// eventTime: number, // 这个属性后续被删除了 可以忽略了lane: Lane,tag: 0 | 1 | 2 | 3,payload: any,callback: (() mixed) | null,next: UpdateState | null,
};export type SharedQueueState {pending: UpdateState | null,lanes: Lanes,hiddenCallbacks: Array() mixed | null,
};export type UpdateQueueState {baseState: State,firstBaseUpdate: UpdateState | null,lastBaseUpdate: UpdateState | null,shared: SharedQueueState,callbacks: Array() mixed | null,
};Update 属性 lane: update所属优先级tag: 表示 update种4种. UpdateState, ReplaceState, ForceUpdate, CaptureUpdatepayload: 载荷update对象真正需要更新的数据可以设置成一个回调函数或者对象.callback: 回调函数.commit完成之后会调用.next: 指向链表中的下一个由于UpdateQueue是一个环形链表最后一个update.next指向第一个update对象 UpdateQueue 属性 baseState: 表示此队列的基础statefirstBaseUpdate: 指向基础队列的队首lastBaseUpdate: 指向基础队列的队尾shared: 共享队列callbacks: 用于保存有callback回调函数的update对象在commit之后会依次调用这里的回调函数. SharedQueue 属性 pending:指向即将输入的update队列.在class组件中调用setState()之后会将新的update对象添加到这个队列中来
updateQueue是fiber对象的一个属性它们之间数据结构和引用关系如下 Hooks 对象 1 ) 概述
Hook用于 function 组件中能够保持function组件的状态与class组件中的 state在性质上是相同的都是为了保持组件的状态在rect16.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: Updateany, any | null,queue: any,next: Hook | null,
|};// /packages/react-reconciler/src/ReactFiberHooks.new.js#L126
export type UpdateS, A {|lane: Lane,action: A,hasEagerState: boolean,eagerState: S | null,next: UpdateS, A,
|};// /packages/react-reconciler/src/ReactFiberHooks.new.js#L134
export type UpdateQueueS, A {|pending: UpdateS, 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
