Fancy Front End Fancy Front End
  • 开始上手
  • 基础
  • 调度器(Scheduler)
  • 更新器(Updater)
  • 渲染器(Render)
  • 更新周期
  • hooks 原理
  • 总结
  • 📙 React源码漂流记
  • 开始上手
  • 基础
  • reactivity
  • runtime-core
  • runtime-dom
  • Awesome Web
  • Awesome NodeJS
话题
  • 导航
  • Q&A
  • 幻灯片
  • 关于
  • 分类
  • 标签
  • 归档
博客 (opens new window)
GitHub (opens new window)

Jonsam NG

让有意义的事变得有意思,让有意思的事变得有意义
  • 开始上手
  • 基础
  • 调度器(Scheduler)
  • 更新器(Updater)
  • 渲染器(Render)
  • 更新周期
  • hooks 原理
  • 总结
  • 📙 React源码漂流记
  • 开始上手
  • 基础
  • reactivity
  • runtime-core
  • runtime-dom
  • Awesome Web
  • Awesome NodeJS
话题
  • 导航
  • Q&A
  • 幻灯片
  • 关于
  • 分类
  • 标签
  • 归档
博客 (opens new window)
GitHub (opens new window)
  • 开始上手
  • plan 计划
  • 基础

  • 调和(Reconciliation)

  • 调度器(Scheduler)

    • 开始上手
      • 参考资料
    • scheduleCallback与调度任务
    • schedulerHostConfig
    • scheduler 顶层 API
  • 更新器(Updater)

  • 渲染器(Render)

  • hooks原理

  • 总结

  • React源码漂流记

  • react
  • 调度器(Scheduler)
jonsam
2022-04-14
目录

开始上手

上一章节我们主要讲到调和器的作用和原理,详解分析了 fiber 的创建和更新过程、expirationTime 优先级机制等,所谓调和器,就是在 react 的更新渲染的生命周期中国起到了调和的作用,它不仅是整个 react 内核协同工作的管理者,也是 react 整个更新周期的基础。在调和器的调和作用下,维护者 react 整体的更新周期,同时促进更新器在组件维度上去完成组件创建、更新、渲染和卸载的任务。

那么为什么需要调度器呢?我们知道,调和器虽然在宏观上掌控着更新的创建和回调,但是如何去调度这个更新任务的执行还是得靠调度器的工作。因此,可以说调度器的作用就是帮助调和器和包装和管理更新,在调度器里,我们称之为任务,调度器维护者基于优先级机制的更新任务列表,并且按照一定的顺序交给调和器去执行,这些被调度器回调的更新被调和器进一步执行并提交,最终完成 FiberTree 的创建交给渲染器去渲染。

从一方面看,调度器完成者任务调度的工作,从另一方面看,任务的调度本质上也是对资源的调度。如果缺少有效的资源调度,就无法把本身有效的资源充分的发挥其作用来高效的完成页面的渲染和更新任务。从本质上来看,页面的渲染就是一个事件循环,各种轻重缓急的事件任务都需要耗费资源去完成,这样看看,调度器对于提升资源的利用效率就显得至关重要了。

调度器部分的源码在 scheduler 包中 Scheduler.js 文件中,我们先来看看 scheduler 中会有哪些内容:

export {
  // 调度优先级
  ImmediatePriority as unstable_ImmediatePriority,
  UserBlockingPriority as unstable_UserBlockingPriority,
  NormalPriority as unstable_NormalPriority,
  IdlePriority as unstable_IdlePriority,
  LowPriority as unstable_LowPriority,
  // 以某种优先级执行回调
  unstable_runWithPriority,
  unstable_next,
  // 调度一个回调
  unstable_scheduleCallback,
  // 取消一个回调
  unstable_cancelCallback,
  unstable_wrapCallback,
  // 获得当前正在被调度的回调的优先级
  unstable_getCurrentPriorityLevel,
  unstable_shouldYield,
  unstable_requestPaint,
  unstable_continueExecution,
  unstable_pauseExecution,
  unstable_getFirstCallbackNode,
  getCurrentTime as unstable_now,
  forceFrameRate as unstable_forceFrameRate,
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 参考资料

  • 一篇长文帮你彻底搞懂 React 的调度机制原理 (opens new window)
  • 浏览器的 16ms 渲染帧 (opens new window)
编辑 (opens new window)
上次更新: 2022/04/15, 00:23:56
Lane 与优先级
scheduleCallback与调度任务

← Lane 与优先级 scheduleCallback与调度任务→

最近更新
01
渲染原理之组件结构与 JSX 编译
09-07
02
计划跟踪
09-06
03
开始上手
09-06
更多文章>
Theme by Vdoing | Copyright © 2022-2022 Fancy Front End | Made by Jonsam by ❤
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式