React调度为何绕过requestIdleCallback

导语：

React是一个强大的JavaScript库，用于构建交互式用户界面。它使用一种称为“调度”的机制来管理组件更新。调度程序决定何时重新渲染组件，以便在不影响性能的情况下保持UI的响应性。

在React中，调度程序使用requestIdleCallback API来安排空闲时间任务。requestIdleCallback是一个浏览器API，允许开发人员在浏览器空闲时安排任务。这有助于确保React应用程序在不影响用户体验的情况下保持流畅性。

但是，React团队最近宣布，他们正在从调度程序中移除requestIdleCallback。这引起了社区的广泛讨论，许多人想知道为什么React团队会做出这样的决定。

React为何不使用requestIdleCallback？

React团队给出的主要原因是，requestIdleCallback并不是一个可靠的API。它可能会受到浏览器扩展、防病毒软件和其他因素的影响。此外，requestIdleCallback并不是在所有浏览器中都可用。

另一个原因是，requestIdleCallback无法保证任务的执行顺序。这可能会导致组件更新的顺序不一致，从而导致UI出现问题。

最后，React团队认为，他们可以通过自己实现调度程序来获得更好的性能。他们已经开发了一个新的调度程序，称为“Concurrent Mode”。Concurrent Mode允许React同时调度多个任务，从而提高了应用程序的性能。

React的新调度程序：Concurrent Mode

Concurrent Mode是React的一个新特性，它允许React同时调度多个任务。这有助于提高应用程序的性能，因为React可以利用浏览器的空闲时间来执行任务。

Concurrent Mode的工作原理是，它将更新任务分成多个阶段。在每个阶段，React都会更新一部分组件。这有助于防止UI出现卡顿。

Concurrent Mode还支持一种称为“Suspense”的新特性。Suspense允许React在等待数据时渲染占位符。这有助于防止UI出现闪烁。

requestIdleCallback的适用场景

尽管React已经从调度程序中移除requestIdleCallback，但requestIdleCallback仍然是一个有用的API。它可以用于安排各种任务，例如：

• 滚动事件处理程序
• 调整窗口大小事件处理程序
• 动画
• 加载新资源

如果需要在浏览器空闲时执行任务，则可以使用requestIdleCallback。

结论

React团队从调度程序中移除requestIdleCallback是有原因的。requestIdleCallback并不是一个可靠的API，它可能会受到浏览器扩展、防病毒软件和其他因素的影响。此外，requestIdleCallback并不是在所有浏览器中都可用。

React的新调度程序Concurrent Mode允许React同时调度多个任务，从而提高了应用程序的性能。Concurrent Mode还支持Suspense，它允许React在等待数据时渲染占位符。

尽管React已经从调度程序中移除requestIdleCallback，但requestIdleCallback仍然是一个有用的API。它可以用于安排各种任务，例如滚动事件处理程序、调整窗口大小事件处理程序、动画和加载新资源。