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双缓冲

相关推荐
小声读源码3 分钟前
【技巧】dify前端源代码修改第一弹-增加tab页
前端·pnpm·next.js·dify
假客套12 分钟前
2025 后端自学UNIAPP【项目实战:旅游项目】7、景点详情页面【完结】
前端·uni-app·旅游
程序员小张丶24 分钟前
基于React Native开发HarmonyOS 5.0主题应用技术方案
javascript·react native·react.js·主题·harmonyos5.0
Captaincc26 分钟前
Ilya 现身多大毕业演讲:AI 会完成我们能做的一切
前端·ai编程
teeeeeeemo39 分钟前
Vue数据响应式原理解析
前端·javascript·vue.js·笔记·前端框架·vue
Sahas101943 分钟前
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.
前端·javascript·vue.js
Jinxiansen02111 小时前
Vue 3 实战:【加强版】公司通知推送(WebSocket + token 校验 + 心跳机制)
前端·javascript·vue.js·websocket·typescript
MrSkye1 小时前
React入门:组件化思想?数据驱动?
前端·react.js·面试
BillKu1 小时前
Java解析前端传来的Unix时间戳
java·前端·unix
@Mr_LiuYang1 小时前
网页版便签应用开发:HTML5本地存储与拖拽交互实践
前端·交互·html5·html5便签应用