详细理解React的Fiber结构

一、为什么会出现Fiber

       旧版 React 通过递归的方式进行渲染,使用的是 JS引擎自身的函数调用栈,它会一直执行到栈空为止。而Fiber实现了自己的组件调用栈,它以链表的形式遍历组件树,可以灵活的暂停、继续和丢弃执行的任务。实现方式是使用了浏览器requestIdleCallback这一 API
因为需要给用户制造一种应用加载很快的假象,所以不能让一个程序一直霸占着资源,需要通过调度策略来合理分配资源,提高浏览器的响应率。

二、什么是Fiber

        Fiber是一种数据结构,可以用一个纯js对象来表示

const fiber = {stateNode, //节点实例child, // 子节点sibling, // 兄弟节点return, // 父节点
}

1、任务优先级

   React 18引入了几种不同的任务优先级,包括:

  • synchronous:同步任务,通常用于处理用户交互事件(同步执行)
  • task:普通任务,用于处理如点击事件之外的更新 (在 nextTick之前执行)
  • animation:动画帧任务,通常用于动画和定时器(下一帧之前执行)
  • high:高优先级任务,用于快速更新UI(在不久的将来立即执行)
  • low:低优先级任务,可以延迟处理,如不紧急的数据获取(稍微延迟执行)

2、调度方式

    React渲染的过程可以被中断,将控制权交给浏览器,让位给高优先级。因为浏览器无法判断优先级,所以使用使用超时机制让给出控制权,被称为合作式调度

注意:
       任务优先级决定了哪些任务应该首先被调度器考虑执行,而协作式调度则允许正在执行的任务在必要时让出主线程,以便浏览器可以处理其他紧急事件

3、工作流程

a. React内部三层运转

  • Virtual DOM层,描述页面长什么样子
  • Reconciler层, 负责调用组件生命周期的方法,进行Diff算法
  • Renderer层,根据不同的平台,渲染出相应的页面

b. Fiber Reconciler执行阶段

  • 阶段一,生成Fiber树,得出需要更新的节点信息,渐进过程,可以被打断
  • 阶段二,将需要更新的节点一次过批量更新,不可被打断

c. Fiber

    Reactrender第一次渲染的时候,会通过React.createElement创建一棵Element树,即Virtual DOM Tree

     由于要记录上下文信息,加入了Fiber,每一个Element会对应一个Fiber Node,将Fiber Node连接起来的结构成为了Fiber Tree

     Fiber Tree是链表结构,将递归遍历变成循环遍历(即深度优先搜索),然后配合requestIdleCallback API,实现了任务的拆分、中断和恢复

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

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

相关文章

微服务架构中的数据一致性设计及技术实现

目录 1.概要设计 1.1数据一致性模型 1.1.1 强一致性 1.1.2 最终一致性 1.2 技术实现策略 1.2.1 使用分布式事务 1.2.2 基于事件的最终一致性(Event-Driven Architecture, EDA) 1.2.3 使用数据库的特性 1.2.4 业务层面的策略 1.2.5 分布式锁和版…

R语言中的execl数据转plink

文章目录 带出外部连接的方式添加列的方式从列表中选出对应的数据信息查看变量信息没有成功 带出外部连接的方式 点击这个黄色的按钮就可以弹出外部链接的方式 添加列的方式 创建一个数据框的方式 我们创建一个三行三列的数据方式 df <- data.frame(name c("Alice&…

Redis的内存淘汰策略

关于Redis的淘汰策略 1.noeviction&#xff08;不淘汰策略&#xff09; 就是key已经到达了最大的内存限制&#xff0c;那个一个也不淘汰了&#xff0c;但是也没有办法给缓存里面添加数据了&#xff0c;一添加这样是为了保护数据库不崩 2.volatile-lru&#xff08;最近最少使用…

【CSS】深入理解:BFC究竟是什么?

深入理解&#xff1a;BFC究竟是什么&#xff1f; 在我们了解BFC之前&#xff0c;我们先来看看什么是FC 1. FC的概念 FC全称 Formatting Context ,元素在标准流里面都属于一个FC 块级元素的布局都属于Block Formatting Context,也就是BFC block level box都是在BFC中布局的 …

利用AQS(AbstractQueuedSynchronizer)实现一个线程同步器

目录 1. 前言 2. 什么是同步器 3. 同步器实现思路 Semaphore(信号量) 4. 代码实现 4.1. 创建互斥锁类 4.2 编写静态内部类&#xff0c;继承AQS 4.3 内部类实现AQS钩子函数 4.3 封装lock&#xff0c;unlock方法 4.4. 测试 5. 总结 本文章源码仓库&#xff1a;Conc…

SpringBoot解决跨域问题,什么是跨域问题

目录 什么是跨域 配置文件解决跨域问题 注解解决跨域问题 拦截器解决跨域问题 过滤器实现 使用ResponseBodyAdvice 什么是跨域 协议://域名:端口 一个不一样就是跨域 在浏览器的同源策略中&#xff0c;如果两个网页的协议&#xff08;例如&#xff0c;http 或 https&…

【算法刷题 | 回溯思想 06】4.17(子集、子集||)

文章目录 9.子集9.1题目9.2解法&#xff1a;回溯9.2.1回溯思路&#xff08;1&#xff09;函数返回值以及参数&#xff08;2&#xff09;终止条件&#xff08;3&#xff09;遍历过程 9.2.2代码实现 10.子集 ||10.1题目10.2解法&#xff1a;回溯10.2.1回溯思路10.2.2代码实现 9.子…

(2022级)成都工业学院数据库原理及应用实验五: SQL复杂查询

写在前面 1、基于2022级软件工程/计算机科学与技术实验指导书 2、成品仅提供参考 3、如果成品不满足你的要求&#xff0c;请寻求其他的途径 运行环境 window11家庭版 Navicat Premium 16 Mysql 8.0.36 实验要求 在实验三的基础上完成下列查询&#xff1a; 1、查询医生…

C++ 抽象

关键字&#xff1a;virtual 在C中可以使用关键字 virtual将函数声明为抽象函数&#xff0c;从而对类进行抽象&#xff1b;至少有一个成员函数为抽象函数的类将被视为抽象类。抽象类无法进行实例化&#xff0c;因而抽象类在C中一般是为了给其他类提供一个可以继承的适当的基类作…

DSSAT作物模型建模方法与进阶基于Python语言快速批量运行DSSAT模型及交叉融合、扩展应用技术应用

随着数字农业和智慧农业的发展&#xff0c;基于过程的作物生长模型&#xff08;Process-based Crop Growth Simulation Model&#xff09;在模拟作物对气候变化的响应与适应、农田管理优化、作物品种和株型筛选、农业碳中和、农田固碳减排等领域扮演着越来越重要的作用。Decisi…

React Flow浏览器默认事件失效问题解决

前情提要 React Flow可以使用滑轮来实现对于该部分区域的放大和缩小&#xff0c;并且自动拦截浏览器默认的滑轮和滑轮按键组合事件&#xff0c;如&#xff1a;Ctrl鼠标滑轮事件。那么这就导致在非该区域的地方使用了浏览器默认的滑轮事件且改变了原有页面的大小时&#xff0c;…

libftdi1学习笔记 8 - MPSSE SPI优化速度

之前用GPIO模拟SPI速度有点慢&#xff0c;加上直接发送字节的方式实现SPI。 1. IO的定义 如果不使用模拟的方式&#xff0c;则SCK&#xff0c;MOSI&#xff0c;MISO必须固定。通过这3个IO判断是哪种模式 if(spi[port].sck ! 0 || spi[port].mosi_io0 ! 1 || spi[port].miso_…

basic_string_view解析

src\rttr\string_view.h 对github项目rttr&#xff08;C反射库&#xff09;解析&#xff0c;链接&#xff1a;https://github.com/rttrorg/rttr template<typename CharT, typename Traits std::char_traits > class basic_string_view 私有成员变量 const value_ty…

安卓官方例程

https://learn.microsoft.com/zh-cn/shows/connecton-demand/202?sourcerecommendations https://learn.microsoft.com/zh-cn/visualstudio/cross-platform/cross-platform-mobile-development-in-visual-studio?viewvs-2022 https://learn.microsoft.com/zh-cn/shows/xamari…

pta L1-063 吃鱼还是吃肉

L1-063 吃鱼还是吃肉 分数 10 全屏浏览 切换布局 作者 陈越 单位 浙江大学 国家给出了 8 岁男宝宝的标准身高为 130 厘米、标准体重为 27 公斤&#xff1b;8 岁女宝宝的标准身高为 129 厘米、标准体重为 25 公斤。 现在你要根据小宝宝的身高体重&#xff0c;给出补充营养的…

Abstract Factory抽象工厂模式详解

模式定义 提供一个创建一系列相关或互相依赖对象的接口&#xff0c;而无需指定它们具体的类。 代码示例 public class AbstractFactoryTest {public static void main(String[] args) {IDatabaseUtils iDatabaseUtils new OracleDataBaseUtils();IConnection connection …

前端页面助手 (vue)

快速开发页面&#xff08;图形化开发页面&#xff09; 自主编辑 然后自己也可以修改属性 最后导出页面即可 github地址 ;https://github.com/opentiny/tiny-engine

图灵奖简介及2023年获奖者Avi Wigderson的贡献

No.内容链接1Openlayers 【入门教程】 - 【源代码示例300】 2Leaflet 【入门教程】 - 【源代码图文示例 150】 3Cesium 【入门教程】 - 【源代码图文示例200】 4MapboxGL【入门教程】 - 【源代码图文示例150】 5前端就业宝典 【面试题详细答案 1000】 文章目录 2023年的…

9月BTE第8届广州国际生物技术大会暨展览会,全媒体聚焦下的高精尖行业盛会

政策春风助力&#xff0c;共迎大湾区生物医药行业50亿红利 今年3月“创新药”首次写入国务院政府工作报告之后&#xff0c;广州、珠海、北京多地政府纷纷同步出台了多项细化政策&#xff0c;广州最高支持额度高达50亿元&#xff0c;全链条为生物医药产业提供资金支持&#xff…

service-mesh

01 架构的发展历史 1.1单机小型时代 1.2 垂直坼分 1.3 集群化负载均衡架构 用户量越来越大&#xff0c;就意味着需要更多的小型机&#xff0c;但是小型机价格昂贵&#xff0c;操作维护成本高。 此时更优的选择是采用多个 pc 机部署同一个应用的方案&#xff0c;但是此时就需…