Fiber
每一个ReactElement对应一个Fiber对象
记录节点的各种状态
串联整个应用形成的结构
例如:FiberRoot的current指向RootFiber 的 child —->App 的child —> div 的child—->input 的sibling
属性:
1 | return // 指向父节点(每个节点只会有一个父节点) |
Update
用于记录组件状态的改变
存放于Fiber对象的UpdateQueue中:UpdateQue单项链表的结构
多个Update可以同时存在:例如一个事件里面存在三个setState,创建三个update放到UpdateQueue中
1 | // 创建或更新updatequeue |
expirationTime
详解见:https://react.jokcy.me/book/update/expiration-time.html
1 | // ReactFiberReconciler.js中 |
requestCurrentTime
1 | // 目前粗略的理解目前为止到js加载完成的时间差 |
recomputeCurrentRendererTime
1 | function recomputeCurrentRendererTime() { |
msToExpirationTime
1 | const UNIT_SIZE = 10 |
computeExpirationForFiber
1 | function computeExpirationForFiber(currentTime: ExpirationTime, fiber: Fiber) { |
computeInteractiveExpiration
1 | export const HIGH_PRIORITY_EXPIRATION = __DEV__ ? 500 : 150; |
computeAsyncExpiration
1 | export const LOW_PRIORITY_EXPIRATION = 5000; |
computeExpirationBucket
1 | function computeExpirationBucket( |
计算为了将固定时间间断的,多次setState数据的更新当成一次更新,在这个时间间断内优先级是一样的