React16源码: React中的schedule调度整体流程

schedule调度的整体流程

  • React Fiber Scheduler 是 react16 最核心的一部分,这块在 react-reconciler 这个包中
  • 这个包的核心是 fiber reconciler,也即是 fiber 结构
  • fiber的结构帮助我们把react整个树的应用,更新的流程,能够拆成每一个fibrer对象为单元的一个更新的流程
  • 这种单元的形式把更新拆分出来之后,给每个不同的任务提供一个优先级,以及我们在更新的过程当中,可以中断
  • 因为我们记录更新到了哪一个单元,中断了之后,可以过一会儿再回过头来,继续从这个单元开始,继续之前没有做完的更新
    • 在 react 16之前 setState 产生的更新,必须从头到尾更新完成,然后再执行之后的代码
    • 如果我们的整个应用树,它的节点非常多,整个更新会导致它占用的js的运行时间会非常的多
    • 让页面的其他的一些操作进入一个停滞的状态
    • 比如说,动画的刷新或者是我们在 inpput 里面输入内容的时候,可能产生卡顿的感觉
  • 所以,react 16之后,它的整体的更新流程是完全不一样的
    • 因为加入了中断,挂起,这样的功能,导致它的整个更新流程的调度变得非常的复杂
    • 整个源码体系,它每一个细节,每一个变量的具体作用,都是值得琢磨的
    • 理解它出于什么目的这么去设计,这时候才能深入整个react的更新体系中,这样才能慢慢理解

全局变量一览

  • 调度过程中的全局变量,基本上都在 react-reconciler/src/ReactFiberScheduler.js 这个js里面
    • https://github.com/facebook/react/blob/v16.6.3/packages/react-reconciler/src/ReactFiberScheduler.js
  • 这个js的代码是非常多的,它总共有两千五百行代码,而且注释不算多
  • 在这个文件里面,会存在着非常多的公共变量,就是说我们定义在这个文件的顶层的变量名
  • 就是说我们定义在这个文件顶层作用域上面的很多的变量,在很多方法里面,它们是被共享的
  • 这些公共变量对于去理解整个 schedule,它是非常重要的,因为它在很多方法里面都会有调用
    • 它什么时候调用,什么时候被修改成什么值,用来记录什么内容
    • 对于这些公共变量的理解,一方面来说比较的困难
    • 另外一方面来说,它非常的重要
    • 如果不能理解这些公共变量的作用,会导致看源码的时候,看到一些地方会变得毫无头绪

几个重点需要关注的变量

// Used to ensure computeUniqueAsyncExpiration is monotonically decreasing.
let lastUniqueAsyncExpiration: number = Sync - 1;let isWorking: boolean = false;// The next work in progress fiber that we're currently working on.
let nextUnitOfWork: Fiber | null = null;
let nextRoot: FiberRoot | null = null;
// The time at which we're currently rendering work.
let nextRenderExpirationTime: ExpirationTime = NoWork;
let nextLatestAbsoluteTimeoutMs: number = -1;
let nextRenderDidError: boolean = false;// The next fiber with an effect that we're currently committing.
let nextEffect: Fiber | null = null;let isCommitting: boolean = false;
let rootWithPendingPassiveEffects: FiberRoot | null = null;
let passiveEffectCallbackHandle: * = null;
let passiveEffectCallback: * = null;let legacyErrorBoundariesThatAlreadyFailed: Set<mixed> | null = null;// Used for performance tracking.
let interruptedBy: Fiber | null = null;let stashedWorkInProgressProperties;
let replayUnitOfWork;
let mayReplayFailedUnitOfWork;
let isReplayingFailedUnitOfWork;
let originalReplayError;
let rethrowOriginalError;
  • isWorking

    • commitRoot和renderRoot开始都会设置为true,然后在他们各自阶段结束的时候都重置为false
    • 用来标志是否当前有更新正在进行,不区分阶段
  • isCommitting

    • commitRoot开头设置为true,结束之后设置为false
    • 用来标志是否处于commit阶段
  • nextUnitOfWork

    • 用于记录render阶段Fiber树遍历过程中下一个需要执行的节点。
    • 在resetStack中分别被重置
    • 它只会指向workInProgress
  • nextRoot & nextRenderExpirationTime

    • 用于记录下一个将要渲染的root节点和下一个要渲染的任务的
  • nextEffect

    • 用于commit阶段记录firstEffect -> lastEffect链遍历过程中的每一个Fiber

下面是其他的一些全局变量

// Linked-list of roots
let firstScheduledRoot: FiberRoot | null = null;
let lastScheduledRoot: FiberRoot | null = null;let callbackExpirationTime: ExpirationTime = NoWork;
let callbackID: *;
let isRendering: boolean = false;
let nextFlushedRoot: FiberRoot | null = null;
let nextFlushedExpirationTime: ExpirationTime = NoWork;
let lowestPriorityPendingInteractiveExpirationTime: ExpirationTime = NoWork;
let hasUnhandledError: boolean = false;
let unhandledError: mixed | null = null;let isBatchingUpdates: boolean = false;
let isUnbatchingUpdates: boolean = false;let completedBatches: Array<Batch> | null = null;let originalStartTimeMs: number = now();
let currentRendererTime: ExpirationTime = msToExpirationTime(originalStartTimeMs,
);
let currentSchedulerTime: ExpirationTime = currentRendererTime;// Use these to prevent an infinite loop of nested updates
const NESTED_UPDATE_LIMIT = 50;
let nestedUpdateCount: number = 0;
let lastCommittedRootDuringThisBatch: FiberRoot | null = null;
  • firstScheduledRoot & lastScheduledRoot

    • 用于存放有任务的所有root的单链表结构
    • 在findHighestPriorityRoot用来检索优先级最高的root
    • 在addRootToSchedule中会修改
  • callbackExpirationTime & callbackID

    • 记录请求ReactScheduler的时候用的过期时间,如果在一次调度期间有新的调度请求进来了
    • 而且优先级更高,那么需要取消上一次请求,如果更低则无需再次请求调度。
    • callbackID是ReactScheduler返回的用于取消调度的 ID
  • isRendering

    • performWorkOnRoot开始设置为true,结束的时候设置为false
    • 表示进入渲染阶段,这是包含render和commit阶段的
  • nextFlushedRoot & nextFlushedExpirationTime

    • 用来标志下一个需要渲染的root和对应的expirtaionTime
  • deadline & deadlineDidExpire

    • deadline是ReactScheduler中返回的时间片调度信息对象
    • 用于记录是否时间片调度是否过期,在shouldYield根据deadline是否过期来设置
  • isBatchingUpdates & isUnbatchingUpdates & isBatchingInteractiveUpdates

    • batchedUpdates、unBatchedUpdates,deferredUpdates、interactiveUpdates等这些方法用来存储更新产生的上下文的变量
  • originalStartTimeMs

    • 固定值,js 加载完一开始计算的时间戳
  • currentRendererTime & currentSchedulerTime

    • 计算从页面加载到现在为止的毫秒数,后者会在isRendering === true的时候
    • 用作固定值返回,不然每次requestCurrentTime都会重新计算新的时间。
  • 以上,每一个全局变量给它拿出来,单独解释它是在什么地方被用到

  • 以及它是用来记录哪些东西,是在什么情况下,才会发挥了哪些作用

调度流程


1 )第一阶段

  • 在调用 ReactDOM.render, setState, forceUpdate,都会产生一个update
  • 产生update之后,进入 scheduleWork 进行调度
    • scheduleWork 第一步操作是 addRootToScheduler
    • 在一个rect应用当中,它不仅仅可能只存在一个 root 节点
    • 因为我们通过 ReactDOM.render 调用的时候,就会创建一个 root 节点
    • 如果调用多次 ReactDOM.render,就可以创建多个 root 节点
    • 这个时候, 整个应用中就会存在着多个react的节点
    • 在这些节点,可以单独在内部进行 setState,进行调度
    • 它们都会有独立的 updateQueen,有独立的一个 fiber tree 来进行应用的更新
    • 一个应用当中可能会存在多个root, 所以这个时候就要去维护一下
    • 因为,在同一时间可能有多个root会有更新存在, 所以有这么一个地方去维护它
    • 这就是 addRootToScheduler 的一个作用
  • addRootToScheduler 加入之后, 要先判断一下是否正在 render 阶段 或者 前后的root不同
    • 如果是,则调用 requestWork,就要开始进行工作了,如果不是,我们就要 return
    • 因为之前的任务可能正在做,或者处于目前这个阶段,不需要主动的再去调用一个 requestWork 来更新了
  • 关于 requestWork 它里面做了什么?
    • 它判断 expirationTime,它是否是 Sync
    • 计算 expirationTime 调用的是 computeExpirationForFiber
    • 这时候会根据 fiber 是否有 ConcurrentMode 的特性来计算 Sync 的 expirationTime 或者是异步的 expirationTime
    • 这个时候它最终会导致整体的一个更新模式的不同
    • 因为如果是 Sync 的模式代表着我们这个更新要立马进行执行,要立马更新到最终的 dom tree 上面
    • 所以我们调用的是 performSyncWork
    • 而如果它是一个 Async 模式的,那么说明它的优先级不是特别高,那么他会进入一个调度的流程,因为它可以不立即更新
    • 它本身的期望是在 expirationTime 结束之前,能够被更新完成就可以了, 所以它的优先级非常低,会进入到一整个调度的流程,即 scheduleCallbackWithExpirationTime

2 )下一阶段

  • 整个调度的流程 react 给它单独区分了一个包 packages/scheduler
    • 用蓝色的框给它圈起来,叫做 async schedule work
  • 这一部分就涉及到整个异步的调度的过程
    • 它利用的是浏览器当中一个较新的API叫做 requestIdleCallback, 能够让浏览器优先进行他自己的任务
    • 比如说更新动画,在每一帧有多余的时间的时候,它调用react给他设置了一个callback
    • 然后就可以去执行react一个更新,然后react会自己去记一个时
    • 在这个时间内,我可以执行我自己的工作
    • 如果这个时间内我的工作没有执行完,我要把javascript的运行的主动权交还给浏览器
    • 让浏览器去执行它新的一些动画的更新之类的,来让浏览器保证高优先级的任务能够被立即执行
    • 所以,这就是这个蓝色这一片区域的一个作用
  • 在这里面调用的一个方法叫做 scheduleDeferredCallback, 然后会有一个 callbackList
  • 因为可能多次调用这个方法去把 callback 设置进去
  • 然后在这里面,我们虽然想要使用 requestIdleCallback 这个API
  • 但是, 大部分浏览器还不支持, 浏览器的兼容性也不是特别好
  • 所以在react里面,它实现了自己的一个模拟 requestIdleCallback 的一个方式
    • 它通过 requestAnimationFramejs 的任务队列的原理来进行了一个模拟
  • 在调用 requestIdleCallback 之后,说明浏览器有空了,可以去执行react的更新了
    • 这就是我们加入到这里面的异步的更新任务,它的优先级比较低,浏览器有空的时候,再来执行
    • 因为 react 的任务它是有一个 expirationTime 的
    • 所以它这里要判断一下我的任务有没有超时
    • 如果已经超时了,要把所有加入callbackList队列的超时任务都执行掉
    • 因为任务已经超时了,所以必须要立刻完成
    • 执行到第一个非超时的任务之后,若还有时间,可以继续执行
    • 如果没有时间了,要把主动权交还给浏览器,让浏览器来做其他一些任务
  • 最终要执行这个任务,执行的是什么?
    • 调用一个 performAsyncWork 这个方法
    • 它会执行react的schedule里面的回调函数
    • 在调用这个方法的时候,schedule 会传给这个方法一个叫做deadline的一个对象,这个对象是用来判断。
    • 在进入 performAsyncWork 的时候,就进入到react的一个更新流程
    • react的更新流程中,它去遍历整一棵树,会遍历每棵树的每个单元,然后对它进行一个更新的操作
    • 每个单元更新完了之后,回过头来通过这个deadline对象判断一下,现在是否还有 js 运行的一个时间片
    • 因为调度器每一次调用 performAsyncWork 的任务,它是有一个时间限制的
    • 比如说默认的情况下是22毫秒,在这个时间片内你可以去执行的操作
    • 这就是这个 deadline 对象它的一个作用
  • 最终调用 performWork 这个方法
  • performWork 它调用的是没有deadline的
  • performAsyncWork 它调用的是有deadline的
  • 最终在 if deadline 这里汇集在一起
  • 根据是否有 deadline 进入下个阶段的循环

3 )第三个阶段

  • 根据是否有 deadline 进入循环
  • 这个循环是什么呢?
    • 这个循环就是要遍历整棵树每一个 fiber 节点进行的更新操作
  • 对于同步任务,它会遍历完整棵树,然后把整个应用更新就完了
    • 因为它是同步的,跟以前的react用法是一样的
  • 对于异步的来讲,如果符合条件
    • 进入 performWorkOnRoot, 它做的其实是一个更新的过程
    • 然后 findHighestPriorityRoot 找到一个最高优先级的节点之后
    • 对这个节点进行一个更新 recomputeCurrentRendererTime
    • 对于有 deadline 的情况,调用 performWorkOnRoot 进行更新任务之后
    • renderRoot 里面,它还会有一个循环去判断 deadline
    • 最终要等这个 performWorkOnRoot 返回之后,才会继续下面的操作
    • 对于有 deadline 的情况,会重新请求一个时间,然后去判断一下deadline是否已经过期
    • 如果已经过期的话,会回过头来到红色区域再进行一个判断
    • 如果发现 deadline 已经过期的话,又会去继续调用这个 scheduleCallbackWithExpirationTime
    • 再次进行异步的回调, 它这是一个递归的过程
    • 因为之前第一阶段加入了一个 addRootToScheduler
    • 它就有一个队列,在维护着所有的更新的情况
    • 对于每一次更新,只能更新一个优先级的任务,以及一个root上的任务
    • 上述红色这块区域,它就是一个循环的条件判断
    • 它每次更新一个节点上的一个优先级任务
    • 具体的操作在 performWorkOnRoot 里面
    • 更新完之后, 它会去调用相对应的方法
    • 在这个root上对应的优先级任务更新完之后
    • 它要找到下一个root上面的对应优先级的任务,然后再次进入这个循环
    • 所以这个就是deadline它的一个用处,它帮助我们去判断是否应该跳出循环了
    • 如果我们一直处于这个循环,要把所有任务都更新完,那么可能占用的js运行时间会非常的长
    • 导致可能的动画停滞或用户输入卡顿。
    • 在这个 deadline 超过了之后,这个循环直接跳出
    • 然后再继续跳回到这个 scheduleCallbackWithExpirationTime
    • 再次进入一个调度,然后把js的执行权交给浏览器,让它先执行动画或者用户输入的响应
    • 等有空了,再回过头来再去执行这个任务,然后又回到 红色区域判断这里
    • 之前没完成的任务,再继续这么一个循环
    • 最终达到的目的是要把 root 里面的所有的节点上面的所有更新都执行完为止
    • 这就是整的一个循环的一个过程

整体流程图

总结

  • 通过 ReactDOM.render, setState, forceUpdate 这几个方法产生了更新
  • 产生了更新之后,维护一个队列去保存这些更新以及对应的root节点
  • 然后,根据它任务的优先级来进行判断,判断是同步的更新还是异步的更新
    • 对于异步的更新,如果有多个任务,它会一直处于先执行浏览器优先级最高的更新
    • 有空的时候回过头来更新 react 树
    • 如果 root 上对应的某一个优先级的任务更新完了
    • 那么先输出到dom上,然后执行下一个更新
    • 在这个循环的过程当中,根据这个调度器传入的 deadline 对象
    • 判断是否有超时,如果超时,再回过头去进行一个调度
    • 先把执行权给浏览器,让它保证动画的流畅运行
    • 等它有空,再回过头来继续执行的任务
  • 这就是整个调度的核心原理
  • 目的是
    • 保证我们低优先级的react更新,不会阻止浏览器的一些高要求的动画更新
    • 能够保证浏览器的一些动画能够达到30帧以上这么一个情况
  • 以上就是react整个的调度过程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/618256.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

对git中tag, branch的重新理解

1. 问题背景 项目中之前一个tag&#xff08;v1.0&#xff09;打错了&#xff0c;想删除它&#xff0c;但我们从此tag v1.0中迁出新建分支Branch_v1.0,在此分支下修复了bug&#xff0c;想重新打一个tag v1.0&#xff0c;原来的tag v1.0可以删除掉吗&#xff1f; 错误的理解&am…

Mysql如何优化慢查询

如何优化慢查询 慢 SQL 的优化&#xff0c;主要从两个方面考虑&#xff0c;SQL 语句本身的优化&#xff0c;以及数据库设计的优化。 1、避免不必要的列 覆盖索引会导致回表&#xff0c;且增大了IO 2、分页优化 深分页解决方案 使用子查询in 使用连接表 left join 使用游标&a…

计算机毕业设计-----SSH计算机等级考试报名系统

项目介绍 该项目分为前后台&#xff0c;分为管理员与普通用户两种角色&#xff0c;前台为普通用户登录&#xff0c;后台为管理员登录&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录,修改个人密码&#xff0c;院系信息管理&#xff0c;注册用户管理&#xff0c;留…

JAVA数组以及小练习

目录 数组的概述和静态初始化 数组的地址值和元素访问 数组的遍历 数组的动态初始化 数组练习 数组的概述和静态初始化 package 数组;public class array1 {public static void main(String[] args){//格式//静态初始化//数据类型 [] 数组名 new 数组类型[]{元素1&#xf…

java期末复习题

1.任何一个Java程序都默认引入一个包&#xff0c;这个包的名字是________________。 正确答案&#xff1a;java.lang Java程序默认引入的包是java.lang包。这个包是Java语言的核心&#xff0c;它提供了Java中的基础类&#xff0c;包括基本Object类、Class类、String类、基本类…

【模块系列】STM32BMP280

前言 最进想练习下I2C的应用&#xff0c;手上好有BMP280也没用过&#xff0c;就看着机翻手册和原版手册&#xff0c;开始嘎嘎写库函数了。库的命名应该还1是比较规范了吧&#xff0c;就是手册对于最终值的计算方式很迷糊&#xff0c;所以现在也不能保证有可靠性啊&#xff0c;大…

磁盘直通卡/阵列卡讲解

服务器SAS卡 ① 华为SR120 (LSI 2308 6Gb SAS直通卡),适合数据安全等级不高或 更换简单 硬盘即插即用 ② 华为SR320 (LSI 2208 6Gb SAS阵列卡 带512M缓存),适合对数据安全等级要求高或追求磁盘性能的客户 推荐上阵列卡 ③ 华为SR130 (LSI 3008 12Gb SAS直通卡),适合数据安全等…

【Spring 篇】深入探索:Spring集成Web环境的奇妙世界

嗨&#xff0c;亲爱的小白们&#xff01;欢迎来到这篇有关Spring集成Web环境的博客。如果你曾对如何在Spring中构建强大的Web应用程序感到好奇&#xff0c;那么这里将为你揭示Web开发的神秘面纱。我们将用情感丰富、语句通顺的文字&#xff0c;以小白友好的方式&#xff0c;一探…

Mac M2芯片pycharm配置conda python环境

Mac M2芯片pycharm配置conda python环境 详细步骤如下 1、pycharm界面右上方的小齿轮⚙️&#xff0c;进入Setting…状态 2、进入setting界面后&#xff0c;选择左边栏的Project-->python Interpreter,然后选择右边的Add Interpreter 3、进入Add Interpreter后&#xff0c…

竞赛保研 基于深度学的图像修复 图像补全

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学的图像修复 图像补全 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-se…

内网穿透远程访问

内网穿透远程访问 参考文章&#xff1a;https://blog.csdn.net/qyj19920704/article/details/135528078#comments_30865140 cpolar概述 使用了 cpolar 生成的隧道&#xff0c;其公网地址是随机生成的。 优势在于建立速度快&#xff0c;可以立即使用。然而&#xff0c;它的缺…

selenium模拟浏览器查询导出参考文献

通过使用Selenium和BeautifulSoup&#xff0c;在CNKI网站上&#xff0c;以"知识图谱"为关键词&#xff0c;通过自动化工具在搜索页面提取相关文章信息。点击清楚并全选进行文献导出&#xff0c;随后从导出页面和管理导出的页面提取参考文献。 浏览器及WebDriver下载…

postgresql迁移到mysql

1.工具方法&#xff1a;Navicat Premium16 2. 手工方法&#xff1a; 迁移流程 下面是将 Postgresql 数据库迁移到 MySQL 的步骤流程&#xff1a; 步骤描述1. 创建MySQL表结构在MySQL中创建与Postgresql中的表结构相同的表2. 导出Postgresql数据将Postgresql中的数据导出为SQ…

评估指标中的RMSE,MAE,MAPE分别表示什么,取值范围一般多大,优缺点有哪些?

评价指标 1. RMSE&#xff08;Root Mean Square Error&#xff09;&#xff1a;均方根误差2. MAE&#xff08;Mean Absolute Error&#xff09;&#xff1a;平均绝对误差&#xff0c;也叫均方误差3. MAPE&#xff08;Mean Absolute Percentage Error&#xff09;&#xff1a;平…

第九讲 单片机驱动彩色液晶屏 控制RA8889软件:显存操作

单片机驱动TFT彩色液晶屏系列讲座 目录 第一讲 单片机最小系统STM32F103C6T6通过RA8889驱动彩色液晶屏播放视频 第二讲 单片机最小系统STM32F103C6T6控制RA8889驱动彩色液晶屏硬件框架 第三讲 单片机驱动彩色液晶屏 控制RA8889软件:如何初始化 第四讲 单片机驱动彩色液晶屏 控…

kafka入门(六):日志分段(LogSegment)

日志分段&#xff08;LogSegment&#xff09; Kafka的一个 主题可以分为多个分区。 一个分区可以有一至多个副本&#xff0c;每个副本对应一个日志文件。 每个日志文件对应一个至多个日志分段&#xff08;LogSegment&#xff09;。 每个日志分段还可以细分为索引文件、日志存储…

【Mybatis系列】Mybatis空值关联

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Linux 内核学习 2 - 用户程序如何被塞进内核进行调度?

Shell是系统的用户界面&#xff0c;提供了用户与内核进行交互操作的一种接口。它接收用户输入的命令并把它送入内核去执行。 fork里copy了父进程的信息&#xff0c;并激活task放到运行队列&#xff0c;当系统发生调度并获得执行机会时开始执行&#xff0c;但这时还不是hello程序…

C++力扣题目700--二叉搜索树中的搜索

给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和一个整数值 val。 你需要在 BST 中找到节点值等于 val 的节点。 返回以该节点为根的子树。 如果节点不存在&#xff0c;则返回 null 。 示例 1: 输入&#xff1a;root [4,2,7,1,3], val 2 输出&#xff1a;[2,1,…

网络安全全栈培训笔记(52-WEB攻防-通用漏洞弱口令安全社工字典生成服务协议web应用)

第52天 WEB攻防-通用漏洞&弱口令安全&社工字典生成&服务协议&web应用 知识点&#xff1a; 1、弱口令安全&配置&初始化等 2、弱口令对象&Web&服务&应用等 3、弱口令字典&查询&列表&列表等 #前置知识&#xff1a; 弱口令(weak…