剖析 React 源码 Scheduler（三）：深入了解 React 的调度算法实现

前言

在上一节中，我们详细介绍了在浏览器中存在的 requestAnimationFrame 和 requestIdleCallback 两种调度方法，以及 React 中是如何使用这两个方法来实现任务调度的。在本节中，我们将深入剖析 React 的调度算法实现，揭秘其调度机制的运作原理。

React 的调度算法

React 的调度算法是基于这样一个思想：在浏览器中，存在一个事件循环，它不断地轮询任务队列，并执行队列中的任务。而 React 的调度算法就是通过管理任务队列，来决定哪些任务应该被执行，以及何时执行。

React 任务队列的管理

React 的任务队列是一个先进先出的队列，它存储了需要被执行的任务。这些任务可以是更新任务、渲染任务、事件处理任务等。

当一个任务被加入到任务队列中时，它会根据其优先级被分配一个位置。优先级高的任务会排在队列的前面，优先级低的任务会排在队列的后面。

React 任务的优先级

React 任务的优先级分为五种：

• Immediate（立即） ：这种优先级的任务是最高级别的任务，它们应该立即被执行。
• UserBlocking（用户阻塞） ：这种优先级的任务是高优先级的任务，它们应该在浏览器下一次绘制之前被执行。
• Normal（普通） ：这种优先级的任务是普通级别的任务，它们应该在浏览器空闲时被执行。
• Idle（空闲） ：这种优先级的任务是低优先级的任务，它们应该在浏览器非常空闲时被执行。
• Offscreen（离屏） ：这种优先级的任务是最低级别的任务，它们应该在浏览器完全空闲时被执行。

React 调度方法的选择

React 会根据浏览器环境来选择合适的调度方法。在支持 requestIdleCallback 的浏览器中，React 会使用 requestIdleCallback 来调度任务。而在不支持 requestIdleCallback 的浏览器中，React 会使用 requestAnimationFrame 来调度任务。

小结

在本文中，我们详细介绍了 React 的调度算法，包括 React 的任务队列管理、任务的优先级以及调度方法的选择。通过了解 React 的调度算法，我们可以更好地理解 React 的工作方式并进行相应的性能优化。