当前位置: 首页 > news >正文

Fiber Node的数据结构,以及如何在Reconciliation阶段被使用。

首先,Fiber Node是React用来描述组件树的数据结构,每一个React组件都对应一个Fiber Node。下面是一个Fiber Node的基本结构:

const fiber = {// 标识这个Fiber Node的类型(函数组件,类组件,DOM节点类型等)type: null,// 对应的React元素element: null,// 父级Fiber Nodereturn: null,// 子级Fiber Nodechild: null,// 兄弟Fiber Nodesibling: null,// Fiber Node对应的DOM节点或者组件实例stateNode: null,// Fiber Node的propspendingProps: null,// 保存旧的props,用于比较memoizedProps: null,// 保存旧的state,用于比较memoizedState: null,// 保存此Fiber Node上的更新updateQueue: null,// 标识Fiber Node的状态(需要更新,需要删除等)effectTag: null,// 保存副作用(需要被commit的更改)nextEffect: null,// 其他的字段...
};

在Reconciliation阶段,React会遍历Fiber Node构成的Fiber树,比较新旧props和state,然后决定是否需要更新。可以通过以下伪代码来理解这个过程:

function beginWork(currentFiber, nextProps) {// 比较新旧propsif (currentFiber.memoizedProps !== nextProps) {// 如果props有变化,标记这个Fiber Node需要更新currentFiber.effectTag = 'UPDATE';}// 处理子Fiber NodereconcileChildren(currentFiber, currentFiber.pendingProps.children);
}function reconcileChildren(currentFiber, nextChildrenElements) {// 这里省略了创建和更新Fiber Node的代码// 在实际的源码中,React会比较新旧children,// 然后决定是否需要创建新的Fiber Node,或者复用旧的Fiber Node
}

注意:以上代码只是为了解释React Fiber的工作原理,实际上React Fiber的源码中处理Fiber Node和Reconciliation的逻辑要复杂得多。

http://www.lryc.cn/news/267370.html

相关文章:

  • Spring Cloud Alibaba 之 Sentinel
  • Jenkins Tutorial
  • css mask 案例
  • 案例系列:Movielens_预测用户对电影的评分_基于行为序列Transformer的推荐系统
  • 单词接龙[中等]
  • 机器人制作开源方案 | 森林管理员
  • Laravel框架使用phpstudy本地安装的composer用Laravel 安装器进行安装搭建
  • 炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】
  • 2023年国赛高教杯数学建模E题黄河水沙监测数据分析解题全过程文档及程序
  • 跨国企业传输大文件注意事项和解决方案
  • 【Redis】Redis 的数据类型
  • QT小技巧 - 使用QMovie进行gif切帧
  • ES-搜索
  • 微信小程序面试题
  • OpenCV之图像匹配与定位
  • 掌握JWT:解密身份验证和授权的关键技术
  • git命令和docker命令
  • 【K8S in Action】服务:让客户端发现pod 并与之通信(2)
  • Spring Boot 中实现跨域的几种方式
  • WT2605C音频蓝牙语音芯片:单芯片实现蓝牙+MP3+BLE+电话本多功能应用
  • 计算机毕业设计 基于SpringBoot的高校宣讲会管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
  • Android 使用Serialiable接口和Parcelable接口进行数据传送
  • 【数据结构入门精讲 | 第十七篇】一文讲清图及各类图算法
  • Python 直方图的绘制-`hist()`方法(Matplotlib篇-第7讲)
  • Quartz持久化(springboot整合mybatis版本实现调度任务持久化)--提供源码下载
  • 掌握的单词个数 - 华为OD统一考试
  • 如何使用ArcGIS Pro将Excel表转换为SHP文件
  • 11.1Linux串口应用程序开发
  • log4j学习
  • 【Vue2+3入门到实战】(4)Vue基础之指令修饰符 、v-bind对样式增强的操作、v-model应用于其他表单元素 详细示例