React原理之Fiber详解

前置文章:

  1. React原理之 React 整体架构解读
  2. React原理之整体渲染流程

-----读懂这一篇需要对 React 整体架构和渲染流程有大致的概念 😊-----

React原理之 React 整体架构解读中,简单介绍了 Fiber 架构,也了解了 Fiber 节点的概念。

Fiber 节点是 Fiber 架构的核心概念之一,它是一种虚拟 DOM 的实现方式。

Fiber 本质上是一个对象, 使用了链表结构

双重缓冲是一种渲染优化技术,其使用两个 Fiber 树 来管理渲染,即当前树 current tree工作树 work-in-progress tree。当前树代表屏幕上当前显示的内容,而工作树用于准备下一次的渲染更新,用以实现平滑的更新。

Fiber 的含义

前面反复提到,与 React16 之前的栈式架构相比,Fiber 架构中的更新工作是可以中断的循环过程。

fiber 译为"纤维",React 的 Fiber 架构借鉴了 Fiber 作为轻量级、可调度执行单元的概念,将其应用于组件的渲染和更新过程中。

实际上,Fiber包含三层含义:

  1. fiber 架构
  2. 静态的数据结构
  3. 动态的工作单元

fiber 架构

React16之前的Reconciler采用递归的方式执行,数据保存在递归调用栈中,所以被称为stack ReconcilerReact16Reconciler基于Fiber节点实现,被称为Fiber Reconciler,各个 FiberNode 之间通过链表的形式串联起来。

看一下简化版源码:

js 复制代码
function FiberNode(tag, pendingProps, key, mode) {
	//...

	// Fiber树结构:周围的 Fiber Node 通过链表的形式进行关联
	this.return = null; // 上一级节点
	this.child = null; // 第一个子节点
	this.sibling = null; // 下一个同级节点
	this.index = 0; // 在上一级节点中的索引

	//...
}

静态的数据结构

作为静态的数据结构来说,每个Fiber节点对应一个React element,保存了该组件的类型(函数组件/类组件/原生组件...)、对应的 DOM 节点等信息。

js 复制代码
function FiberNode(tag, pendingProps, key, mode) {
	//...
	// 实例属性:

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

动态的工作单元

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

js 复制代码
// Props和State 改变相关信息
this.pendingProps = pendingProps; // 当前待处理的props
this.memoizedProps = null; // 上次渲染完成,已应用到组件的props
this.updateQueue = null; // 更新队列,用于存储状态更新和回调
this.memoizedState = null; // 上次渲染完成后的state,即组件的当前状态
this.dependencies = null; // 依赖列表,用于追踪副作用

this.mode = mode; // Fiber的模式

// Effects 副作用
this.flags = NoFlags; // Fiber的标志位,表示Fiber的生命周期状态
this.subtreeFlags = NoFlags; // 子树的标志位
this.deletions = null; // 待删除的子Fiber列表

// 优先级调度
this.lanes = NoLanes; // 当前Fiber的优先级
this.childLanes = NoLanes; // 子Fiber的优先级

下一篇:React原理之Fiber双缓冲

相关推荐
吴永琦(桂林电子科技大学)1 分钟前
HTML5
前端·html·html5
爱因斯坦乐4 分钟前
【HTML】纯前端网页小游戏-戳破彩泡
前端·javascript·html
恋猫de小郭10 分钟前
注意,暂时不要升级 MacOS ,Flutter/RN 等构建 ipa 可能会因 「ITMS-90048」This bundle is invalid 被拒绝
android·前端·flutter
前端极客探险家3 小时前
Flutter vs React Native:跨平台移动开发框架对比
flutter·react native·react.js
大莲芒4 小时前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react17
前端·react.js·前端框架
木木黄木木6 小时前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
Li_Ning217 小时前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一7 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla7 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡7 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript