react源码探索之预先知识了解

  • 最近快期末考试,本来不打算写博客的,但是一旦停下不知又是何年,或许是我工作之后,也或许是永远把。毕竟这只是用来记录我大学的殷实生活,大四我不再着重记录,而是投身于找工作。
  • 时光匆匆,重大一开始写博客起,也已经写了八九十篇了,每次回顾以前的博客时,就是感到时间快,真他娘快,转眼三年,看着每一篇博客,想着每一周的经历,感觉不那么真实,好像仿佛回到了那几天,这一切终究是要结束的,天下无不散之宴席
  • 这篇文章是上个月我记的笔记与总结,我之前也阅读过vue源码的大概流程,还有部分api的细节,我明显的对比出react源码的相对复杂,感觉facebook那群团队就是操作系统出身一般。有很多跨领域的技术,比如双缓冲,我之前在写c++游戏时用esayX有过先行了解。总之react确实极其有意思,能学到很多思路。
  • 下面是一些相关名词的介绍,一开始我对这些确实有些困惑的,好在如今网络发达,资源也很多,甚至b栈都有相关的源码讲解,可惜没找到18版本的。不过网上的资源也不能全信,有些人也是一知半解就发出来的,我被错误的引导两天,当时那是越看越懵。

Fiber 架构背景知识

在 React 中,为了实现高效的更新机制,引入了 Fiber 架构。Fiber 是一种数据结构,用于描述 React 组件的工作单元。每个 Fiber 节点对应一个 React 组件实例或者 DOM 元素。

  • 我们提到的虚拟DOM在React中有个正式的称呼——Fiber
    React 在更新过程中,会构建和处理 Fiber 树。这棵树用于跟踪组件的状态、属性以及它们之间的关系等诸多信息。

current和alternate属性的含义

  • 当前屏幕上显示内容对应的Fiber树称为current Fiber树,正在内存中构建的Fiber树称为workInProgress Fiber树
  • current是指向当前正在屏幕上显示的 Fiber 树的引用。它代表了当前用户看到的 UI 对应的组件树结构
  • alternate是与之对应的另一个 Fiber 树的引用。在 React 的更新过程中,React 会构建一个新的 Fiber 树(称为workInProgress树),这个新树的每个节点的alternate属性会指向旧的(current)树中对应的节点。
  • 例如,当一个组件的状态发生改变,React 会开始构建一个新的 Fiber 树来反映这个更新。在构建过程中,新树的节点通过alternate属性与旧树的节点关联起来。这样做的目的是方便在更新完成后,将新树替换旧树(current树),实现高效的 UI 更新。

代码示例帮助理解

  • 假设我们有一个简单的 React 组件:
import React, { useState } from 'react';
function Counter() {const [count, setCount] = useState(0);const handleClick = () => {setCount(count + 1);};return (<div><p>Count: {count}</p><button onClick={handleClick}>Increment</button></div>);
}
  • 在 React 内部,当setCount被调用触发组件更新时,React 会创建一个新的 Fiber 树(workInProgress树)。新树中代表Counter组件的 Fiber 节点的alternate属性会指向旧的(current)树中对应的Counter组件的 Fiber 节点。
  • 这种双缓冲(current和alternate)的机制允许 React 在后台构建新的 UI,同时保持旧的 UI 在屏幕上显示,直到新的 UI 完全构建好并且可以无缝切换,从而避免在更新过程中出现 UI 的闪烁或者不一致等问题。

hostRootFiber

  • hostRootFiber是 React Fiber 树的根节点。在 React 应用中,整个组件树结构是基于 Fiber 架构构建的,而hostRootFiber就是这个树形结构的起点。
  • 它主要用于管理整个应用的渲染过程,包括协调子组件的更新、挂载和卸载等操作。从概念上讲,它类似于传统 DOM 树中的document对象,是整个渲染流程的控制中心。
  • 在 Web 环境中,hostRootFiber与浏览器的 DOM 相关联。它负责将 React 组件树渲染成实际的 DOM 元素。当 React 应用首次加载时,hostRootFiber会创建并挂载初始的 DOM 节点,后续的更新操作也会通过hostRootFiber来更新对应的 DOM 部分。
  • 例如,在一个简单的 React Web 应用中,hostRootFiber会对应 HTML 文件中的
    (假设这是 React 应用挂载的根 DOM 节点)。React 会将整个组件树挂载到这个root节点上,而hostRootFiber就是这个挂载过程的关键节点,它管理着从 React 组件到实际 DOM 元素的转换。

两种重要的数据结构

Fiber

function FiberNode(tag: WorkTag,pendingProps: mixed,key: null | string,mode: TypeOfMode,
) {// 作为静态数据结构的属性this.tag = tag;this.key = key;this.elementType = null;// 大部分情况同type,某些情况不同,比如FunctionComponent使用React.memo包裹this.type = null;// 对于 FunctionComponent,指函数本身,对于ClassComponent,指class,对于HostComponent,指DOM节点tagNamethis.stateNode = null;// Fiber对应的真实DOM节点// 用于连接其他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;// 保存本次更新会造成的DOM操作this.effectTag = NoEffect;this.nextEffect = null;this.firstEffect = null;this.lastEffect = null;// 调度优先级相关this.lanes = NoLanes;this.childLanes = NoLanes;// 指向该fiber在另一次更新时对应的fiberthis.alternate = null;
}

这里需要提一下,为什么父级指针叫做return而不是parent或者father呢?因为作为一个工作单元,return指节点执行完completeWork后会返回的下一个节点。子Fiber节点及其兄弟节点完成工作后会返回其父级节点,所以用return指代父级节点

ReactElement

export type ReactElement = {|// 用于辨别ReactElement对象$$typeof: any,// 内部属性type: any, // 表明其种类key: any,ref: any,props: any,// ReactFiber 记录创建本对象的Fiber节点, 还未与Fiber树关联之前, 该属性为null_owner: any,// __DEV__ dev环境下的一些额外信息, 如文件路径, 文件名, 行列信息等_store: {validated: boolean, ...},_self: React$Element<any>,_shadowChildren: any,_source: Source,
|};

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

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

相关文章

java 通过jdbc连接sql2000方法

1、java通过jdbc连接sql2000 需要到三个jar包&#xff1a;msbase.jar mssqlserver.jar msutil.jar 下载地址&#xff1a;https://download.csdn.net/download/sunfor/90145580 2、将三个jar包解压到程序中的LIB下&#xff1a; 导入方法&#xff1a; ①在当前目录下&#xff…

车牌识别之二:车牌OCR识别(包含全部免费的数据集、源码和模型下载)

重要的事说在前面 数据集&#xff1a; https://pan.baidu.com/s/1YayAeqgdqZ0u2vSovd0Z4w 提取码&#xff1a;8888 如果作者误删的话&#xff0c;参考这里下载的CCPD2019.tar.xz和CCPD2020.zip获取。 背景 上一节车牌识别之一&#xff1a;车牌检测(包含全部免费的数据集、源…

单北斗+鸿蒙系统+国产芯片,遨游防爆手机自主可控“三保险”

在当今全球科技竞争日益激烈的背景下&#xff0c;技术自主可控的重要性愈发凸显。它不仅关乎国家安全&#xff0c;更是推动产业升级和经济发展的关键。特别是在一些特殊领域&#xff0c;如防爆通信&#xff0c;自主可控的技术更是不可或缺。遨游通讯推出了一款融合了单北斗、鸿…

【zlm】 webrtc源码讲解三(总结)

目录 setsdp onwrite ​编辑 play 参考 setsdp onwrite play 参考 【zlm】 webrtc源码讲解_zlm webrtc-CSDN博客 【zlm】 webrtc源码讲解&#xff08;二&#xff09;_webrtc 源码-CSDN博客

打造专业的电子商务维护页面:如何确保用户信任与业务连续性

在电子商务网站的运营过程中&#xff0c;维护是不可避免的一部分。然而&#xff0c;网站的短暂下线如果处理不当&#xff0c;可能会导致用户流失和销售额的下降。为了在维护期间依然保持客户的信任与业务的连续性&#xff0c;创建一个专业的维护页面至关重要。本文将为您详细介…

【python因果库实战5】使用银行营销数据集研究营销决策的效果5

目录 接触次数的效应 重新定义治疗变量和潜在混杂因素 更深入地审视干预情景 逆概率加权 标准化 总结及与非因果分析的比较 接触次数的效应 我们现在转而研究当前营销活动中接触次数的数量&#xff08;campaign&#xff09;对积极结果发生率的影响。具体来说&#xff0c;…

单步调试Android Framework——App冷启动

纸上得来终觉浅&#xff0c;绝知此事要躬行。 —— [宋]陆游 基于aosp_cf_x86_64_phone-trunk_staging-eng &#xff0c; 下面是具体断点位置。 第一部分&#xff0c;桌面launcher进程 com.android.launcher3.touch.ItemClickHandler onClickonClickAppShortcutstartAppShor…

【5G】5G的主要架构选项

最初&#xff0c;在3GPP讨论中考虑了所有可能的聚合和核心网络组合&#xff0c;共有八个架构选项。以下重点介绍option2、3、4和7。 1. 独立组网 (Standalone, SA) 架构选项 2 &#xff1a;Standalone architecture with 5G-core 特点&#xff1a; 5G核心网&#xff08;5GC, …

【Flink-scala】DataStream编程模型总结

系列文章目录 1.【Flink-Scala】DataStream编程模型之数据源、数据转换、数据输出 2.【Flink-scala】DataStream编程模型之 窗口的划分-时间概念-窗口计算程序 3.【Flink-scala】DataStream编程模型之窗口计算-触发器-驱逐器 4.【Flink-scala】DataStream编程模型之水位线 5.【…

iframe webview打开外链内嵌video标签导致视频无法全屏展示

iframe webview打开外链内嵌video标签导致视频无法全屏展示 解决方法iframe 添加属性webview 添加属性 解决方法 iframe 添加属性 <iframe style"width: 100%;height: 100vh;" src"http://xxx.xxx........" allowfullscreen"true" w…

【spring专题】spring如何解析配置类和扫描包路径

文章目录 目标重要的组件加载配置类启动解析组件定位配置类解析配置类 扫描过程总结 目标 这是我们使用注解方式启动spring容器的核心代码 AnnotationConfigApplicationContext applicationContext new AnnotationConfigApplicationContext(MyConfig.class); User user (Us…

MySQL数据库备份,恢复

备份策略不同&#xff0c;恢复方式也不同。 在进行数据备份的时候&#xff0c;能使用冷备份就使用冷备份&#xff0c;安全可靠&#xff0c; 但是冷备份自己的缺点是【每一个数据库都对应着一个前端的业务】此时前端业务停止可能带来经济损失。 一.备份类型 根据服务是否在线…

算法(三)——贪心算法

文章目录 定义基本原理基本思路优缺点优点缺点 经典案例及解析找零问题问题描述贪心思路算法解析java代码示例 活动选择问题问题描述贪心思路算法解析java代码示例 车辆路径问题问题描述贪心思路算法分析java代码示例 定义 贪心算法是指在求解问题时&#xff0c;总是做出在当前…

代码随想录算法训练营第七天-哈希-454. 四数相加II

力扣原题链接&#xff1a;454. 四数相加 II使用map这个数据结构来保存前两个集合元素和的结果&#xff0c;value的值代表和这个值的出现的次数使用这个方法&#xff0c;可以让算法复杂度从 n 4 n^4 n4下降到 n 2 n^2 n2&#xff0c;效率会大大提高 #include <iostream> …

OpenCV 学习记录:首篇

最近在学习机器视觉&#xff0c;希望能通过记录博客的形式来鞭策自己坚持学完&#xff0c;同时也把重要的知识点记录下来供参考学习。 1. OpenCV 介绍与模块组成 什么是 OpenCV&#xff1f; OpenCV (Open Source Computer Vision Library) 是一个开源的计算机视觉和机器学习软…

【Rust自学】3.1. 变量与可变性

3.1.0. 写在正文之前 欢迎来到Rust自学的第三章&#xff0c;一共有6个小节&#xff0c;分别是: 变量与可变性&#xff08;本文&#xff09;数据类型&#xff1a;标量类型数据类型&#xff1a;复合类型函数和注释控制流&#xff1a;if else控制流&#xff1a;循环 通过第二章…

基于vue框架的的校园二手市场交易平台8k655(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;学生,大学,商品分类,商品信息,在线咨询 开题报告内容 基于Vue框架的校园二手市场交易平台开题报告 一、课题意义 &#xff08;一&#xff09;理论意义 本课题旨在研究基于Vue框架的校园二手市场交易平台的设计与实现。当前&#xff…

3D计算机视觉概述

3D计算机视觉 3D计算机视觉概述 像机标定 文章目录 3D计算机视觉前言一、人类视觉二、计算机视觉2.1 计算机视觉的研究目的2.2 计算机视觉的研究任务2.3 计算机视觉的研究方法2.4 视觉计算理论2.5 马尔框架中计算机视觉表达的四个层次2.5.1 图像&#xff08;像素表达&#xff…

操作系统(13)虚拟存储器

前言 操作系统中的虚拟存储器是一项关键技术&#xff0c;它为用户提供了一个远大于实际物理内存容量的逻辑内存空间。 一、定义与原理 虚拟存储器是具有请求调入功能和置换功能&#xff0c;能从逻辑上对内存容量加以扩充的存储器系统。其逻辑容量由内存容量与外存容量之和决定&…

【实用技能】如何运用Visual Paradigm快速创建团队的项目模板

从 Visual Paradigm 17.2 &#xff08;&#xff09;版开始&#xff0c;您可以创建自己的项目模板并与团队共享。这样团队成员就可以轻松创建符合团队标准的新项目。本文将指导您完成为团队创建项目模板的过程。 Visual Paradigm v17.2试用版下载 先决条件 您的团队必须使用 …