React源码解析之ExpirationTime

更新日期: 2019-08-01阅读: 2.5k标签: 源码

一、ExpirationTime的作用

在React中,为防止某个update因为优先级的原因一直被打断而未能执行。React会设置一个ExpirationTime,当时间到了ExpirationTime的时候,如果某个update还未执行的话,React将会强制执行该update,这就是ExpirationTime的作用。


二、位置

在React源码解析之ReactDOM.render()中,已经讲解了updateContainer():

export function updateContainer(
  element: ReactNodeList,
  container: OpaqueRoot,
  parentComponent: ?React$Component<any, any>,
  callback: ?Function,
): ExpirationTime {
   ...
   //计算过期时间,这是React优先级更新非常重要的点
  const expirationTime = computeExpirationForFiber(
    currentTime,
    current,
    suspenseConfig,
  );
   ...
}

computeExpirationForFiber:

//为fiber对象计算expirationTime
export function computeExpirationForFiber(
  currentTime: ExpirationTime,
  fiber: Fiber,
  suspenseConfig: null | SuspenseConfig,
): ExpirationTime {
  ...
  // Compute an expiration time based on the Scheduler priority.
    switch (priorityLevel) {
      case ImmediatePriority:
        expirationTime = Sync;
        break;
      case UserBlockingPriority:
        // TODO: Rename this to computeUserBlockingExpiration
        //一个是计算交互事件(如点击)的过期时间
        expirationTime = computeInteractiveExpiration(currentTime);
        break;
      case NormalPriority:
      case LowPriority: // TODO: Handle LowPriority
        // TODO: Rename this to... something better.
        //一个是计算异步更新的过期时间
        expirationTime = computeAsyncExpiration(currentTime);
        break;
      case IdlePriority:
        expirationTime = Never;
        break;
      default:
        invariant(false, 'Expected a valid priority level');
    }
  ...
}

我们可以看到有两个计算expirationTime的方法,分别为computeInteractiveExpiration()和computeAsyncExpiration() 先看下computeAsyncExpiration()


三、computeAsyncExpiration()
作用:

返回低优先级(普通异步更新)的expirationTime(过期时间)

源码:

//低权限的过期时间
export const LOW_PRIORITY_EXPIRATION = 5000;
export const LOW_PRIORITY_BATCH_SIZE = 250;
//普通的异步的expirationTime
export function computeAsyncExpiration(
  currentTime: ExpirationTime,
): ExpirationTime {
  return computeExpirationBucket(
    currentTime,
    //5000
    LOW_PRIORITY_EXPIRATION,
    //250
    LOW_PRIORITY_BATCH_SIZE,
  );
}

解析:

currentTime先按下不表,LOW_PRIORITY_EXPIRATION即5000,LOW_PRIORITY_BATCH_SIZE 即250,注意它的名字LOW_PRIORITY_BATCH_SIZE ,下面会提到


四、computeExpirationBucket()
作用:
计算过期时间

源码:

//1073741823
export const Sync = MAX_SIGNED_31_BIT_INT;
//1073741822
export const Batched = Sync - 1;

const UNIT_SIZE = 10;
//1073741821
const MAGIC_NUMBER_OFFSET = Batched - 1;

function ceiling(num: number, precision: number): number {
  return (((num / precision) | 0) + 1) * precision;
}

//计算过期时间
function computeExpirationBucket(
  currentTime,
  expirationInMs,
  bucketSizeMs,
): ExpirationTime {
  return (
    //1073741821
    MAGIC_NUMBER_OFFSET -
    ceiling(
      //   1073741821-currentTime+(high 150 或者 low 5000  /10)  ,
      MAGIC_NUMBER_OFFSET - currentTime + expirationInMs / UNIT_SIZE,
      //(high 100 或者 low 250  /10 )
      bucketSizeMs / UNIT_SIZE,
    )
  );
}

解析:

(1)MAX_SIGNED_31_BIT_INT

// Max 31 bit integer. The max integer size in V8 for 32-bit systems.
// Math.pow(2, 30) - 1
// 0b111111111111111111111111111111
//整型最大数值,是V8中针对32位系统所设置的最大值
export default 1073741823;

(2)| 0的意思是取整

console.log(16/3 |0) //5

(3)根据computeExpirationBucket()里面的公式,计算下异步更新的过期时间:

   //low 情况
  1073741821-ceiling(1073741821-currentTime+500,25)

  1073741821-((((1073741821-currentTime+500) / 25) | 0) + 1) * 25

  1073741821-((1073741821/25-currentTime/25+20 | 0) + 1) * 25

  1073741821-((1073741821/25-currentTime/25+20*25/25 | 0) + 1) * 25

  1073741821-((1073741821-currentTime+500)/25 | 0)*25 - 25

  1073741796-((1073741821-currentTime+500)/25 | 0)*25

  1073741796-((1073742321-currentTime)/25 | 0)*25
  //======我们直接取最后四位来探索规律===================
  1796-((2321-currentTime)/25 | 0)*25
  //假设 currentTime 是 2000
  1796-(2321- 2000 /25 | 0)*25 //1796-300
  //currentTime是2010
  1796-(311/25 | 0)*25 //1796-300
  //currentTime是2024
  1796-(311/25 | 0)*25 //1796-275
  //currentTime是2025
  1796-(311/25 | 0)*25 //1796-275

可以看到,低优先的过期时间间隔是25ms 同理,高优先级的过期时间间隔是10ms

  //high 情况
  1073741821-ceiling(1073741821-currentTime+15,10)

**也就是说,React低优先级update的expirationTime间隔是25ms, React让两个相近(25ms内)的update得到相同的expirationTime,目的就是让这两个update自动合并成一个Update,从而达到批量更新的目的,就像LOW_PRIORITY_BATCH_SIZE的名字一样,自动合并批量更新。** 想象一下,开发者不停地使用setState()更新ReactApp,如果不把相近的update合并的话,会严重影响性能,就像提到的doubleBuffer一样,React为提高性能,考虑得非常全面!

原文:https://segmentfault.com/a/1190000020248630

链接: https://www.fly63.com/article/detial/5067

Js中的 forEach 源码

在日常 Coding 中,码农们肯定少不了对数组的操作,其中很常用的一个操作就是对数组进行遍历,查看数组中的元素,然后一顿操作猛如虎。今天暂且简单地说说在 JavaScript 中 forEach。

微信小程序代码源码案例大全

克隆项目代码到本地(git应该都要会哈,现在源码几乎都会放github上,会git才方便,不会的可以自学一下哦,不会的也没关系,gitHub上也提供直接下载的链接);打开微信开发者工具;

Node 集群源码初探

随着这些模块逐渐完善, Nodejs 在服务端的使用场景也越来越丰富,如果你仅仅是因为JS 这个后缀而注意到它的话, 那么我希望你能暂停脚步,好好了解一下这门年轻的语言,相信它会给你带来惊喜

Vue源码之实例方法

在 Vue 内部,有一段这样的代码:上面5个函数的作用是在Vue的原型上面挂载方法。initMixin 函数;可以看到在 initMixin 方法中,实现了一系列的初始化操作,包括生命周期流程以及响应式系统流程的启动

vue源码解析:nextTick

nextTick的使用:vue中dom的更像并不是实时的,当数据改变后,vue会把渲染watcher添加到异步队列,异步执行,同步代码执行完成后再统一修改dom,我们看下面的代码。

React源码解析之ReactDOM.render()

React更新的方式有三种:(1)ReactDOM.render() || hydrate(ReactDOMServer渲染)(2)setState(3)forceUpdate;接下来,我们就来看下ReactDOM.render()源码

扒开V8引擎的源码,我找到了你们想要的前端算法

算法对于前端工程师来说总有一层神秘色彩,这篇文章通过解读V8源码,带你探索 Array.prototype.sort 函数下的算法实现。来,先把你用过的和听说过的排序算法都列出来:

jQuery源码之extend的实现

extend是jQuery中一个比较核心的代码,如果有查看jQuery的源码的话,就会发现jQuery在多处调用了extend方法。作用:对任意对象进行扩;’扩展某个实例对象

vuex源码:state及strict属性

state也就是vuex里的值,也即是整个vuex的状态,而strict和state的设置有关,如果设置strict为true,那么不能直接修改state里的值,只能通过mutation来设置

webpack 源码从零开始:apable模型

最近在看webpack的源码,发现有个比较头疼的点是:代码看起来非常跳跃,往往看不到几行就插入一段新内容,为了理解又不得不先学习相关的前置知识。层层嵌套之后,发现最基础的还是tapable模型,因此先对这部分的内容做一个介绍。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!