返回

React 源码浅析（六）：到期时间的计算规则

前端

引言

React 将到期时间划分为两大类：异步任务到期时间和交互动作的到期时间。在深入探讨这些到期时间的计算规则之前，让我们先了解一些重要的概念。

1. 时间单位

React 的到期时间并非与系统时间（毫秒）一一对应。对于低优先级异步任务，相差不到 250 毫秒的两个时间间隔（相当于 25 个单位的到期时间）会被设置为同一个到期时间。

2. 异步任务到期时间

异步任务的到期时间由两个因素决定：任务的优先级和任务队列的当前长度。

  • 优先级： React 将异步任务划分为四种优先级：

    • 低优先级
    • 普通优先级
    • 高优先级
    • Immediate

  • 队列长度： 任务队列中等待执行的异步任务数量。

对于低优先级任务，React 使用以下公式计算到期时间：

到期时间 = 当前时间 + 队列长度 * 25 毫秒

对于普通优先级及以上的任务，React 会将到期时间提前，以确保它们在合理的时间内被执行。

3. 交互动作的到期时间

交互动作的到期时间与用户交互的类型有关。

  • 单击： 100 毫秒
  • 移动： 200 毫秒
  • 滚动： 250 毫秒

实例

假设我们在一个 React 应用程序中有一个低优先级异步任务。假设任务队列中有 5 个正在等待执行的任务。

使用上述公式，我们可以计算出该异步任务的到期时间：

到期时间 = 当前时间 + 队列长度 * 25 毫秒
到期时间 = 当前时间 + 5 * 25 毫秒
到期时间 = 当前时间 + 125 毫秒

这表明该异步任务将在当前时间后 125 毫秒被执行。

结论

理解 React 的到期时间计算规则对于构建响应迅速且高效的应用程序至关重要。通过平衡异步任务的优先级和交互动作的灵敏度，React 能够确保应用程序提供流畅的用户体验。

相关文章

**