React18原理: React核心对象之Update、UpdateQueue、Hook、Task对象

Update 与 UpdateQueue 对象


1 ) 概述

  • 在fiber对象中有一个属性 fiber.updateQueue
  • 是一个链式队列(即使用链表实现的队列存储结构)
  • 是和页面更新有关的

2 )Update对象相关的数据结构

// https://github.com/facebook/react/blob/v18.2.0/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js#L123
export type Update<State> = {// eventTime: number, // 这个属性后续被删除了 可以忽略了lane: Lane,tag: 0 | 1 | 2 | 3,payload: any,callback: (() => mixed) | null,next: Update<State> | null,
};export type SharedQueue<State> = {pending: Update<State> | null,lanes: Lanes,hiddenCallbacks: Array<() => mixed> | null,
};export type UpdateQueue<State> = {baseState: State,firstBaseUpdate: Update<State> | null,lastBaseUpdate: Update<State> | null,shared: SharedQueue<State>,callbacks: Array<() => mixed> | null,
};
  • Update 属性
    • lane: update所属优先级
    • tag: 表示 update种,4种. UpdateState, ReplaceState, ForceUpdate, CaptureUpdate
    • payload: 载荷,update对象真正需要更新的数据,可以设置成一个回调函数或者对象.
    • callback: 回调函数.commit完成之后会调用.
    • next: 指向链表中的下一个,由于UpdateQueue是一个环形链表,最后一个update.next指向第一个update对象
  • UpdateQueue 属性
    • baseState: 表示此队列的基础state
    • firstBaseUpdate: 指向基础队列的队首
    • lastBaseUpdate: 指向基础队列的队尾
    • shared: 共享队列
    • callbacks: 用于保存有callback回调函数的update对象,在commit之后,会依次调用这里的回调函数.
  • SharedQueue 属性
    • pending:指向即将输入的update队列.在class组件中调用setState()之后,会将新的update对象添加到这个队列中来

updateQueue是fiber对象的一个属性,它们之间数据结构和引用关系如下

Hooks 对象


1 ) 概述

  • Hook用于 function 组件中,能够保持function组件的状态
  • 与class组件中的 state在性质上是相同的,都是为了保持组件的状态
  • 在rect@16.8以后,官方开始推荐使用Hook语法,常用的api有usestate, useEffect,usecallback等
  • 到目前为止,官方一共定义了17种Hook类型

2 )结构类型

// https://github.com/facebook/react/blob/v18.2.0/packages/react-reconciler/src/ReactFiberHooks.new.js#L148
export type Hook = {|memoizedState: any,baseState: any,baseQueue: Update<any, any> | null,queue: any,next: Hook | null,
|};// /packages/react-reconciler/src/ReactFiberHooks.new.js#L126
export type Update<S, A> = {|lane: Lane,action: A,hasEagerState: boolean,eagerState: S | null,next: Update<S, A>,
|};// /packages/react-reconciler/src/ReactFiberHooks.new.js#L134
export type UpdateQueue<S, A> = {|pending: Update<S, A> | null,lanes: Lanes,dispatch: (A => mixed) | null,lastRenderedReducer: ((S, A) => S) | null,lastRenderedState: S | null,
|};
  • Hook 属性

    • memoizedState: 内存状态,用于输出成最终的fiber树
    • basestate: 基础状态,当Hook.queue更过后,basestate也会更新.
    • baseQueue: 基础状态队列,在reconciler阶段会辅助状态合并.
    • queue: 指向一个Update队列
    • next: 指向该function组件的下一个Hook对象,使得多个Hook之间也构成了一个链表.
  • 注意

    • Hook.queue 和 Hook.baseQueue(即 UpdateQueue 和 Update)是为了保证 Hook 对象能够顺利更新
    • 与 fiber.updateQueue 中的 UpdateQueue 和 Update 是不一样的(且它们在不同的文件)
  • Hook与fiber的关系

    • 在fiber对象中有一个属性 fiber.memoizedState 指向fiber节点的内存状态.
    • 在function类型的组件中,fiber.memoizedState 就指向Hook队列(Hook队列保存了 function类型的组件状态).
    • 所以Hook也不能脱离fiber而存在,它们之间的引用关系如下:

Task 对象

  • scheduler包中,没有为task对象定义type,其定义是直接在js代码中:

    // https://github.com/facebook/react/blob/v18.2.0/packages/scheduler/src/forks/Scheduler.js#L345
    var newTask = {id: taskIdCounter++,callback,priorityLevel,startTime,expirationTime,sortIndex: -1,
    };
    
  • 属性解释:

    • id: 位移标识
    • callback: task最核心的字段,指向react-reconciler包所提供的回调函数.
    • prioritylevel: 优先级
    • startTime: 一个时间戳,代表task的开始时间(创建时间+延时时间).
    • expirationTime: 过期时间.
    • sortIndex: 控制task在队列中的次序,值越小的越靠前
  • 注意task中没有next属性,它不是一个链表,其顺序是通过堆排序来实现的

  • 小顶堆数组,始终保证数组中的第一个task对象优先级最高

  • 堆参考
    • 最小堆:https://blog.csdn.net/Tyro_java/article/details/133468244
    • 最大堆:https://blog.csdn.net/Tyro_java/article/details/133530983

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

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

相关文章

【Nginx】Nginx配置反向代理 和 https

nginx.conf配置 进入linux /etc/nginx/ 打开nginx.conf 进行以下配置 http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 65;server {#监听443端口listen 443 ssl;#你的域名server_name huiblog.top;#ssl证书的pe…

VSCode The preLaunchTask ‘C/C++: clang++ 生成活动文件‘ terminated with exit code -1

更改tasks.json文件里面的type为shell 选择g 选择g&#xff0c;然后点回到text.c&#xff0c;按下F5. 得到结果。 文中内容参考: 从零开始手把手教你配置属于你的VS Code_哔哩哔哩_bilibili https://blog.csdn.net/qq_63872647/article/details/128006861

【EasyV】QGIS转换至EasyV

QGIS转换至EasyV 第一步&#xff1a;导入QGIS第二步 坐标系转换第三步 集合修正第四步 重命名字段第五步 导出WGS geojson坐标第六步 导入EasyV 第一步&#xff1a;导入QGIS 第二步 坐标系转换 第三步 集合修正 第四步 重命名字段 第五步 导出WGS geojson坐标 第六步 导入EasyV…

【es6】模版字面量/模版字符串,标签函数/String.raw()静态方法

模版字符串经常用&#xff0c;但是这个标签函数的功能你肯定不知道&#xff0c;请看官网文档 看完你需要知道 可以自定义标签函数String.raw 的用法 唯一一个内置的模版字符串标签函数第一个参数具有 raw 属性的对象&#xff0c;值时一个类数组字符串对象模版字面量的缓存机制…

【vue vue-seamless-scroll】解决vue-seamless-scroll鼠标悬浮才滚动或者只滚动一次就失效的问题

解决问题&#xff1a;使用vue-seamless-scroll发现只有鼠标悬浮上去才滚动&#xff0c;而且滚动一次停止了 目标效果&#xff1a; 解决方案&#xff1a; 最后发现是因为数据需要在页面挂载好就赋值&#xff0c;否则页面在加载完成后&#xff0c;数据无法自动滚动。但因为数据…

c++:蓝桥杯的基础算法2(构造,模拟)+练习巩固

目录 构造 构造的基础概念&#xff1a; 模拟 练习1&#xff1a;扫雷 练习2&#xff1a;灌溉 练习3&#xff1a;回文日期 构造 构造的基础概念&#xff1a; 构造算法是一种用于解决特定问题的算法设计方法。在C语言中&#xff0c;构造算法通常涉及到创建一个函数或类来实…

ARM服务器上部署zookeeper集群

由于ARM服务器上部署zookeeper集群,会存在加载不到主类问题,现在把遇到的问题进行总结下,问题如下: [rootnode206 apache-zookeeper-3.5.10]# bin/zkServer.sh start ZooKeeper JMX enabled by default Using config: /data1/software/apache-zookeeper-3.5.10/bin/../conf/…

四、Burpsuite工具之proxy模块详解-intercept功能

前言&#xff1a; 过了一个年&#xff0c;感觉好久都没有更新了&#xff0c;今天就从burpsuite的更新开始吧。 前面已经说过了burpsuite的安装和proxy代理的配置&#xff0c;今天说一下proxy模块中非常有用的intercept功能。 intercept功能介绍&#xff1a; intercept是拦截…

Spring之AOP源码解析(中)

前言 在上一篇文章中,我们讲解了Spring中那些注解可能会产生AOP动态代理,我们通过源码发现,完成AOP相关操作都和ProxyFactory这个类有密切关系,这一篇我们将围绕这个类继续解析 演示 作用 ProxyFactory采用策略模式生成动态代理对象,具体生成cglib动态代理还是jdk动态代理,…

算法提升——LeetCode第385场周赛总结

题目 统计前后缀下标对 I 给你一个下标从0开始的字符串数组words。 定义一个布尔函数isPrefixAndSuffix&#xff0c;它接受两个字符串参数str1和str2&#xff1a; 当str1同时是str2的前缀&#xff08;prefix&#xff09;和后缀&#xff08;suffix&#xff09;时&#xff0c…

APP的UI自动化demo(appium+java)

文章目录 appium连接手机java代码实现-第一版第二版-接入testng和隐式等待显示等待 appium连接手机 准备工作 1、查看连接手机模拟器是否连接成功&#xff0c;获取设备名称 执行命令&#xff1a;adb devices 2、查看android内核版本号—>paltformVersion 执行命令&#xf…

MQL语言实现单元测试

文章目录 一、单元测试是什么二、单元测试的过程三、为什么需要单元测试四、MQL测试代码实现 一、单元测试是什么 单元测试是对软件中最小可测单元&#xff08;如类或函数&#xff09;进行独立验证和检查的过程。它是由开发工程师完成的&#xff0c;旨在确保每个单元的功能和逻…

Postman接口关联实战解析

在使用postman做接口测试时&#xff0c;有时候后面的接口需要获取前面接口的某一个返回值做为请求参数&#xff0c;这时就可以使用关联。 如从A接口提取出a字段的值&#xff0c;供B接口的b字段使用。 一个接口的返回报文如下&#xff1a; {"retCode": "0&quo…

SwiftUI 集合视图(Grid)拖放交换 Cell 的极简实现

概览 自从 SwiftUI 横空出世那天起&#xff0c;小伙伴们都感受到了它惊人的简单与便捷。而在本课中&#xff0c;我们将会用一个小“栗子”更直观的让大家体验到它无与伦比简洁的描述性特质&#xff1a; 如上图所示&#xff0c;我们在 SwiftUI 中实现了 Grid 中拖放交换 Cell 的…

基于SpringBoot + Layui的社区物业管理系统

项目介绍 社区物业管理系统是基于java编程语言&#xff0c;springboot框架&#xff0c;idea工具&#xff0c;mysql数据库进行开发&#xff0c;本系统分为业主和管理员两个角色&#xff0c;业主可以登陆系统&#xff0c;查看车位费用信息&#xff0c;查看物业费用信息&#xff0…

2个wordpress优化SEO主题模板

SEO优化wordpress主题 简洁的SEO优化wordpress主题&#xff0c;效果好不好&#xff0c;结果会告诉你&#xff0c;适合SEO公司使用的主题。 https://www.jianzhanpress.com/?p2804 SEO优化海外WordPress主题 简洁的SEO优化海外服务商WordPress主题&#xff0c;为中国制造202…

C# byte[]、struct、intptr、byte[]和byte*等的相互转换

struct、byte[]互相转换 //struct转换为byte[] public static byte[] StructToBytes(object structObj) {int size Marshal.SizeOf(structObj);IntPtr buffer Marshal.AllocHGlobal(size);try{Marshal.StructureToPtr(structObj, buffer, false);byte[] bytes new byte[siz…

HTTP REST 方式调用WebService接口(wsdl)

一、WebService接口正常使用SOAP协议调用&#xff0c;测试时常采用SoapUI软件调用&#xff0c;具体如下&#xff1a; 二、由于目前主流web服务逐渐转换为RESTful的形式&#xff0c;且SOAP协议的实现也是基于HTTP协议&#xff0c;故存在通过HTTP调用WebService接口的可能 2.1 …

Flink双流(join)

一、介绍 Join大体分类只有两种&#xff1a;Window Join和Interval Join Window Join有可以根据Window的类型细分出3种&#xff1a;Tumbling(滚动) Window Join、Sliding(滑动) Window Join、Session(会话) Widnow Join。 &#x1f338;Window 类型的join都是利用window的机制…