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

React中createRoot函数原理解读——Element对象与Fiber对象、FiberRootNode与HostRootNode

【2024最新版】React18 核心源码分析教程(全61集)

Element对象与Fiber对象

在这里插入图片描述

在 React 中,Element 对象Fiber 对象 是核心概念,用于实现 React 的高效渲染和更新机制。以下是它们的详细解读:

1. Element 对象

定义

React 的 Element 对象 是通过 React.createElement 或 JSX 创建的**描述 UI 的普通 JavaScript 对象**。

结构

一个典型的 React Element 对象的结构如下:

const element = {type: 'div', // 或者是组件函数/类,表示元素类型props: {children: [/* 子元素 */],className: 'example',},key: null, // 用于唯一标识(diff 算法优化)ref: null, // 用于获取组件实例或 DOM$$typeof: Symbol(react.element), // 用于区分是否是 React 元素
};

在这里插入图片描述

特点
  1. 不可变:React Element 是不可变的,描述的是 UI 的快照。
  2. 轻量:它是 UI 的描述,并不包含状态或方法
  3. 静态描述:只表示渲染内容的静态信息,真正的 DOM 操作由 Fiber 对象实现

2. Fiber 对象

定义

Fiber 对象 是 React 16+ 引入的内部数据结构,用于管理组件的更新和渲染工作

结构

一个 Fiber 对象的基本结构如下:

const fiber = {tag: 5, // 表示 Fiber 类型,比如函数组件、类组件、HostComponent(如 div)type: 'div', // 与 Element 的 type 对应key: null, // 用于唯一标识stateNode: DOM节点或类组件实例, // 当前 Fiber 的实际实例,DOM 节点或类组件实例child: Fiber, // 第一个子节点sibling: Fiber, // 下一个兄弟节点return: Fiber, // 父节点pendingProps: {}, // 本次更新的新 propsmemoizedProps: {}, // 上一次渲染的 propsmemoizedState: {}, // 上一次渲染的 stateeffectTag: 0, // 副作用标志,表示需要执行的操作类型nextEffect: null, // 下一个有副作用需要处理的 FiberupdateQueue: {}, // 存放 state 更新队列
};
特点
  1. 动态:Fiber 是 React 的工作单元,包含组件的状态、更新等动态信息。
  2. 链表结构
    • Fiber 对象构成了一棵 Fiber 树
    • 每个 Fiber 节点通过 childsiblingreturn 连接。
  3. 与 Element 不同的职责
    • Element 是静态描述,Fiber 负责调度和计算实际的 UI 变化。
    • Fiber 引入了时间切片机制,支持任务中断和优先级调度
  4. 双缓存机制
    • React 使用两棵 Fiber 树(currentworkInProgress来实现双缓存,减少不必要的 DOM 操作。

3. Element 和 Fiber 的关系

特性Element 对象Fiber 对象
职责描述 UI管理组件状态、更新任务和渲染
生成React.createElement 创建由 React 调度和渲染过程生成
结构轻量、不可变的 JS 对象复杂、包含状态和关系的动态对象
生命周期创建后一直存在,描述 UI 快照每次渲染会重新生成或复用
关系是 Fiber 的静态输入是 Element 的动态实现

4. Fiber 的核心功能

  1. 调度更新任务:通过优先级控制任务的执行,允许任务中断。
  2. 状态管理:保存组件的状态和属性,管理 setState
  3. DOM 更新:对比新旧 Fiber 树,生成最小更新路径(Diff 算法)。
  4. 副作用管理:通过 effectTag 管理 DOM 操作、生命周期回调等。

5. 总结

  • React Element 是 UI 的静态描述,简单且不可变。
  • Fiber 是 React 内部的工作单元,负责处理状态、调度更新和渲染。

Fiber 的引入是 React 性能优化的关键,尤其是在构建复杂的 UI 和实现时间切片时。Element 和 Fiber 分工明确,共同构建了 React 的高效渲染机制。

FiberRootNode与HostRootFiber

在这里插入图片描述
在 React 的内部实现中,HostRootFiberFiberRootNode 是 React 核心中的两个重要概念,分别与 Fiber 树的根节点和渲染树的管理密切相关。以下是对这两个概念的详细解析。

1. FiberRootNode

定义
  • FiberRootNode 是 React 的根容器节点,用于管理整个应用的 Fiber 树和渲染环境
  • 它是 React 应用的真正入口点,通常与宿主环境(如 DOMReact Native)的根容器绑定
作用
  1. 管理宿主环境的渲染目标
    • 保存与宿主环境相关的信息(如 DOM 容器)。
    • 对应浏览器中的根节点(如 document.getElementById('root'))。
  2. 控制 Fiber 树的生命周期
    • 通过 current 字段管理当前正在渲染的 Fiber 树。
    • 配合双缓存机制,切换 currentworkInProgress
  3. 存储调度信息
    • 保存任务的优先级(如时间切片相关)。
    • 存储更新队列和渲染进度
结构

FiberRootNode 的典型结构如下:

const fiberRootNode = {containerInfo: DOMContainer, // 宿主环境的根容器,如 DOM 节点current: HostRootFiber, // 当前的根 FiberfinishedWork: null, // 已完成的 Fiber 树pendingLanes: 0, // 表示待处理更新的优先级队列eventTimes: [], // 记录事件触发时间,用于调度优化callbackNode: null, // 当前调度的回调函数callbackPriority: NoPriority, // 当前调度的优先级
};

2. HostRootFiber

定义
  • HostRootFiber 是 React 应用的 Fiber 树的根节点
  • 它对应于 React 渲染树的入口点,表示整个应用的根。
作用
  1. 承载应用的 Fiber 树:整个应用的组件树从 HostRootFiber 开始构建,作为 Fiber 树的根节点。
  2. 关联 Fiber 树与渲染器:它是连接 Fiber 树与 DOM(或其他宿主环境,如 React Native)之间的桥梁。
  3. 管理应用状态
    • HostRootFiber 保存整个应用的状态(如 pendingPropsmemoizedState)。
    • updateQueue 中记录了根节点的更新任务队列
结构

HostRootFiber 是一个特殊的 Fiber 节点,具有以下字段:

const hostRootFiber = {tag: HostRoot, // Fiber 类型标记,表示是 HostRootstateNode: FiberRootNode, // 指向 FiberRootNode 实例child: Fiber, // 子节点,指向应用的第一个组件(如 <App />)pendingProps: {}, // 本次更新传入的 propsmemoizedProps: {}, // 已保存的 propsmemoizedState: {}, // 当前组件状态updateQueue: {}, // 存储更新任务的队列alternate: WorkInProgressFiber, // 指向 workInProgress Fiber,用于双缓存机制
};

在这里插入图片描述

3.FiberRootNode 与 HostRootFiber 的关系

特性HostRootFiberFiberRootNode
定义Fiber 树的根节点,代表 React 树的逻辑入口React 根容器,管理 Fiber 树与宿主环境
存储内容应用的根组件和状态(App 的入口)宿主环境信息(如 DOM 容器)和调度状态
连接关系通过 stateNode 引用 FiberRootNode通过 current 引用 HostRootFiber
用途描述 Fiber 树的根管理整个应用的渲染和更新机制
生命周期每次更新会创建新的 workInProgress 副本始终存在,贯穿应用生命周期

4. 运行机制中的作用

  1. 初始化时

    • React 创建 FiberRootNode 并将 HostRootFiber 挂载到 FiberRootNodecurrent 属性上。
    • containerInfo 保存宿主环境的信息。
  2. 更新时

    • 更新会从 HostRootFiber 开始,React 使用双缓存机制创建 workInProgress 树。
    • 调和过程中,React 通过 FiberRootNode 调度任务,确保高优先级任务优先完成
  3. 渲染完成

    • 当 Fiber 树完成渲染(即 finishedWork 不为 null),React 将 FiberRootNode.current 切换到新的 Fiber 树。

5. 总结

  • FiberRootNode 是管理上的根节点,负责协调 Fiber 树和宿主环境之间的关系。
  • HostRootFiber 是逻辑上的根节点,描述了 React 树的结构。

它们的协作是 React 内部运行机制的核心,支撑了高效的渲染与更新流程。

相关文章:

React中createRoot函数原理解读——Element对象与Fiber对象、FiberRootNode与HostRootNode

【2024最新版】React18 核心源码分析教程&#xff08;全61集&#xff09; Element对象与Fiber对象 在 React 中&#xff0c;Element 对象 和 Fiber 对象 是核心概念&#xff0c;用于实现 React 的高效渲染和更新机制。以下是它们的详细解读&#xff1a; 1. Element 对象 定…...

【网络协议】动态路由协议

前言 本文将概述动态路由协议&#xff0c;定义其概念&#xff0c;并了解其与静态路由的区别。同时将讨论动态路由协议相较于静态路由的优势&#xff0c;学习动态路由协议的不同类别以及无类别&#xff08;classless&#xff09;和有类别&#xff08;classful&#xff09;的特性…...

DevOps:CI、CD、CB、CT、CD

目录 一、软件开发流程演化快速回顾 &#xff08;一&#xff09;瀑布模型 &#xff08;二&#xff09;原型模型 &#xff08;三&#xff09;螺旋模型 &#xff08;四&#xff09;增量模型 &#xff08;五&#xff09;敏捷开发 &#xff08;六&#xff09;DevOps 二、走…...

网络安全 | WAF防护开通流程与技术原理详解

关注&#xff1a;CodingTechWork 引言 随着互联网安全形势的日益严峻&#xff0c;Web应用防火墙&#xff08;WAF, Web Application Firewall&#xff09;逐渐成为网站和应用的标准防护措施。WAF能够有效识别和防止如SQL注入、跨站脚本攻击&#xff08;XSS&#xff09;、恶意流…...

【我的 PWN 学习手札】IO_FILE 之 FSOP

FSOP&#xff1a;File Stream Oriented Programming 通过劫持 _IO_list_all 指向伪造的 _IO_FILE_plus&#xff0c;进而调用fake IO_FILE 结构体对象中被伪造的vtable指向的恶意函数。 目录 前言 一、glibc-exit函数浅析 二、FSOP 三、Largebin attack FSOP &#xff08;…...

Spring——自动装配

假设一个场景&#xff1a; 一个人&#xff08;Person&#xff09;有一条狗&#xff08;Dog&#xff09;和一只猫(Cat)&#xff0c;狗和猫都会叫&#xff0c;狗叫是“汪汪”&#xff0c;猫叫是“喵喵”&#xff0c;同时人还有一个自己的名字。 将上述场景 抽象出三个实体类&…...

C语言——文件IO 【文件IO和标准IO区别,操作文件IO】open,write,read,dup2,access,stat

1.思维导图 2.练习 1&#xff1a;使用C语言编写一个简易的界面&#xff0c;界面如下 1&#xff1a;标准输出流 2&#xff1a;标准错误流 3&#xff1a;文件流 要求&#xff1a;按1的时候&#xff0c;通过printf输出数据&#xff0c;按2的时候&#xff0c;通过p…...

人工智能知识分享第九天-机器学习_集成学习

集成学习 概念 集成学习是机器学习中的一种思想&#xff0c;它通过多个模型的组合形成一个精度更高的模型&#xff0c;参与组合的模型称为弱学习器&#xff08;基学习器&#xff09;。训练时&#xff0c;使用训练集依次训练出这些弱学习器&#xff0c;对未知的样本进行预测时…...

腾讯云AI代码助手编程挑战赛-武器大师

作品简介 对话过程能够介绍二战 各种武器 冷战 武器 现代的 各种武器装备&#xff0c;陆海空三军都知道。 技术架构 使用全后端分离的架构&#xff0c;前端使用Vue脚手架&#xff0c;腾讯云修改样式css 开发环境、开发流程 系统&#xff1a;win11 开发工具&#xff1a;VS…...

Python机器学习笔记(十八、交互特征与多项式特征)

添加原始数据的交互特征&#xff08;interaction feature&#xff09;和多项式特征&#xff08;polynomial feature&#xff09;可以丰富特征表示&#xff0c;特别是对于线性模型。这种特征工程可以用统计建模和许多实际的机器学习应用中。 上一次学习&#xff1a;线性模型对w…...

java_深入理解main方法

深入理解main方法 在 main()方法中&#xff0c;我们可以直接调用 main 方法所在类的静态方法或静态属性。但是&#xff0c;不能直接访问该类中的非静态成员&#xff0c;必须创建该类的一个实例对象后&#xff0c;才能通过这个对象去访问类中的非静态成员&#xff0c;[举例说明]…...

NLP中常见的分词算法(BPE、WordPiece、Unigram、SentencePiece)

文章目录 一、基本概念二、传统分词方法2.1 古典分词方法2.2 拆分为单个字符 三、基于子词的分词方法&#xff08;Subword Tokenization&#xff09;3.1 主要思想3.2 主流的 Subword 算法3.3 Subword 与 传统分词方法的比较 四、Byte Pair Encoding (BPE)4.1 主要思想4.2 算法过…...

HTTP/HTTPS ②-Cookie || Session || HTTP报头

这里是Themberfue 上篇文章介绍了HTTP报头的首行信息 本篇我们将更进一步讲解HTTP报头键值对的含义~~~ ❤️❤️❤️❤️ 报头Header ✨再上一篇的学习中&#xff0c;我们了解了HTTP的报头主要是通过键值对的结构存储和表达信息的&#xff1b;我们已经了解了首行的HTTP方法和UR…...

前端 动图方案

1、vue3lottie 解析使用Bodymovin导出为json格式的Adobe After Effects动画 vue3lottie的使用神器&#xff1a;vue3-lottie (electron也适用)-CSDN博客 2、MP4文件 //template部分 <video class"header-bg" src"../../assets/images/screen/layout/heade…...

C#语言的字符串处理

C#语言的字符串处理 引言 在现代编程中&#xff0c;字符串处理是一项重要的技能&#xff0c;几乎在所有编程语言中都有应用。C#语言作为一种强类型的、面向对象的编程语言&#xff0c;提供了丰富的字符串处理功能。这使得开发人员能够方便地进行文本操作&#xff0c;比如字符…...

【shell编程】报错信息:bash: bad file descriptor(包含6种解决方法)

大家好&#xff0c;我是摇光~ 在运行 Shell 脚本时&#xff0c;遇到 bash: bad file descriptor 错误通常意味着脚本尝试对一个无效或不可用的文件描述符&#xff08;file descriptor&#xff09;执行了读写操作。 以下是一些可能导致这个问题的原因、详细案例以及相应的解决…...

vscode 配置c/c++环境 中文乱码

D:\MIscrobingDownload\mingw64\binmingw配置到环境变量中 测试一下&#xff0c;按winr输入cmd打开终端 gcc -v g -v安装插件 一 二 run code 因为run code 插件配置实质上是用它提供的指令进行编译执行&#xff0c;因此无法直接使用断点调试功能&#xff0c;需要对配置进行…...

leetcode 面试经典 150 题:两数之和

链接两数之和题序号1题型数组解题方法1. 哈希表&#xff0c;2. 暴力法难度简单熟练度✅✅✅✅✅ 题目 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输…...

【Unity报错】error Cs0103: The name ‘keyCode‘ does not exist in the current context

报错提示&#xff1a; 解决方法&#xff1a; KeyCode K大写...

家用万兆网络实践:紧凑型家用服务器静音化改造(二)

大家好&#xff0c;这篇文章我们继续分享家里网络设备的万兆升级和静音改造经验&#xff0c;希望对有类似需求的朋友有所帮助。 写在前面 在上一篇《家用网络升级实践&#xff1a;低成本实现局部万兆&#xff08;一&#xff09;》中&#xff0c;我们留下了一些待解决的问题。…...

“AI智能实训系统:让学习更高效、更轻松!

大家好&#xff0c;作为一名资深产品经理&#xff0c;今天我来跟大家聊聊一款备受瞩目的产品——AI智能实训系统。在这个人工智能技术飞速发展的时代&#xff0c;AI智能实训系统应运而生&#xff0c;为广大学习者提供了全新的学习体验。那么&#xff0c;这款产品究竟有哪些亮点…...

【Linux 之一 】Linux常用命令汇总

Linux常用命令 ./catcd 命令chmodclearcphistoryhtoplnmkdirmvpwdrmtailunamewcwhoami 我从2021年4月份开始才开始真正意义上接触Linux&#xff0c;最初学习时是一脸蒙圈&#xff0c;啥也不会&#xff0c;啥也不懂&#xff0c;做了很多乱七八糟&#xff0c;没有条理的笔记。不知…...

Git 从入门到精通

一、环境配置 下载地址&#xff1a;https://git-scm.com/downloads/ 二、用户配置 找到git bash git --version 查看当前版本 git config --global user.name szhipeng625 设置用户名 git config --global user.email szhipeng625gmail.com 设置邮箱 git config --global …...

【Uniapp-Vue3】创建自定义页面模板

大多数情况下我们都使用的是默认模板&#xff0c;但是默认模板是Vue2格式的&#xff0c;如果我们想要定义一个Vue3模板的页面就需要自定义。 一、我们先复制下面的模板代码&#xff08;可根据自身需要进行修改&#xff09;&#xff1a; <template><view class"…...

Ansible之批量管理服务器

文章目录 背景第一步、安装第二步、配置免密登录2.1 生成密钥2.2 分发公钥2.3 测试无密连接 背景 Ansible是Python强大的服务器批量管理 第一步、安装 首先要拉取epel数据源&#xff0c;执行以下命令 yum -y install epel-release安装完毕如下所示。 使用 yum 命令安装 an…...

android compose 串口通信

1.添加依赖 implementation("io.github.xmaihh:serialport:2.1.1") 2.添加SerialHelper派生类 class SerialPortHelper(portName:String,baudRate:Int): SerialHelper(portName,baudRate) {var receivedDataBuffer mutableListOf<Byte>()override fun onDa…...

ios脚本巨魔商店多巴胺越狱基本操作教程

准备工作 确认设备兼容性&#xff1a;A9-A11&#xff08;iPhone6s&#xff0d;X&#xff09;&#xff1a;iOS15.0-16.6.1&#xff1b;A12-A14&#xff08;iPhoneXR&#xff0d;12PM&#xff09;&#xff1a;iOS15.0-16.5.1&#xff1b;A15-A16&#xff08;iPhone13&#xff0d…...

NLP项目实战——基于Bert模型的多情感评论分类(附数据集和源码)

在当今数字化的时代&#xff0c;分析用户评论中的情感倾向对于了解产品、服务的口碑等方面有着重要意义。而基于强大的预训练语言模型如 Bert 来进行评论情感分析&#xff0c;能够取得较好的效果。 在本次项目中&#xff0c;我们将展示如何利用 Python 语言结合transformers库&…...

.NET framework、Core和Standard都是什么?

对于这些概念一直没有深入去理解&#xff0c;以至于经过.net这几年的发展进化&#xff0c;概念越来越多&#xff0c;越来越梳理不容易理解了。内心深处存在思想上的懒惰&#xff0c;以为自己专注于Unity开发就好&#xff0c;这些并不属于核心范畴&#xff0c;所以对这些概念总是…...

Mybatis原理简介

看到Mybatis的框架图&#xff0c;可以清晰的看到Mybatis的整体核心对象&#xff0c;我更喜欢用自己的图来表达Mybatis的整个的执行流程。如下图所示&#xff1a; 原理详解&#xff1a; MyBatis应用程序根据XML配置文件创建SqlSessionFactory&#xff0c;SqlSessionFactory在根…...

腾讯云AI代码助手-公司职位分析AI助手

作品简介 腾讯云AI代码助手是一款智能工具&#xff0c;专注于为公司提供职位分析服务。通过自然语言处理和机器学习技术&#xff0c;它能快速解析职位描述&#xff0c;提取关键信息&#xff0c;并提供数据驱动的洞察&#xff0c;帮助公司优化招聘流程和职位设计。 技术架构 …...

腾讯云AI代码助手编程挑战赛-解忧助手

作品简介 何以解忧,唯有杜康。而随着Ai的发展,解忧不再只有杜康还有Ai,使用的是腾讯云AI代码助手来生成的所有代码&#xff0c;使用方便&#xff0c;快捷&#xff0c;高效。 技术架构 采用了全后端分离的架构&#xff0c;前端使用Vue.js&#xff0c;腾讯云的AI服务处理自然语…...

Sentinel服务保护 + Seata分布式事务

服务保护 【雪崩问题】微服务调用链路中某个服务&#xff0c;引起整个链路中所有微服务都不可用。 【原因】&#xff1a; 微服务相互调用&#xff0c;服务提供者出现故障。服务调用这没有做好异常处理&#xff0c;导致自身故障。调用链中所有服务级联失败&#xff0c;导致整个…...

【Leetcode·中等·数组】59. 螺旋矩阵 II(spiral matrix ii)

题目描述 英文版描述 Given a positive integer n, generate an n x n matrix filled with elements from 1 to n(2) in spiral order. Example 1: Input: n 3 Output: [[1,2,3],[8,9,4],[7,6,5]] 提示&#xff1a; 1 < n < 20 英文版地址 https://leetcode.com…...

WebSocket 扩展生态:协议与框架

在前七篇文章中,我们深入探讨了 WebSocket 的基础原理、开发实践和实战案例。今天,让我们把视野扩展到 WebSocket 的生态系统,看看有哪些扩展协议和框架可以帮助我们更好地开发 WebSocket 应用。我曾在一个大型即时通讯项目中,通过合理使用这些工具,将开发效率提升了 50%。 扩…...

MySQL —— 在CentOS9下安装MySQL

MySQL —— 在CentOS9下安装MySQL 1.查看自己操作系统的版本2.找到对应的安装源3.上传我们在windows下&#xff0c;下载的文件&#xff0c;解压4.执行rpm命令&#xff0c;启用MySQL8仓库5.执行dnf install -y mysql-community-server6.设置开机自启动7.获得初始密码8.登录MySQL…...

用VS C#构建Windows服务【纯操作版,附带项目地址】

1.点击“创建新项目”,选择“Windows 服务(.NET Framework)” 2、给项目命名 3、双击“Service1.cs”,右键,选择“添加安装程序”,就会生成一个“ProjectInstaller.cs”文件 4、双击“ProjectInstaller.cs”文件,右键“serviceProcessInstaller1”,选择“属性…...

1.UGUI相关

1.这一种UIcanvas下的组件,会显示在3d物体之前 2.可以设置3d物体在UI界面之前。选中第二个模式。这时候会指定一个摄像机。一般情况下&#xff0c;不用主摄像机。需要新建一个专门给UI的摄像机。相当于设置距离摄像机的远近。两个layer 可以理解成 章节&#xff0c;关卡。相同…...

大语言模型训练的数据集从哪里来?

继续上篇文章的内容说说大语言模型预训练的数据集从哪里来以及为什么互联网上的数据已经被耗尽这个说法并不专业&#xff0c;再谈谈大语言模型预训练数据集的优化思路。 1. GPT2使用的数据集是WebText&#xff0c;该数据集大概40GB&#xff0c;由OpenAI创建&#xff0c;主要内…...

Android 来电白名单 只允许联系人呼入电话

客户需求只允许通讯录中联系人可以呼入电话。参考自带的黑名单实现 CallsManager.java类中的onSuccessfulIncomingCall方法有一些过滤器&#xff0c;可以仿照黑名单的方式添加自己的过滤器。 packages/services/Telecomm/src/com/android/server/telecom/CallsManager.java …...

StarRocks Awards 2024 年度贡献人物

在过去一年&#xff0c;StarRocks 在 Lakehouse 与 AI 等关键领域取得了显著进步&#xff0c;其卓越的产品功能极大地简化和提升了数据分析的效率&#xff0c;使得"One Data&#xff0c;All Analytics" 的愿景变得更加触手可及。 虽然实现这一目标的道路充满挑战且漫…...

plane开源的自托管项目

Plane 是一个开源的自托管项目规划解决方案&#xff0c;专注于问题管理、里程碑跟踪以及产品路线图的设计。作为一款开源软件&#xff0c;Plane 的代码托管在 GitHub 平台上&#xff0c;允许任何人查看和贡献代码。它为用户提供了便捷的项目创建与管理手段&#xff0c;并配备了…...

WebLogic安全基线

WebLogic安全基线 一、 用户权限1 、检查weblogic 的启动用户2 、用户权限整改3 、使用普通用户重启weblogic 二、账户共用1 、检查weblogic 控制台的账户2 、账户共用整改3 、测试登录weblogic 控制台新账户 三、 账户清理1 、检查weblogic 控制台的账户2 、帐户清理整改 四、…...

复杂园区网基本分支的构建

目录 1、各主机进行网络配置。2、交换机配置。3、配置路由交换&#xff0c;进行测试。4、配置路由器接口和静态路由&#xff0c;进行测试。5、最后测试任意两台主机通信情况 模拟环境链接 拓扑结构 说明&#xff1a; VLAN标签在上面的一定是GigabitEthernet接口的&#xff0c…...

设计模式-结构型-组合模式

1. 什么是组合模式&#xff1f; 组合模式&#xff08;Composite Pattern&#xff09; 是一种结构型设计模式&#xff0c;它允许将对象组合成树形结构来表示“部分-整体”的层次结构。组合模式使得客户端对单个对象和组合对象的使用具有一致性。换句话说&#xff0c;组合模式允…...

32单片机从入门到精通之用户界面——用户界面(十四)

不论你现在处于什么样的困境和挑战&#xff0c;不要放弃希望和努力。成功之路不会一帆风顺&#xff0c;但是只要你坚定信念&#xff0c;勇敢面对困难&#xff0c;努力奋斗&#xff0c;就一定能够战胜困难&#xff0c;迈向成功的道路。困难和挫折只是暂时的&#xff0c;而坚持和…...

Redis 优化秒杀(异步秒杀)

目录 为什么需要异步秒杀 异步优化的核心逻辑是什么&#xff1f; 阻塞队列的特点是什么&#xff1f; Lua脚本在这里的作用是什么&#xff1f; 异步调用创建订单的具体逻辑是什么&#xff1f; 为什么要用代理对象proxy调用createVoucherOrder方法&#xff1f; 对于代码的详细…...

NFS 组件容器化部署实战指南

文章目录 前言部署NFS服务器K8S部署NFS问题记录 前言 使用nfs-client-provisioner这个应用&#xff0c;利用nfs server给kubernets提供作为持久化后端&#xff0c;并且动态提供pv。所有节点需要安装nfs-utils组件&#xff0c;并且nfs服务器与kubernets worker节点都能网络连通…...

LCE(Local Cascade Ensemble)预测模型和LSTM(Long Short-Term Memory)模型在效果和特点上存在显著差异

LCE&#xff08;Local Cascade Ensemble&#xff09;预测模型和LSTM&#xff08;Long Short-Term Memory&#xff09;模型在效果和特点上存在显著差异。以下是对两者的比较&#xff1a; 一、效果比较 LCE模型&#xff1a; 优势&#xff1a;LCE结合了随机森林和XGBoost的优势&a…...

rk3568平台Buildroot编译实践:内核rootfs定制 及常见编译问题

目录 编译前准备常规编译流程定制内核修改内核 参数并增量 保存修改rootfs并增量 保存修改rootfs包下载源rootfs软件包增删refBuildroot 是一个用于自动化构建嵌入式 Linux 系统的工具。它通过使用简单的配置文件和 Makefile,能够从源代码开始交叉编译出一个完整的、可以运行在…...