vue2、vue3、react事件调度分析
2021-06-16 16:24:56 11 举报
登录查看完整内容
vue2、vue3、react事件调度分析
作者其他创作
大纲/内容
workLoop函数
unstable_scheduleCallback函数
scheduler.jsflushJobs()函数
判断开始时间和当前时间
scheduler.jsflushSchedulerQueue函数
接受一个优先级和回调函数，在回调函数内部调用获取优先级的方法都会取得第一个参数对应的优先级
是
ReactFiberWorkLoop.new.jsworkLoopConcurrent函数
queueWatcher(this)
通过shouldYield()判断是否需要遍历，使得浏览器有时间渲染获取当前时间和结束时间，每次执行一个任务需要5毫秒
按顺序判断是否存在该方法调用异步操作
更新当前时间
循环callbacks数组取出存入的回调函数依次执行调用
开始时间小于等于当前时间
vue3
如果还有回调函数需要执行
如果任务还存在但没有剩余时间，中断
flushWork函数
next-tick.jsnextTick函数
scheduler.jsqueueJob函数
已就绪任务
开始时间大于当前时间
清空回调函数，进入等待状态
scheduler.jsnextTick函数
unstable_runWithPriority函数
flushJobs
performWorkUntilDeadline函数
flushSchedulerQueue()
用一个has对象存储watcher.id通过全局变量flushing判断有没有刷新过，没有的话插入queue队列如果没有执行过等待 则调用flushSchedulerQueue函数
update函数会进行判断如果不是同步则会插入队列中
否
插入到queue数组中
插入到callbacks数组中
requestHostTimeout函数
watcher.jsupdate函数
react
未就绪任务
render.jscreateDevEffectOptions函数
shouldYield()
watch.run()
requestHostCallback函数
task插入taskQueue
queueFlush
schedulePerformWorkUntilDeadline函数
vue2
scheduler: queueJob
判断production环境
保存callback函数如果没有任务执行则执行schedulePerformWorkUntilDeadline函数
task插入timerQueue
promise、MutationObserver、observer.obser、setImmediate、setTimeout
接受一个优先级、回调函数和延迟参数返回一个task对象，包括id，回调函数、优先级、开始时间、过期时间、排序根据不同的优先级返回不同的过期时间
ReactFiberWorkLoop.new.jsrenderRootConcurrent函数
通过Promise.resolve().then在nextTick执行完之后执行
递归执行taskQueue
timerFunc()
scheduler.jsqueueWatcher函数
next-tick.jsflushCallbacks()函数
0 条评论
回复 删除
下一页
