做网站不赚钱的原因,打开百度一下你就知道,磐安网站建设,编程课程expirationTime 的计算方式
先看expirationTime相关的源代码#xff0c;这里是异步的计算方式#xff0c;它会有一个过期时间异步任务优先级比较低#xff0c;可以被打断#xff0c;防止一直被打断导致不能执行#xff0c;所以React给它设置了 expirationTime 过期时间也…expirationTime 的计算方式
先看expirationTime相关的源代码这里是异步的计算方式它会有一个过期时间异步任务优先级比较低可以被打断防止一直被打断导致不能执行所以React给它设置了 expirationTime 过期时间也就是在这个时间之前都可以打断但是如果某个时间点发现任务已经过期了还没有被执行则强制执行该任务在 ReactDOM.render 当中它计算 expirationTime 的地方 在 ReactFiberReconciler.js 中的 updateContainer 函数中通过 computeExpirationForFiber 方法来计算一个过期时间const current container.current; // 参数2
const currentTime requestCurrentTime(); // 参数1 我们可以近似理解为: 当前时间到js加载完成的时间的时间差值即可
const expirationTime computeExpirationForFiber(currentTime, current);而 requestCurrentTime 这个函数来自于 ReactFiberScheduler.js 中function requestCurrentTime() {// 这里我把官方注释移除// 这里表示 已经进入到 渲染阶段 了在 ReactDOM.render 中这里不会匹配会跳过// 在一次render中如果我有一个新的任务进来了要计算 expirationTime 发现现在处于渲染阶段这时直接返回上次 render 开始的时间再去计算 expirationTime// 好处是 前后两次计算出来的 expirationTime 是一样的让这个任务提前进行调度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;}// 这里我把官方注释移除return currentSchedulerTime;
}findHighestPriorityRoot 方法涉及到从调度队列中找到权限最高的 Root 这个源码比较多不做扩展 recomputeCurrentRendererTime 每一次做计算都是从当前到js加载完成后的时间间隔再经过一些计算得到的值function recomputeCurrentRendererTime() {const currentTimeMs now() - originalStartTimeMs; // 当前时间 - react buddle加载完成之后初始的时间也就是从js加载完成到现在的时间间隔currentRendererTime msToExpirationTime(currentTimeMs); // 计算出 currentRendererTime
}// ReactFiberExpirationTime.js 这个函数得到一个时间戳
export function msToExpirationTime(ms: number): ExpirationTime {// Always add an offset so that we dont clash with the magic number for NoWork.return ((ms / UNIT_SIZE) | 0) MAGIC_NUMBER_OFFSET; // UNIT_SIZE 是固定的 10, | 0 是取整的意思, MAGIC_NUMBER_OFFSET 是固定的 2
}关于 expirationTime 的计算函数 computeExpirationForFiber 有一个计算公式在这个计算时间中不需要考虑调度只考虑计算公式在 ReactFiberExpirationTime.js 中function ceiling(num: number, precision: number): number {return (((num / precision) | 0) 1) * precision;
}function computeExpirationBucket(currentTime,expirationInMs,bucketSizeMs,
): ExpirationTime {return (MAGIC_NUMBER_OFFSET ceiling(currentTime - MAGIC_NUMBER_OFFSET expirationInMs / UNIT_SIZE,bucketSizeMs / UNIT_SIZE,));
}// 低权限计算
export function computeAsyncExpiration(currentTime: ExpirationTime,
): ExpirationTime {return computeExpirationBucket(currentTime,LOW_PRIORITY_EXPIRATION, // 5000LOW_PRIORITY_BATCH_SIZE, // 250);
}// 高权限计算
export function computeInteractiveExpiration(currentTime: ExpirationTime) {return computeExpirationBucket(currentTime,HIGH_PRIORITY_EXPIRATION, // 500/150 前 DEV, 后 PRODHIGH_PRIORITY_BATCH_SIZE, // 100);
}上面两个 export 方法都是调用 computeExpirationBucket 方法来计算的两个方法的区别在于 后面第2和第3个参数是不一样的最终得到的公式是: ((((currentTime - 2 5000 / 10) / 25) | 0 ) 1) * 25 其中 25 250 / 10上述公式中的25也可能是 10 (100 / 10) 最终计算出来的 expirationTime 是以 bucketSize / UNIT_SIZE 这个单元向上叠加的两个 不同的 expirationTime 的差距是 单元值的 倍数对于 LOW_PRIORITY_BATCH_SIZE 是 以 25 为单元向上加的, 若前后差距在25以内计算出来的差距都是一样的对于 HIGH_PRIORITY_BATCH_SIZE 是 以 10 为单元向上加的同上React 这么设定的原因: 在计算 expirationTime 时在一个操作内多次调用 setState, 即便前后调用差距很小但从毫秒级别看还是有差距的如果没有提供任何一个调整空间即便上个 setState 和 下一个 setState 之间差距特别小算出来的 expirationTime 结果不一样这就意味着两次的任务优先级不一样, 会导致 React 整体更新执行多次而导致整个应用的性能下降这就是 设置 单元值的 用处在一个差距很小的时间间隔内算出来的 expirationTime 结果一样则它们优先级也是一样的而不需要进行区分这个非常重要 | 0 表示 去余取整其中 (currentTime - 2 5000 / 10) 是一个不会变化的值设为 x后面就是 (((x / 25) | 0) 1) * 25这个公式的意义在于新老值之间的差距在25以内则结果相等 至于 expirationTime 的作用还要结合后期更新的流程来看expirationTime 是一个和业务无关的比较纯粹的计算过程问题没有任何副作用
