React调度

React 调度

相关阅读

深入理解 scheduler 原理 https://mp.weixin.qq.com/s/0vomFnPPNb27E76LBIQcsA

前言

React可以运行在node环境和浏览器环境中，在不同环境下实现requestHostCallback等函数采用不同的方式，在node下采用setTimeout实现任务的及时调用。

调度的实现

调度中心比较重要的函数在SchedulerHostConfig.default.js中，该文件导出了8个函数

export let requestHostCallback;//请求及时回调 
export let cancelHostCallback;
export let requestHostTimeout;
export let cancelHostTimeout;
export let shouldYieldToHost;
export let requestPaint;
export let getCurrentTime;
export let forceFrameRate;

调度相关

请求或取消调度，用于通知消息请求调用或者注册异步任务等待调用

• requestHostCallback

  requestHostCallback = function(callback) {
  scheduledHostCallback = callback;
  if (!isMessageLoopRunning) {
    isMessageLoopRunning = true;
    port.postMessage(null);
  }
  };

• cancelHostCallback

  requestHostCallback = function(callback) {
  scheduledHostCallback = null;
  };

• requestHostTimeout

  requestHostTimeout = function(callback, ms) {
  taskTimeoutID = setTimeout(() => {
    callback(getCurrentTime());
  }, ms);
  };

• cancelHostTimeout

  cancelHostTimeout = function() {
  clearTimeout(taskTimeoutID);
  taskTimeoutID = -1;
  };

  ScheduleCallback注册任务