react-scheduler底层架构图
2024-07-26 16:13:06 0 举报react底层架构图-scheduler部分
作者其他创作
大纲/内容
N
unstable_scheduleCallback
isMessageLoopRunning
isMessageLoopRunning = false;
暂存flushWork：scheduledHostCallback = callback
requestHostCallback(flushWork)
Y
push to timerQueue
准备进行work，调用schedulePerformWorkUntilDeadline
handleTimeout
开始循环，isMessageLoopRunning = true
当前操作的为有效任务
isHostCallbackScheduled
!isHostCallbackScheduled && !isPerformingWork
isHostCallbackScheduled = true
push to taskQueue
初始化flag，hasTimeRemaining、hasMoreWork。
requestHostTimeout继续等待
继续调度，schedulePerformWorkUntilDeadline
当前是否有timeout在倒计时？isHostTimeoutScheduled
return true
cancelHostTimeout取消定时器
返回值为函数
如果返回一个新的callback，无论当前空闲时间还剩多少，直接返回进入下一个任务循环。advanceTimers;
workLoop
advanceTimers搬运一波
needsPaint = false;
重置一些变量：currentTask = null、currentPriorityLevel = previousPriorityLevel、isPerformingWork = false
isHostTimeoutScheduled = true
false
scheduledHostCallback
taskQueue为空且timerQueue堆顶任务为当前任务
return false
创建newTask对象
isPerformingWork
任务还没到期，且当前帧没有多余时间或者需要将js线程交给浏览器
取下一个任务为当前任务
hasMoreWork
等待下一个循环执行performWorkUntilDeadline
调用scheduledHostCallback（就是flushwork）
是否正在循环？isMessageLoopRunning
清空timeout定时器和flag
当前任务有callback
performWorkUntilDeadline
当前任务为堆顶任务
advanceTimers搬运一波timerQueue
pop出来
startTime > currentTime
取timerQueue最近一个，调用requestHostTimeout
advanceTimers
当前任务是否为空
返回workLoop结果
requestHostTimeout启动一个timer
requestHostCallback
true
全部搞完了，重置flag。isMessageLoopRunning = false;scheduledHostCallback = null;
执行callback
取出taskQueue为当前操作的任务
taskQueue为空
!isHostCallbackScheduled
flushWork
拿到返回值为hasMoreWork
workLoop()
pop出来。
timerQueue不为空
isHostTimeoutScheduled
取出callback并将原指向重置为空。currentTask.callback = null
记录当前时间为currentTime
释放调度任务flag，isHostCallbackScheduled = false
标记开始work，isPerformingWork = true
获取callback的返回值
收藏
收藏
职业：暂无
0 条评论
下一页
