学习篇之React Fiber概念及原理

什么是React Fibber?

React Fiber 是 React 框架的一种底层架构,为了改进 React 的渲染引擎,使其更加高效、灵活和可扩展。

传统上,React 使用一种称为堆栈调和递归算法来处理虚拟 DOM 的更新,这种方法在大型应用或者频繁更新的情况下可能会产生性能问题。React Fiber 则是基于一种增量渲染的思想,它将更新任务分解成小的、可中断的单元,使得 React 在更新时可以更灵活地控制和切换任务,提高应用的响应性。

React Fiber 的核心特点包括:

  1. 增量渲染: React Fiber 将更新任务拆分成多个小任务单元(称为 “fiber”),并使用优先级调度器来处理这些任务,以提高响应性和用户体验。

  2. 优先级调度: Fiber 引入了优先级概念,使 React 能够根据任务的优先级来决定任务的执行顺序,确保高优先级任务得到及时处理。

  3. 中断与恢复: React Fiber 允许在渲染过程中中断任务,然后在适当的时机恢复执行,从而避免了阻塞的情况。

  4. 任务取消: Fiber 具备任务取消的能力,可以取消不必要的更新,提高性能。

React Fiber 架构的引入使得 React 更适用于构建大型、复杂的应用,同时也为引入一些新的功能(如异步渲染、懒加载等)提供了基础。需要注意的是,从用户角度看,React Fiber 并不会引入显著的变化,它是在底层实现上进行的优化,但这些优化在一些场景下可能会显著地提升应用的性能。
在代码中fiber其实fiber就是一个类似双向链表的数据结构。如下图:
在这里插入图片描述

FiberNode

在 React Fiber 架构中,“FiberNode”(也称为 “Fiber”)是一个重要的概念,它代表了 React 中虚拟 DOM 树中的一个节点。FiberNode 是一个 JavaScript 对象,用于描述组件、元素或者其他 DOM 节点在虚拟 DOM 树中的信息。

每个 FiberNode 包含了组件的状态、属性、样式等信息,以及与其他节点的关系和更新状态。在 React Fiber 中,FiberNode 是实现增量渲染和协调的关键数据结构。通过 FiberNode,React 可以追踪组件树的变化、处理更新以及优先级调度等操作。
,它包含了节点的类型、属性、关系和状态等信息,是实现增量渲染和协调的关键。

FiberNode 的一些重要属性和信息包括:

  • type: 表示节点的类型,可以是函数组件、类组件、原生 DOM 元素等。
  • key 和 props: 节点的唯一标识符和属性,用于对比不同渲染周期的节点。
  • alternate: 用于双缓存技术,表示与当前 FiberNode 相对应的上一次渲染的 FiberNode。
  • child、sibling 和 return: 用于表示节点的子节点、兄弟节点和父节点的关系。
  • effectTag 和 effect: 表示节点的操作类型(插入、更新、删除等)和需要执行的副作用。
  • stateNode: 与节点对应的实际 DOM 元素、组件实例等。

通过这些属性,React Fiber 可以构建一棵虚拟 DOM 树,并在渲染过程中对其进行协调、更新和处理。FiberNode 的设计使得 React 能够实现增量渲染和中断恢复等特性,从而提高应用的性能和响应性。

举个例子来理解理解:

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>This is a simple example.</p>
    </div>
  );
}

在 React Fiber 中,每个组件、元素和 DOM 节点都对应一个 FiberNode。以下是对应上述组件的 FiberNode 结构的简化示意:

// 节点类型、标签和属性
const appFiber = {
  type: "div",
  key: null,
  props: {
    children: [
      { type: "h1", key: null, props: { children: "Hello, world!" }, ... },
      { type: "p", key: null, props: { children: "This is a simple example." }, ... }
    ]
  },
  stateNode: null, // 与实际 DOM 节点关联
  child: h1Fiber, // 子节点 Fiber
  sibling: null, // 兄弟节点 Fiber
  return: null, // 父节点 Fiber
  effectTag: null, // 用于表示更新操作类型
  effect: null, // 用于存储副作用操作,如 DOM 更新
  alternate: null // 对应上一次渲染的 FiberNode
};

const h1Fiber = {
  type: "h1",
  key: null,
  props: { children: "Hello, world!" },
  stateNode: null, // 与实际 DOM 节点关联
  child: null,
  sibling: pFiber,
  return: appFiber,
  effectTag: null,
  effect: null,
  alternate: null
};

const pFiber = {
  type: "p",
  key: null,
  props: { children: "This is a simple example." },
  stateNode: null, // 与实际 DOM 节点关联
  child: null,
  sibling: null,
  return: appFiber,
  effectTag: null,
  effect: null,
  alternate: null
};

在这个示例中,appFiber 代表 <div> 组件的 FiberNode,h1FiberpFiber 分别代表 <h1><p> 元素的 FiberNode。每个 FiberNode 包含了类型、属性、关系、状态等信息,这些信息用于构建虚拟 DOM 树并协调更新。

通过 childsiblingreturn 属性,FiberNodes 之间建立了层次关系。通过 effectTageffect 属性,React Fiber 可以追踪更新操作和副作用操作。

为什么不用 generator 或 async/await?

在 React Fiber 架构中,为什么不使用 Generator 或 async/await 这些异步编程的特性主要涉及到性能和控制的问题。以下是一些原因:

  1. 细粒度控制: React Fiber 需要在渲染过程中对任务执行顺序进行细粒度的控制,以实现优先级调度、中断恢复等特性。使用 Generator 或 async/await 等语言特性,无法提供足够细致的控制,难以实现这种精细的任务管理。

  2. 异步中断与恢复: React Fiber 需要能够在渲染过程中中断任务,并在适当的时候恢复。Generator 和 async/await 难以在任务中途中断,并在稍后恢复。而 Fiber 架构通过分割任务成可中断的小单元,实现了中断与恢复的能力。

  3. 性能和内存消耗: Generator 和 async/await 通常会引入更多的异步调度开销,可能导致额外的性能损失和内存消耗。React Fiber 为了提高性能,需要更高效地管理任务的执行顺序,从而减少不必要的开销。

  4. 更细致的优化: React Fiber 通过任务的优先级调度,可以更好地处理高优先级任务,使得用户操作的响应更迅速。这种优化在异步 Generator 或 async/await 中可能难以实现。

虽然 Generator 和 async/await 是在处理异步逻辑时非常有用的工具,但在 React Fiber 这种需要精细控制任务调度、中断和恢复的情况下,它们的限制可能会导致无法实现所需的功能。因此,React Fiber 架构选择了自己的方式来管理任务和优先级,以实现更高效、更精确的渲染和协调。

总结

今天分享的是才学习到的知识点,React框架东西很多,仍在那里探索中,争取每天进步一点点。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

request发送http请求

今天正式开始为大家介绍接口自动化&#xff0c;相信很多做测试的朋友&#xff0c;都用过一些工具&#xff0c;比如jmeter&#xff0c;loadrunner&#xff0c;postman等等&#xff0c;所以今天先给那些基础不太好的同学&#xff0c;先讲讲postman如何来测接口以及如何用pthon代码…

div 中元素居中的N种常用方法

本文主要记录几种常用的div盒子水平垂直都居中的方法。本文主要参考了该篇博文并实践加以记录说明以加深理解记忆 css之div盒子居中常用方法大全 本文例子使用的 html body结构下的div 盒子模型如下&#xff1a; <body><div class"container"><div c…

前端跨域的原因以及解决方案(vue),一文让你真正理解跨域

跨域这个问题,可以说是前端的必需了解的,但是多少人是知其然不知所以然呢&#xff1f; 下面我们来梳理一下vue解决跨域的思路。 什么情况会跨域&#xff1f; ​ 跨域的本质就是浏览器基于同源策略的一种安全手段。所谓同源就是必须有以下三个相同点&#xff1a;协议相同、域名…

C语言 棱形图案

目录 一、问题分析 上部分&#xff1a; 下部分&#xff1a; 二、代码演示 一、问题分析 如上图所示&#xff0c;我们可以将棱形进行拆解&#xff0c;分为上下两个部分。 上部分&#xff1a; 通过观察&#xff0c;我们得到 单边空格数 上半部分总行数 - 行数 - 1 …

金蝶软件实现导入Excel数据分录行信息到单据体分录行中

>>>适合KIS云专业版V16.0|KIS云旗舰版V7.0|K/3 WISE 14.0等版本<<< 金蝶软件中实现[导入Excel数据业务分录行]信息到[金蝶单据体分录]中,在采购订单|采购入库单|销售订单|销售出库单等类型单据中,以少量的必要字段在excel表格中按模板填列好,很方便快捷地从…

dingding机器人

“自定义机器人”只支持消息发送&#xff0c;自动回复需要“企业内部机器人” 消息发送 import requests import jsonres requests.post(https://oapi.dingtalk.com/robot/send?access_token036a339axxx,data json.dumps({"text": {"content":"h…

DAY04_SpringMVC—SpringMVC简介PostMan和ApiFox工具使用SpringMVC请求与响应REST风格

目录 一 SpringMVC简介1 SpringMVC概述问题导入1.1 SpringMVC概述 2 入门案例问题导入2.0 回顾Servlet技术开发web程序流程2.1 使用SpringMVC技术开发web程序流程2.2 代码实现【第一步】创建web工程&#xff08;Maven结构&#xff09;【第二步】设置tomcat服务器&#xff0c;加…

ssm+vue网上花店设计源码和论文

ssmvue网上花店设计源码和论文017 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xf…

分割等和子集——力扣416

思路:动态规划 bool canPartition(vector<int>& nums){int n=nums.size(

使用AffNet和HardNet进行图像匹配

一、说明 我们有一个任务是找到与给定查询图像最匹配的图像。首先&#xff0c;我们在OpenCV中尝试了使用SIFT描述符和基于Flann的匹配器的经典图像匹配。结果是完全错误的。然后是词袋...最后&#xff0c;找到了AffNet和HardNet。 二、关于AffNet和HardNet 本文专门介绍如何进…

【C++初阶】string类的常见基本使用

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习C和算法 ✈️专栏&#xff1a;C航路 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&#x1…

zabbix自动注册服务器以及部署代理服务器

文章目录 Zabbix自动注册服务器及部署代理服务器一.zabbix自动注册1.什么是自动注册2.环境准备3.zabbix客户端配置4.在 Web 页面配置自动注册5.验证自动注册 二.部署 zabbix 代理服务器1.分布式监控的作用&#xff1a;2.环境部署3.代理服务器配置4.客户端配置5.web页面配置5.1 …

Opencv-C++笔记 (17) : 模板匹配

文章目录 1--概念2-- 方法3 结果3.1 ROI区域的获取使用自适应目标匹配 1–概念 opencv 提供了一个专门用于模板匹配的函数 cv::matchTemplate();其调用方式如下&#xff1a; void cv::matchTemplate(cv::InputArray image, // 用于搜索的输入图像, 8U 或 32F, 大小 W-Hcv::Inpu…

LabVIEW使用图像处理进行交通控制性能分析

LabVIEW使用图像处理进行交通控制性能分析 采用普雷维特、拉普拉斯、索贝尔和任意的空间域方法对存储的图像进行边缘检测&#xff0c;并获取实时图像。然而&#xff0c;对四种不同空间域边缘检测方法的核的性能分析。 以前&#xff0c;空路图像存储在数据库中&#xff0c;道路…

drawio----输出pdf为图片大小无空白(图片插入论文)

自己在写论文插入图片时为了让论文图片放大不模糊&#xff0c;啥方法都试了&#xff0c;最后摸索出来这个。 自己手动画图的时候导出pdf总会出现自己的图片很小&#xff0c;pdf的白边很大如下如所示&#xff0c;插入论文的时候后虽然放大不会模糊&#xff0c;但是白边很大会显…

看完《孤注一掷》:原来这类人最容易被电信诈骗!

最近&#xff0c;你看了诈骗电影《孤注一掷》吗&#xff1f; “想成功先发疯&#xff0c;不顾一切向钱冲&#xff1b;拼一次富三代&#xff0c;拼命才能不失败&#xff1b;今天睡地板&#xff0c;明天当老板&#xff01;”诈骗工厂里的被骗去打黑工的人们一次次高呼着朗朗上口…

HTTPS 的加密流程

目录 一、HTTPS是什么&#xff1f; 二、为什么要加密 三、"加密" 是什么 四、HTTPS 的工作过程 1.对称加密 2.非对称加密 3.中间人攻击 4.证书 总结 一、HTTPS是什么&#xff1f; HTTPS (Hyper Text Transfer Protocol Secure) 是基于 HTTP 协议之上的安全协议&…

c语言——拷贝数组

这段代码是一个简单的数组拷贝示例。它的功能是将一个原始数组 original 的内容拷贝到另一个数组 copied 中&#xff0c;并输出两个数组的元素。 代码执行过程如下&#xff1a; 首先&#xff0c;在 main() 函数中定义了一个整型数组 original&#xff0c;并初始化了它的元素。…

【java毕业设计】基于SSM+MySql的人才公寓管理系统设计与实现(程序源码)--人才公寓管理系统

基于SSMMySql的人才公寓管理系统设计与实现&#xff08;程序源码毕业论文&#xff09; 大家好&#xff0c;今天给大家介绍基于SSMMySql的人才公寓管理系统设计与实现&#xff0c;本论文只截取部分文章重点&#xff0c;文章末尾附有本毕业设计完整源码及论文的获取方式。更多毕业…