React16源码: React中的异步调度scheduler模块以及时间片源码实现

React Scheduler

1 ) 概述

• react当中的异步调度，称为 React Scheduler
• 发布成单独的一个 npm 包就叫做 scheduler
• 这个包它做了什么？
  • A. 首先它维护时间片
  • B. 然后模拟 requestIdleCallback 这个API
    • 因为现在浏览器的支持不是特别的多
    • 所以在浏览当中只是去模拟了一个这个API，而不是直接使用这个API
    • 因为需要考虑到浏览器兼容性
    • 这个API的作用
      • 调用这个API传入一个回调之后，这个API会等到浏览器把它的一些主要任务执行完了
      • 当它有空闲的时间的时候，再回来调用这个回调
    • 相对于 requestAnimationFrame 来说，它的优先级会低很多
    • 它是等浏览器器要做的事情做完了之后，再回来调这个回调
    • 而 requestAnimationFrame 是浏览器要渲染当前帧的时候，调用这个回调
  • C. 调度列表和进行一个超时的判断
• 关于时间片
  • 不管是在浏览器还是在App当中，要给用户很流畅的一个感觉的时候
  • 至少要保证在一秒钟之内要渲染30帧以上
  • 现在的一些高刷新率的浏览器，可能会要求在60帧以上，甚至还有更高的，比如，120帧
  • 这个帧数就是我们1秒钟，页面要重新渲染刷新多少次
  • 它并不是说我一秒钟之内刷新30次，满足就行了。
  • 比如前面的半秒钟只刷新了一次，后面的半秒钟刷新了二十九次，这个也是不行的
  • 这个给用户的感觉，就是前面这半秒钟会特别的卡就一动不动，然后后面又变得流畅
  • 所以，它的要求还需要是平均的每33毫秒要刷新1帧，要保持这个频率
  • 浏览器必须自己去渲染这些动画，要每1帧里面有固定的时间去渲染这个动画
  • 在这里举个例子，比如说整个应用所有的js的操作，都是通过 react 来实现的
  • 而浏览器有一个一直在更新的动画, 浏览器渲染这个动画如果要11毫秒
  • 那么给每一帧的, 就是把一秒钟分成了30帧之后，每一帧是33毫秒
  • 这个33毫秒里面的11毫秒是必须要留给浏览器去渲染这个动画的, 才能让这个动画看起来是流畅的
  • 而在这个时候留给react去渲染它的应用更新的时候，每一帧里面就只有22毫秒
  • 如果react它在这一帧里面的一个更新，它需要渲染的时间很长，比如说35毫秒
  • 那这个时候，我们一帧的时间就全部给react渲染给占掉了
  • 因为 js 引擎是单线程的, 如果react在一直在执行，浏览器它就没有机会去获得运行权
  • 就没有机会去刷新它的一个动画, 这时候，不仅把一帧的时间占完了
  • 这样还不够，还要去下一帧里面借用一点时间，那么这个时间用完之后
  • 浏览器要去更新动画，如果这一帧里面我们就用掉了13毫秒，剩下的时间就只剩下20毫秒
  • 那么这20毫秒，又可能要运行一部分react的更新，然后再去浏览器的一个渲染
  • 这就会导致整个动画变得卡顿起来了
  • 这就是 React Scheduler 它的一个目的, 为了保证react它去执行更新的这个时间
  • 不超过在浏览器的每一帧里面特定的时间，它希望留给浏览器去刷新动画，或者是响应用户输入的反馈的时候
  • 每一帧里面有足够的时间

2 ）时间片源码

• 时间片源码在 packages/scheduler 这个包里面，是一个单独的模块，单独发布到 npm 上
• 在 ReactFiberScheduler.js 里面，哪个地方用到它呢?
  • 在 requestWork 函数里面，如果 expirationTime 异步的，就会调用 scheduleCallbackWithExpirationTime

    function scheduleCallbackWithExpirationTime(
      root: FiberRoot,
      expirationTime: ExpirationTime,
    ) {
      if (callbackExpirationTime !== NoWork) {
        // A callback is already scheduled. Check its expiration time (timeout).
        if (expirationTime > callbackExpirationTime) {
          // Existing callback has sufficient timeout. Exit.
          return;
        } else {
          if (callbackID !== null) {
            // Existing callback has insufficient timeout. Cancel and schedule a
            // new one.
            cancelDeferredCallback(callbackID);
          }
        }
        // The request callback timer is already running. Don't start a new one.
      } else {
        startRequestCallbackTimer();
      }
    
      callbackExpirationTime = expirationTime;
      const currentMs = now() - originalStartTimeMs;
      const expirationTimeMs = expirationTimeToMs(expirationTime);
      const timeout = expirationTimeMs - currentMs;
      callbackID = scheduleDeferredCallback(performAsyncWork, {timeout});
    }
    

    • 全局变量 callbackExpirationTime 对应的是 上一次调用 React Scheduler 去申请了一个callback
    • 这个callback 也会有一个 expirationTime, 因为是异步调度，所以会有一个 expirationTime 传进来
    • 如果这个 callbackExpirationTime !== NoWork 代表之前有一个callback在执行了
    • 这边就会判断当前的 expirationTime 是否比之前回调中的那个要大
    • 如果大，说明当前的这个的优先级要低，这个时候就直接return了不执行
    • 因为它优先级更低，我们肯定要执行优先级更高的那个，调用 cancelDeferredCallback 把之前的 cancel 掉
    • startRequestCallbackTimer 这个函数跳过，不涉及主流程，涉及DEV Tool 相关
    • 接着更新一系列的变量
      • 更新 callbackExpirationTime
      • 计算出 timeout
    • 最后调用 scheduleDeferredCallback 这个方法来自于 ReactFiberHostConfig.js
      • 如果直接查找 这个文件，发现基本上没有什么内容, 是因为 React对于打包工具的配置，进行了文件名的映射
      • 它实际映射的是 eact-reconciler/src/forks/ReactFiberHostConfig.dom.js

        export * from 'react-dom/src/client/ReactDOMHostConfig';
        

      • 发现里面就一行代码，找到对应的 ReactDOMHostConfig.js 文件，搜索 scheduleDeferredCallback 方法

        export {
          unstable_scheduleCallback as scheduleDeferredCallback,
        } from 'scheduler';
        

        • 可追溯到 这个方法来自于 scheduler 包
        • 这个方法涉及比较多，先跳过
      • callbackID = scheduleDeferredCallback(performAsyncWork, {timeout});
    • 它最后返回 一个 callbackID, 这个id用于后期 cancel 的标识，cancelDeferredCallback(callbackID);
      • 这里之前也说了，如果新的任务优先级更高，需要把老的取消，再调用新的callback
    • 而里面的参数 performAsyncWork
      • 在 requestWork 中，当 expirationTime === Sync 时，调用的也是 performSyncWork 这个是同步的
      • 而如果是异步，则调用 scheduleCallbackWithExpirationTime 函数，最终调用的是这里的 performAsyncWork
      • 所以，这两个是对应的，同步和异步