深圳企业网站建设专业,在上阿里云做网站,汽车网站网页模板,长沙影楼网站建设requestCurrentTime 1 #xff09;概述
关于 currentTime#xff0c;在计算 expirationTime 和其他的一些地方都会用到 从它的名义上来讲#xff0c;应等于performance.now() 或者 Date.now() 就是指定的当前时间在react整体设计当中#xff0c;它是有一些特定的用处和一些…requestCurrentTime 1 概述
关于 currentTime在计算 expirationTime 和其他的一些地方都会用到 从它的名义上来讲应等于performance.now() 或者 Date.now() 就是指定的当前时间在react整体设计当中它是有一些特定的用处和一些特殊的设定的比如说在一次渲染中产生的更新需要使用相同的时间在一次批处理的更新中应该得到相同的时间还有就是挂起的任务用于记录的时候应该也是相同的
2 源码
function requestCurrentTime() {// requestCurrentTime is called by the scheduler to compute an expiration// time.//// Expiration times are computed by adding to the current time (the start// time). However, if two updates are scheduled within the same event, we// should treat their start times as simultaneous, even if the actual clock// time has advanced between the first and second call.// In other words, because expiration times determine how updates are batched,// we want all updates of like priority that occur within the same event to// receive the same expiration time. Otherwise we get tearing.//// We keep track of two separate times: the current renderer time and the// current scheduler time. The renderer time can be updated whenever; it// only exists to minimize the calls performance.now.//// But the scheduler time can only be updated if theres no pending work, or// if we know for certain that were not in the middle of an event.if (isRendering) {// Were already rendering. Return the most recently read time.return currentSchedulerTime;}// Check if theres pending work.findHighestPriorityRoot();if (nextFlushedExpirationTime NoWork ||nextFlushedExpirationTime Never) {// If theres no pending work, or if the pending work is offscreen, we can// read the current time without risk of tearing.recomputeCurrentRendererTime();currentSchedulerTime currentRendererTime;return currentSchedulerTime;}// Theres already pending work. We might be in the middle of a browser// event. If we were to read the current time, it could cause multiple updates// within the same event to receive different expiration times, leading to// tearing. Return the last read time. During the next idle callback, the// time will be updated.return currentSchedulerTime;
}第一种情况在 isRendering 的时候会直接返回 currentSchedulerTime, 这个 schedulerTime 而 isRendering 只有在 performWorkOnRoot 的时候才被设置为 true而 performWorkOnRoot 是在 performWork 中被循环调用的performWorkOnRoot 的前后都会重设 currentSchedulerTime这样在 performWorkOnRoot 的时候, isRendering 被设定为 true并且是一个同步的方法使用 performWorkOnRoot 的时候, 后期会调用 render 和 commit 两个阶段在上述两个阶段里都有可能调用组件的生命周期方法在这里有可能产生更新react的设定是在当前渲染流程中如果在生命周期方法里触发了新的更新那么它计算 expirationTime 的时间需要一个固定的时间所以统一返回 currentSchedulerTime这个 currentSchedulerTime 就是在调用 performWorkOnRoot 之前算出来的时间requestCurrentTime 的 if (isRendering) return currentScheudlerTime的设定 第二种情况 调用 findHighestPriorityRoot 找到调度队列中优先级最高的任务如果符合 if (nextFlushedExpirationTime NoWork || nextFlushedExpirationTime Never) 目前没有任务进行或正在更新的组件是从未展现的组件这时候重新计算 renderTime recomputeCurrentRendererTime();并且赋值 currentSchedulerTime currentRendererTime;最终 return currentSchedulerTime 这里和 batchedUpdates 里面类似 创建了 事件的回调多次调用 setState 会创建多个更新计算多次 expirationTime如果没有做这类处理 requestCurrentTime 都去计算一个时间就会导致返回的时间不一致因为时间不一致导致计算出来的 expirationTime不一致那么就导致任务优先级不一致它们会分批次的进行更新就会导致问题在异步的模式下即便只有在最后一次回调调用完之后才会去调用 performWork但是因为任务优先级不同会导致分多次进行调用 所以通过上述判断来规避此类问题第一次调用 setState 之后就在一个root上创建一个更新从 firstScheduledRoot 到 lastScheduledRoot 里面至少会有一个即将要执行的更新在有一个的情况下上述 if 就不满足了就不会直接计算时间直接返回 currentSchedulerTime 这个已保存的时间
expirationTime 1 ) 概述
在计算 expirationTime 之前我们计算的时间是预先处理过的在 requestCurrentTime 函数中有一个 recomputeCurrentRendererTime
2 源码
// /packages/react-reconciler/src/ReactFiberScheduler.js
function recomputeCurrentRendererTime() {const currentTimeMs now() - originalStartTimeMs;currentRendererTime msToExpirationTime(currentTimeMs);
}// packages/react-reconciler/src/ReactFiberExpirationTime.js
// 1 unit of expiration time represents 10ms.
export function msToExpirationTime(ms: number): ExpirationTime {// Always add an offset so that we dont clash with the magic number for NoWork.// ms / UNIT_SIZE 为了防止 10ms 之内的误差两个时间差距在10ms以内两个时间看做一致最终计算出来的优先级也是一致return ((ms / UNIT_SIZE) | 0) MAGIC_NUMBER_OFFSET; // UNIT_SIZE 是 10, const MAGIC_NUMBER_OFFSET 是 2
}
function computeExpirationBucket(currentTime,expirationInMs,bucketSizeMs,
): ExpirationTime {return (MAGIC_NUMBER_OFFSET ceiling(currentTime - MAGIC_NUMBER_OFFSET expirationInMs / UNIT_SIZE,bucketSizeMs / UNIT_SIZE,));
}
export function expirationTimeToMs(expirationTime: ExpirationTime): number {return (expirationTime - MAGIC_NUMBER_OFFSET) * UNIT_SIZE;
}在后续 computeExpirationBucket 中 currentTime - MAGIC_NUMBER_OFFSET所以 MAGIC_NUMBER_OFFSET 没有影响到 真正时间的计算误差在10ms以内的前后两个用于计算 expirationTime 的 currentTime它们的误差会被抹平就是 msToExpirationTime 这个方法被设计的意义最终使用具体的时间设置timeout, 判断是否过期的时候会通过 expirationTimeToMs 把这个时间转回来
