React利用scheduler思想实现任务的打断与恢复

更新时间：2024年03月14日 14:21:23 作者：程序员小洛

这篇文章主要为大家详细介绍了React如何利用scheduler思想实现任务的打断与恢复,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下

前言

react 16.8版本引入了fiber架构,在fiber架构的支持下，实现了并发渲染。

在16.8版本以前，在state改变后，经过一系列的流程，最终会进入diff，在diff的时候，会采用DFS进行遍历虚拟dom树，这个遍历过程是一口气完成的,当我们的应用很复杂，元素比较多的时候，diff的过程往往会花费很长的时间，主线程此时正在进行diif比较，如果diff事件超过16.6ms,会造成浏览器掉帧，如果时间很长，会造成页面卡顿。

在react18版本，默认开启了并发模式，开发者可以使用useTransition hook手动开并发模式，在并发模式下，diff过程是可中断的，如果diff时间超过5ms,那么React会中断此次diff,会交出主线程的使用权，从而让浏览器去渲染，当有空闲的时间的时候，会利用时间循环机制恢复diif，从而提高大型应用的用户体验。并发模式下任务的打断与恢复机制是scheduler提供的，我们今天将探讨下，如何利用React scheduler打断一个耗时任务，例如从0累加到2000万。

scheduler

从0累加到2000万

const work = () => {
  for(let currentIndex = 0; currentIndex <  totalCount; currentIndex++) {
    sum += currentIndex
  }
}

火焰图

我们看上面的火焰图，这个任务执行了近100ms,左右，超过了浏览器的一帧16.6ms，当一个任务执行时间超过50ms时，浏览器会任务这个任务时长任务，超过50ms的部分，火焰图会标记为红色。

既然同步遍历会造成浏览器掉帧，那么我们有什么办法做到不让浏览器掉帧呢？答案就是将这2000万个累加操作分成很小的task，然后让task作为一个工作单元去执行，当执行到一定的数量的时候，如果运行时间超过了我们规定的时间，那么我们中断这个任务，在中断的时候判断下还有没有任务要执行，如果有任务要执行，那么我们将这个任务执行函数放入事件循环中，等下一次事件循环的时候，取出来执行这个任务。

如何让for循环中断呢？我们只需要在遍历的时候判断当前的索引和数据总数以及抽象出一个方法，判断应不应该终止（比如：我规定让task累计运行5ms,当5ms用完的时候，就应该终止）。

const getCurrentTime = () => Date.now();

// 调度应该被中断吗
function shouldYieldToHost() {
  const timeElapsed = getCurrentTime() - startTime;
  // 如果当前时间减去开始时间小于 5ms, 那么继续调度
  if (timeElapsed < 5) {
    return false;
  }
  return true;
}

const work = () => {
  for(let currentIndex = 0; currentIndex <  totalCount && !shouldYieldToHost(); currentIndex++) {
    sum += currentIndex
  }
}

如何判断有没有任务需要恢复呢？我们将work函数放在workloop函数中去执行，当work函数终止的时候，调用栈回到workloop函数时，判断currentIndex < totalCount,如果小于，那么我们 reutrn true,告诉调用workloop的函数还有任务需要执行，需要将任务执行函数放到异步任务中，等下一次事件循环的时候取出来执行。

const flushWork = () => {
  return workLoop()
}

const workLoop = () => {
  while(true) {
      try {
        work()
      } catch (error) {
      }finally {
        if(currentIndex < totalCount) {
          return true
        } else {
          return false
        }
      }
  }
}

任务恢复机制，利用事件循环原理

const performWorkUntilDeadline = () => {
    const currentTime = getCurrentTime();
    startTime = currentTime;
    const hasTimeRemaining = true; // 有剩余时间

    let hasMoreWork = true;
    try {
      // 这里执行的函数就是 flushWork，flushWork 如果返回一个 true 那么表示还有任务
      // 这里是 workLoop 循环里 return 的， 如果 return true, 那么表示还有剩余的任务，只是时间用完了，被中断了
       hasMoreWork = flushWork();
    } finally {
      //如果还有剩余任务，调用schedulePerformWorkUntilDeadline将performWorkUntilDeadline 放入到异步任务里，等下一次事件循环被调用。
      if (hasMoreWork) {
        schedulePerformWorkUntilDeadline();
      } else {
      }
    }
  


let schedulePerformWorkUntilDeadline;
// react 中调度的优先级  setImmediate > MessageChannel > setTimeout
if (typeof localSetImmediate === 'function') {
  schedulePerformWorkUntilDeadline = () => {
    localSetImmediate(performWorkUntilDeadline);
  };
} else if (typeof MessageChannel !== 'undefined') {
  const channel = new MessageChannel();
  const port = channel.port2;
  channel.port1.onmessage = performWorkUntilDeadline;
  schedulePerformWorkUntilDeadline = () => {
    port.postMessage(null);
  };
} else {
  schedulePerformWorkUntilDeadline = () => {
    localSetTimeout(performWorkUntilDeadline, 0);
  };
}

完整实现代码

const localSetTimeout = typeof setTimeout === 'function' ? setTimeout : null;
const localClearTimeout =
  typeof clearTimeout === 'function' ? clearTimeout : null;
const localSetImmediate =
  typeof setImmediate !== 'undefined' ? setImmediate : null; 


let startTime; // 记录开始时间
let sum = 0
const currentIndex = 0;  // 当前遍历的索引
const totalCount = 20000000  

const getCurrentTime = () => Date.now();

// 调度应该被中断吗
function shouldYieldToHost() {
  const timeElapsed = getCurrentTime() - startTime;
  // 如果当前时间减去开始时间小于 5ms, 那么继续调度
  if (timeElapsed < 5) {
    return false;
  }
  return true;
}

const performWorkUntilDeadline = () => {
    const currentTime = getCurrentTime();
    startTime = currentTime;
    const hasTimeRemaining = true; // 有剩余时间

    let hasMoreWork = true;
    try {
      // 这里执行的函数就是 flushWork，flushWork 如果返回一个 true 那么表示还有任务
      // 这里的 是 workLoop 循环里 return 的， 如果 return true, 那么表示还有剩余的任务，只是时间用完了，被中断了
       hasMoreWork = flushWork();
    } finally {
      if (hasMoreWork) {
        schedulePerformWorkUntilDeadline();
      } else {
      }
    }
  
};

let schedulePerformWorkUntilDeadline;
// react 中调度的优先级  setImmediate > MessageChannel > setTimeout
if (typeof localSetImmediate === 'function') {
  schedulePerformWorkUntilDeadline = () => {
    localSetImmediate(performWorkUntilDeadline);
  };
} else if (typeof MessageChannel !== 'undefined') {
  const channel = new MessageChannel();
  const port = channel.port2;
  channel.port1.onmessage = performWorkUntilDeadline;
  schedulePerformWorkUntilDeadline = () => {
    port.postMessage(null);
  };
} else {
  schedulePerformWorkUntilDeadline = () => {
    localSetTimeout(performWorkUntilDeadline, 0);
  };
}

const flushWork = () => {
  return workLoop()
}

const workLoop = () => {
  while(true) {
      try {
        work()
      } catch (error) {
      }finally {
        if(currentIndex < totalCount) {
          return true
        } else {
          return false
        }
      }
  }
}

const work = () => {
  for(let currentIndex = 0; currentIndex <  totalCount && !shouldYieldToHost(); currentIndex++) {
    sum += currentIndex
  }
}

performWorkUntilDeadline()

火焰图

我们可以看到，上面执行近100ms的任务被分成了很多很多小任务，其中每个小任务执行的时间是5ms左右。这样我们就完成了利用react scheduler实现任务的打断与恢复机制。

以上就是React利用scheduler思想实现任务的打断与恢复的详细内容，更多关于React scheduler任务的打断与恢复的资料请关注程序员之家其它相关文章！

您可能感兴趣的文章:

React中的useEffect四种用法分享
这篇文章主要给大家分享React中的useEffect四种用法，useEffect中触发更新，重复的 useEffect，依赖值触发回调，useEffect 的返回值，通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-07-07
React?forwardRef?用法案例分析
这篇文章主要介绍了React forwardRef用法,forwardRef允许你的组件使用ref将一个DOM节点暴露给父组件，本文结合案例分析给大家讲解的非常详细，需要的朋友可以参考下
2023-06-06
react的context和props详解
这篇文章主要介绍了react的context和props的相关资料，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
2021-11-11
react+ts实现简单jira项目的最佳实践记录
这篇文章主要介绍了react+ts实现简单jira项目，本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-07-07
React 并发功能体验(前端的并发模式)
React 是由 Facebook 软件工程师 Jordan Walke 创建，React 的第一个版本在七年前问世，现在，Facebook 负责维护,本文给大家介绍React 并发功能体验前端并发模式的问题，感兴趣的朋友跟随小编一起看看吧
2021-07-07
react如何将字符串转义成html语句
这篇文章主要介绍了react如何将字符串转义成html语句问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
React?组件性能最佳优化实践分享
这篇文章主要介绍了React组件性能最佳优化实践分享，React组件性能优化的核心是减少渲染真实DOM节点的频率，减少Virtual?DOM比对的频率，更多相关内容需要的朋友可以参考一下
2022-09-09
基于React路由跳转的几种方式
这篇文章主要介绍了React路由跳转的几种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
详解react-webpack2-热模块替换[HMR]
这篇文章主要介绍了详解react-webpack2-热模块替换[HMR]，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
react 报错Module build failed: Browserslis
这篇文章主要介绍了react 报错Module build failed: BrowserslistError: Unknown browser query `dead`问题的解决方法,需要的朋友可以参考下
2023-06-06