[React源码解析] Fiber (二)

在React15及以前, Reconciler采用递归的方式创建虚拟Dom, 但是递归过程不可以中断, 如果组件的层级比较深的话, 递归会占用线程很多时间, 那么会造成卡顿。

为了解决这个问题, React16将递归的无法中断的更新重构为异步的可中断更新, Fiber架构诞生。

文章目录

      • 1.Fiber的结构
      • 2.作为架构来说
      • 3.作为静态的数据结构
      • 4.作为动态的工作单元

1.Fiber的结构

作为架构来说, 之前React15的Reconciler采用递归的方式执行, 数据保存在递归调用栈中, 称为Stack Reconciler, React16的Reconciler基于Fiber节点实现, 称为Fiber Reconciler。

作为静态的数据结果来说, 每个Fiber节点对应一个组件, 保持了该组件的类型(函数组件/类组件/原生组件)和对应的DOM节点信息。

作为动态的工作单元来说, 每个Fiber节点保持了本次更新中该组件改变的状态, 要执行的工作(需要被删除/被插入页面中/被更新)。

function FiberNode(tag: WorkTag,pendingProps: mixed,key: null | string,mode: TypeOfMode,
) {// 作为静态数据结构的属性this.tag = tag;this.key = key;this.elementType = null;this.type = null;this.stateNode = null;// 用于连接其他Fiber节点形成Fiber树this.return = null;this.child = null;this.sibling = null;this.index = 0;this.ref = null;// 作为动态的工作单元的属性this.pendingProps = pendingProps;this.memoizedProps = null;this.updateQueue = null;this.memoizedState = null;this.dependencies = null;this.mode = mode;this.effectTag = NoEffect;this.nextEffect = null;this.firstEffect = null;this.lastEffect = null;// 调度优先级相关this.lanes = NoLanes;this.childLanes = NoLanes;// 指向该fiber在另一次更新时对应的fiberthis.alternate = null;
}

2.作为架构来说

作为架构来说, 每一个Fiber节点对应一个组件, 多个Fiber形成树。

// 指向父级Fiber节点
this.return = null;
// 指向子Fiber节点
this.child = null;
// 指向右边第一个兄弟Fiber节点
this.sibling = null;
function App() {return (<div>i am<span>KaSong</span></div>)
}

对应的Fiber树:

在这里插入图片描述

作为一个工作单元, return指节点执行完completeWork后返回的下一个节点。子Fiber节点以及兄弟节点完成工作后返回其父级节点, 故return代替父节点。

3.作为静态的数据结构

// Fiber对应组件的类型 Function/Class/Host...
this.tag = tag;
// key属性
this.key = key;
// 大部分情况同type,某些情况不同,比如FunctionComponent使用React.memo包裹
this.elementType = null;
// 对于 FunctionComponent,指函数本身,对于ClassCompoent,指class,对于HostComponent,指DOM节点tagName
this.type = null;
// Fiber对应的真实DOM节点
this.stateNode = null;

4.作为动态的工作单元

// 保存本次更新造成的状态改变相关信息
this.pendingProps = pendingProps;
this.memoizedProps = null;
this.updateQueue = null;
this.memoizedState = null;
this.dependencies = null;this.mode = mode;// 保存本次更新会造成的DOM操作
this.effectTag = NoEffect;
this.nextEffect = null;this.firstEffect = null;
this.lastEffect = null;

与调度优先级有关的属性:

// 调度优先级相关
this.lanes = NoLanes;
this.childLanes = NoLanes;

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

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

相关文章

探讨UI自动化测试几步骤

随着软件开发的不断发展&#xff0c;UI自动化测试变得越来越重要&#xff0c;它能够提高测试效率、降低人为错误&#xff0c;并确保软件交付的质量。本文将介绍UI自动化测试的一般步骤和一些最佳实践&#xff0c;以帮助开发团队更好地实施自动化测试。 需求分析和选择测试工具&…

2024 IC FPGA 岗位 校招面试记录

引言 各位看到这篇文章时&#xff0c;24届校招招聘已经渐进尾声了。 在这里记录一下自己所有面试&#xff08;除了时间过短或者没啥干货的一些研究所外&#xff0c;如中电55所&#xff08;南京&#xff09;&#xff0c;航天804所&#xff08;上海&#xff09;&#xff09;的经…

Java链表(2)

&#x1f435;本篇文章将对双向链表进行讲解&#xff0c;模拟实现双向链表的常用方法 一、什么是双向链表 双向链表在指针域上相较于单链表&#xff0c;每一个节点多了一个指向前驱节点的引用prev以及多了指向最后一个节点的引用last&#xff1a; 二、双向链表的模拟实现 首先…

MongoDB(1)

文章目录 一、MongoDB简介二、MongoDB历史MongoDB支持语言MongoDB与关系型数据库术语对比数据类型 三、部署MongoDB下载二进制包安装步骤启动MongoDB客户端配置关闭MongoDB前台启动后台启动kill 命令关闭MongoDB函数关闭 一、MongoDB简介 Mongo并非芒果&#xff08;Mango&…

bert提取词向量比较两文本相似度

使用 bert-base-chinese 预训练模型做词嵌入&#xff08;文本转向量&#xff09; 模型下载&#xff1a;bert预训练模型下载-CSDN博客 参考文章&#xff1a;使用bert提取词向量 下面这段代码是一个传入句子转为词向量的函数 from transformers import BertTokenizer, BertMod…

防御保护----防火墙基本知识

一.防火墙的基本知识--------------------------------------------------------- 防火墙&#xff1a;可以想象为古代每个城市的城墙&#xff0c;用来防守敌军的攻击。墙&#xff0c;始于防&#xff0c;忠于守。从古至今&#xff0c;墙予人以安全之意。 防火墙的主要职责在于&…

【第七在线】数字化转型:智能商品计划管理的核心要素

随着科技的快速发展&#xff0c;数字化转型已经成为企业适应市场变化、提高运营效率的必由之路。尤其在服装行业&#xff0c;快速的市场反应和精准的供应链管理显得尤为重要。其中&#xff0c;智能商品计划管理作为数字化转型的核心要素&#xff0c;正在重塑整个行业的竞争格局…

vite 脚手架搭建 vue3 项目

一、版本 node 版本&#xff1a;18.11.0 二、创建前准备 如果还未安装 vite 需先安装&#xff1a; 1、winr&#xff0c;输入 cmd 进入命令提示符窗口&#xff0c;输入以下命令全局安装vite npm install -g vite2、查看安装成功后的 vite 版本 npm list vite三、步骤 1、…

添加了gateway之后远程调用失败

前端提示500&#xff0c;后端提示[400 ] during [GET] to [http://userservice/user/1] 原因是这个&#xff0c;因为在请求地址写了两个参数&#xff0c;实际上只传了一个参数 解决方案&#xff1a;加上(required false)并重启所有相关服务

老铁,公网访问局域网,一起游戏远程联机

下载地址 Windows 64位 (切勿直接在压缩文件中操作,全部解压到一处后再操作,请关闭某60(会胡乱拦截),可用其他任意安全软件)Mac OS X 64位 (给fastnat执行权限 chmod x ./fastnat.. 终端运行二进制,自行百度)Linux 64位 (给fastnat执行权限 chmod x ./fastnat..)Linux/ARM 32位…

inode生命周期

1.添加inode到inode cache链表 当inode的引用计数器i_count为0后&#xff0c;会调用iput_final去释放 static void iput_final(struct inode *inode) {struct super_block *sb inode->i_sb;const struct super_operations *op inode->i_sb->s_op;unsigned long sta…

Flask 入门1

1. 关于 Flask Flask诞生于2010年&#xff0c; Armin Ronacher的一个愚人节玩笑。不过现在已经是一个用python语言基于Werkzeug工具箱编写的轻量级web开发框架&#xff0c;它主要面向需求简单&#xff0c;项目周期短的小应用。 Flask本身相当于一个内核&#xff0c;其他几乎所…