React18源码: React调度中的3种优先级类型和Lane的位运算

优先级类型

  • React内部对于优先级的管理，贯穿运作流程的4个阶段（从输入到输出），根据其功能的不同，可以分为3种类型：
    • 1 ）fiber优先级(LanePriority)
      • 位于 react-reconciler包，也就是Lane(车道模型)
    • 2 ）调度优先级(SchedulerPriority)
      • 位于scheduler包
    • 3 ）优先级等级(ReactPriorityLevel)
      • 位于react-reconciler包中的 SchedulerWithReactIntegration.js
      • 负责上述2套优先级体系的转换.
  • Lane 是在 react@17.0.0的新特性.

Lane(车道模型)

  • 英文单词lane翻译成中文表示"车道，航道"的意思，所以很多文章都将Lanes模型称为车道模型

  • Lane模型的源码在 ReactFiberLane.js,源码中大量使用了位运算

  • 首先引入对Lane的解释, 这里简单概括如下：

    • 1 ）Lane类型被定义为二进制变量，利用了位掩码的特性，在频繁运算的时候占用内存少，计算速度快.
      • Lane和Lanes就是单数和复数的关系，代表单个任务的定义为Lane,代表多个任务的定义为Lanes
    • 2 ）Lane是对于expirationTime的重构，以前使用expirationTime表示的字段，都改为了lane
      renderExpirationTime -> renderlanes
update.expirationTime -> update.lane
fiber.expirationTime -> fiber.lanes
fiber.childExpirationTime -> fiber.childLanes
root.firstPendingTime and root.lastPendingTime -> fiber.pendingLanes
    • 3 ）使用Lanes模型相比expirationTime模型的优势
      • Lanes把任务优先级从批量任务中分离出来
      • 可以更方便的判断单个任务与批量任务的优先级是否重叠
      // 判断：单task与batchTask的优先级是否重叠
// 1.通过expirationTime判断
const isTaskIncludedInBatch = priorityOfTask >= priorityOfBatch;
// 2.通过Lanes判断
const isTaskIncludedInBatch =(task & batchOfTasks) !== 0;// 当同时处理一组任务，该组内有多个任务，且每个任务的优先级不一致
// 1. 如果通过expirationTime判断，需要维护一个范围（在Lane重构之前，源码中就是这样比较的）
const isTaskIncludedInBatch =taskPriority <= highestPriorityInRange &&taskPriority >= lowestPriorityInRange;
// 2. 通过Lanes判断
const isTaskIncludedInBatch = (task & batchOfTasks) !== 0;

  • Lanes使用单个32位二进制变量即可代表多个不同的任务

  • 也就是说一个变量即可代表一个组(group)

  • 如果要在一个group中分离出单个task,非常容易

  • 在expirationTime模型设计之初，react体系中还没有 Suspense 异步渲染的概念

  • 现在有如下场景：有3个任务，其优先级A>B>C,正常来讲只需要按照优先级顺序执行就可以了

  • 但是现在情况变了：A和C任务是CPU密集型，而B是IO密集型(Suspense会调用远程api,算是IO任务)

  • 即A(cpu)>B(IO)>C(cpu).此时的需求需要将任务B从group中分离出来，先处理cpu任务A和C

    //从group中删除或增加task// 通过expirationTime实现
// 维护一个链表，按照单个task的优先级顺序进行插入
// 删除单个task(从链表中删除一个元素)
task. prev.next = task.next;
//2）增加单个task(需要对比当前task的优先级，插入到链表正确的位置上)
let current = queue;
while (task.expirationTime >= current.expirationTime) {current = current.next;
}
task.next = current.next;
current.next = task;
//3）比较task是否在group中
const isTaskIncludedInBatch =taskPriority <= highestPriorityInRange &&taskPriority >= lowestPriorityInRang;
//2.通过Lanes实现
//1)删除单个task
batchOfTasks &= ~task;
//2）增加单个task
batchOfTasks |= task;
//3）比较task是否在group中
const isTaskIncludedInBatch = (task & batchOfTasks) !== 0;

  • Lanes是一个不透明的类型，只能在ReactFiberLane.js这个模块中维护

  • 如果要在其他文件中使用，只能通过 ReactFiberLane.js 中提供的工具函数来使用

  • 分析车道模型的源码(ReactFiberLane.js中)，可以得到如下结论：

    • 1.可以使用的比特位一共有31位
    • 2.共定义了18种车道(Lane/Lanes)变量，每一个变量占有1个或多个比特位，分别定义为Lane和Lanes类型.
    • 3.每一种车道(Lane/Lanes)都有对应的优先级，所以源码中定义了18种优先级(LanePriority).
    • 4.占有低位比特位的Lane变量对应的优先级越高
      • 最高优先级为 SynclanePriority 对应的车道为
        • Synclane = 0b0000000000000000000000000000001
      • 最低优先级为 OffscreenLanePriority 对应的车道为
        • OffscreenLane = 0b1000000000000000000000000000000

位运算

  • 什么是位运算？程序中的所有数在计算机内存中都是以二进制的形式储存的。

  • 位运算就是直接对整数在内存中的二进制位进行操作。

  • 比如

    • 0 在二进制中用 0 表示，我们用 0000 代表；
    • 1 在二进制中用 1 表示，我们用 0001 代表；

  • 那么先看两个位运算符号 & 和 |

    • & 对于每一个比特位，两个操作数都为 1 时，结果为 1，否则为 0
    • | 对于每一个比特位，两个操作数都为0时，结果为 0，否则为 1
    • 我们看一下两个 1 & 0 和 1 | 0
    • 如上 1 & 0 = 0, 1 | 0 = 1

  • 参考

      0       00001       0001-------------0 & 1 = 0000 = 0

  • 再参考

    0       0000
1       0001
----------------
0 | 1 = 0001 = 1

使用一张表格详细说明

运算符用法描述
与 &a & b如果两位都是1则设置每位为1
或 | a | b 如果两位之一为1则设置每位为1
异或 ^a^b如果两位只有一位为1则设置每位为1
非 ~~ a反转操作数的比特位, 即0变成1, 1变成0
左移(<<)a << b 将a的二进制形式向左移b(< 32)比特位, 右边用0填充
有符号右移(>>)a>>b将a的二进制形式向右移b(<32)比特位，丢弃被移除的位，左侧以最高位来填充
无符号右移(>>>)a>>>b将a的二进制形式向右移b(<32)比特位，丢弃被移除的位，并用0在左侧填充

位运算的一个使用场景

  • 比如有一个场景下，会有很多状态常量A,B,C…,这些状态在整个应用中在一些关键节点中做流程控制
  • 比如：
    if(value === A) {// TODO..
}
  • 如上判断value等于常量A,那么进入到if的条件语句中
  • 此时是value属性是简单的一对一关系，但是实际场景下value可能是好几个枚举常量的集合
  • 也就是一对多的关系，那么此时value可能同时代表A和B两个属性
  • 如下图所示：
  • 这时候，如果按照下面的代码来写，就会很麻烦
    if(value === A || value === B) {// TODO..
}
  • 此时的问题就是如何用一个value表示A和B两个属性的集合，这个时候位运算就派上用场了
  • 因为可以把一些状态常量用32位的二进制来表示（这里也可以用其他进制），比如：
    const A = 0b0000000000000000000000000000001 // 优先级最高
const B = 0b0000000000000000000000000000010
const C = 0b0000000000000000000000000000100 // 优先级最低
  • 通过移位的方式让每一个常量都单独占一位，这样在判断一个属性是否包含常量的时候
  • 可以根据当前位数的1和0来判断
  • 这样如果一个值即代表A又代表B那么就可以通过位运算的 | 来处理
  • 就有 AB = A | B = 0b0000000000000000000000000000011
  • 那么如果把AB的值赋予给value,那么此时的value就可以用来代表A和B
  • 此时当然不能直接通过等于或者恒等来判断value是否为A或者B,此时就可以通过&来判断。具体实现如下：
    const A = 0b0000000000000000000000000000001
const B = 0b0000000000000000000000000000010
const C = 0b0000000000000000000000000000100
const N = 0b0000000000000000000000000000000
const value = A | B
console.log((value & A ) !== N) // true
console.log((value & B ) !== N) // true
console.log((value & C ) !== N ) // false

位运算在 react 中的应用

export const NoLanes = /*                */ 0b0000000000000000000000000000000;
const SyncLane = /*                      */ 0b0000000000000000000000000000001;const InputContinuousHydrationLane = /*  */ 0b0000000000000000000000000000010;
const InputContinuousLane = /*           */ 0b0000000000000000000000000000100;const DefaultHydrationLane = /*          */ 0b0000000000000000000000000001000;
const DefaultLane = /*                   */ 0b0000000000000000000000000010000;const TransitionHydrationLane = /*       */ 0b0000000000000000000000000100000;
const TransitionLane = /*                */ 0b0000000000000000000000001000000;

  • 如上 SyncLane 代表的数值是1，它却是最高的优先级

  • 也即是说lane的代表的数值越小，此次更新的优先级就越大

  • 在新版本的React中，还有一个新特性，就是render阶段可能被中断，在这个期间会产生一个更高优先级的任务

  • 那么会再次更新lane属性，这样多个更新就会合并，这样一个lane可能需要表现出多个更新优先级

  • 我们来看一下React是如何通过位运算分离出优先级的

    function getHighestPriorityLane(lanes) {return lanes & -lanes;
}

  • 如上就是通过 lanes & -lanes 分离出最高优先级的任务的，我们来看一下具体的流程

    • 比如SyncLane和InputContinuousLane合并之后的任务优先级lane为
    • SyncLane = 0b0000000000000000000000000000001
    • InputContinuousLane = 0b0000000000000000000000000000100
    • lane = SyncLane|InputContinuousLane
    • lane = 0b0000000000000000000000000000101
    • 那么通过 lanes & -lanes 分离出 SyncLane
    • 首先我们看一下 -lanes,在二进制中需要用补码表示为：
    • -lane = 0b1111111111111111111111111111011
    • 那么接下来执行 lanes & -lanes 看一下，& 的逻辑是如果两位都是1则设置改位为1，否则为0
    • 那么 lane & -lane, 只有一位（最后一位）全是1，所有合并后的内容为：
    • lane & -lane = 0b0000000000000000000000000000001

  • 可以看得出来lane&-lane的结果是SyncLane,所以通过lane&-lane就能分离出最高优先级的任务

    const SyncLane = 0b0000000000000000000000000000001
const InputContinuousLane = 0b0000000000000000000000000000100
const lane = SyncLane | InputContinuousLane
console.log((lane & -lane) === SyncLane ) // true

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

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

相关文章

【人脸朝向识别与分类预测】基于LVQ神经网络

【人脸朝向识别与分类预测】基于LVQ神经网络

课题名称&#xff1a;基于LVQ神经网络的人脸朝向识别分类 版本日期&#xff1a;2024-02-20 运行方式&#xff1a;直接运行GRNN0503.m文件 代码获取方式&#xff1a;私信博主或 企鹅号:491052175 模型描述&#xff1a; 采集到一组人脸朝向不同角度时的图像&#xff0c;图像…
阅读更多...
持续集成，持续交付和持续部署的概念，以及GitLab CI / CD的介绍

持续集成，持续交付和持续部署的概念，以及GitLab CI / CD的介绍

引言&#xff1a;上一期我们部署好了gitlab极狐网页版&#xff0c;今天我们介绍一下GitLabCI / CD 目录 一、为什么要 CI / CD 方法 1、持续集成 2、持续交付 3、持续部署 二、GitLab CI / CD简介 三、GitLab CI / CD 的工作原理 4、基本CI / CD工作流程 5、首次设置 …
阅读更多...
华清远见嵌入式学习——驱动开发——day9

华清远见嵌入式学习——驱动开发——day9

目录 作业要求&#xff1a; 作业答案&#xff1a; 代码效果&#xff1a; ​编辑 Platform总线驱动代码&#xff1a; 应用程序代码&#xff1a; 设备树配置&#xff1a; 作业要求&#xff1a; 通过platform总线驱动框架编写LED灯的驱动&#xff0c;编写应用程序测试&…
阅读更多...
Rust通用代码生成器莲花发布红莲尝鲜版二十一发布介绍视频，前端代码生成物大翻新

Rust通用代码生成器莲花发布红莲尝鲜版二十一发布介绍视频，前端代码生成物大翻新

Rust通用代码生成器莲花发布红莲尝鲜版二十一发布介绍视频&#xff0c;前端代码生成物大翻新 Rust通用代码生成器发布了红莲尝鲜版二十一的最新介绍视频&#xff0c;前端代码生成物大翻新。视频请见&#xff1a; Rust通用代码生成器&#xff1a;莲花&#xff0c;红莲尝鲜版二…
阅读更多...
vue手写卡片切换，并且点击获取到卡片信息

vue手写卡片切换，并且点击获取到卡片信息

需求&#xff1a;做一个卡片样式的列表&#xff0c;之后有一些基本信息&#xff0c;之后卡片选中后样式不一样&#xff0c;默认选中第一个卡片&#xff0c;点击卡片后可以获取到卡片的信息 一、效果 二、关键代码 index默认重0开始,activeTable默认为0,0-0等于0&#xff0c;但…
阅读更多...
MT8791迅鲲900T联发科5G安卓核心板规格参数_MTK平台方案定制

MT8791迅鲲900T联发科5G安卓核心板规格参数_MTK平台方案定制

MT8791安卓核心板是一款搭载了旗舰级配置的中端手机芯片。该核心板采用了八核CPU架构设计&#xff0c;但是升级了旗舰级的Arm Cortex-A78核心&#xff0c;两个大核主频最高可达2.4GHz。配备了Arm Mali-G68 GPU&#xff0c;通过Mali-G88的先进技术&#xff0c;图形处理性能大幅提…
阅读更多...
unity屏幕受伤特效

unity屏幕受伤特效

//使用用途&#xff1a;同于屏幕掉血的后处理特效 //请结合和脚本&#xff1a;BloodScreen 挂载至摄像机使用本特效 //本特效设计之初未考虑兼容移动设备&#xff0c;请注意//使用说明&#xff1a; //掉血获取此脚本&#xff0c;将showBlood设置为true&#xff0c;如果您需要更…
阅读更多...
easyui 手风琴Accordion 面板的高度设置

easyui 手风琴Accordion 面板的高度设置

今天接到一个新的小需求&#xff0c;如下图&#xff0c;当预算表单只有一个时&#xff0c;要求不显示预算表单这块的内容。 考虑到页面创建时用到了表单的回调和点击方法&#xff0c;所以不能单纯的移除&#xff0c;移除右侧表格的创建会报错&#xff0c;所以只能隐藏。 隐藏…
阅读更多...
Runaway Queries 管理：提升 TiDB 稳定性的智能引擎

Runaway Queries 管理：提升 TiDB 稳定性的智能引擎

在数字化系统扮演重要角色的今天&#xff0c;数据库稳定性成为企业关注的核心问题。对于重要计算机系统而言&#xff0c;突发的性能下降可能对业务造成不可估量的损失。为了稳定数据库性能&#xff0c;用户可以从管理流程入手规范变更的测试&#xff0c;或者利用产品手段减少预…
阅读更多...
【VRTK】【Unity】【VR开发】使用注意事项-Simulator没反应

【VRTK】【Unity】【VR开发】使用注意事项-Simulator没反应

【背景】 建立一个基本的VRTK项目后&#xff0c;用Simulator Rig模拟运行&#xff0c;移动鼠标后发现Simulator Rig没有任何反应。 【分析】 Console中的报错信息类似于没有启用Legacy unity input package&#xff0c;Legacy的意思是经典的&#xff0c;所以应该是指没有在p…
阅读更多...
Fpga_高斯滤波

Fpga_高斯滤波

一 算法原理 高斯滤波即将图像频域处理和时域处理相联系&#xff0c;作为低通滤波器使用&#xff0c;滤去低频能量&#xff0c;平滑图像&#xff0c;适用于消除高斯噪声&#xff0c;应用于图像降噪领域。 高斯滤波是对图像像素点进行加权平均的过程&#xff0c;某一像素点的值…
阅读更多...
SpringBoot-2.7.6基于SLF4J日志门面的日志框架切换

SpringBoot-2.7.6基于SLF4J日志门面的日志框架切换

SpringBoot 没有强制性的日志记录依赖项，但 Commons Logging API 除外，它通常由 Spring Framework 的模块提供。 要使用 Logback，您需要将其包含在类路径中。 推荐的方法是您只需要通过启动器，这都取决于 . 对于 Web 应用程序 ，因为它可传递地依赖于日志记录启动器。 如果…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023