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

Vue React

Vue 的源码主要分为以下几个部分:

主要涉及 响应式、虚拟 DOM、组件系统、编译器、运行时

├── packages/
│   ├── compiler-core/    # 编译器核心
│   ├── compiler-sfc/     # 处理 .vue 单文件组件
│   ├── compiler-dom/     # 处理 DOM 相关的编译逻辑
│   ├── reactivity/       # 响应式系统
│   ├── runtime-core/     # 运行时核心
│   ├── runtime-dom/      # 运行时 DOM 相关
│   ├── shared/           # 共享工具函数
│   ├── vue/              # Vue 入口
│   └── ...

React 源码结构:

整体架构可以分为 调度(Scheduler)、协调(Reconciler)、渲染(Renderer) 三个核心部分

可以从 React 入口、Fiber 架构、调度机制、Hooks 实现、Diff 算法 等方面解析其核心原理。

├── packages/
│   ├── react/            # React 核心 API(React.createElement、hooks)
│   ├── react-dom/        # 负责渲染到 DOM
│   ├── scheduler/        # 调度器,控制任务优先级
│   ├── react-reconciler/ # 负责 Fiber 树的协调和 Diff
│   ├── shared/           # 公共方法
│   ├── jest/             # 测试相关
│   └── ...

 Fiber 是 React 16 引入的核心数据结构,每个组件对应一个 Fiber 节点:

function FiberNode(tag: WorkTag,pendingProps: mixed,key: null | string,mode: TypeOfMode,
) {// 实例相关this.tag = tag;           // 组件类型(Function/Class/Host等)this.key = key;           // key属性this.elementType = null;  // 创建元素的类型this.type = null;         // 组件函数/类this.stateNode = null;    // 对应的真实DOM实例/类组件实例// Fiber树结构this.return = null;       // 父Fiberthis.child = null;        // 第一个子Fiberthis.sibling = null;      // 兄弟Fiberthis.index = 0;           // 在兄弟中的索引// 状态相关this.pendingProps = pendingProps;this.memoizedProps = null;this.updateQueue = null;  // 状态更新队列this.memoizedState = null;// 当前状态// 副作用this.effectTag = NoEffect;this.nextEffect = null;   // 下一个有副作用的Fiber// 双缓存技术this.alternate = null;    // 连接current和workInProgress树
}

相关文章:

Vue React

Vue 的源码主要分为以下几个部分: 主要涉及 响应式、虚拟 DOM、组件系统、编译器、运行时。 ├── packages/ │ ├── compiler-core/ # 编译器核心 │ ├── compiler-sfc/ # 处理 .vue 单文件组件 │ ├── compiler-dom/ # 处理 DOM 相关…...

分布式环境下的主从数据同步

目录 1. 数据同步的推/拉方式 1.1 主节点推送 1.2 从节点拉取 1.3 常见组件的推拉方式 2.复制方式 2.1 同步复制 2.2 异步复制 2.3 半同步复制 2.4 常见组件的同步方式 3.日志格式 3.1 基于语句复制 SBR 3.2 基于行复制 RBR 3.3 基于预写日志 WAL 3.4 基于触发器…...

C#:字符串插值(String Interpolation)

目录 起点:编程的基本需求 推导:如何让字符串更“聪明”? 什么是 C# 中的字符串插值? 为什么需要字符串插值? 什么时候用字符串插值? 插值的工作原理 总结 起点:编程的基本需求 程序需要…...

Unity中实现UI的质感和圆角

质感思路有两种: 一种是玻璃质感的做法,抓取UI后面的图像做模糊(build是GrabPass,urp抓图像我有写过在往期文章),这个方式网络上有很多就不写了; 另外一种是使用CubeMap的方式去模拟质感&…...

【蓝桥杯】 枚举和模拟练习题

系列文章目录 蓝桥杯例题 枚举和模拟 文章目录 系列文章目录前言一、好数: 题目参考:核心思想:代码实现: 二、艺术与篮球: 题目参考:核心思想:代码实现: 总结 前言 今天距离蓝桥杯还有13天&…...

【设计模式】适配器模式

适配器模式像是一个“接口转换器”,让两个不兼容的接口能够协同工作。比如 Type-C 转 3.5mm 耳机口的转换器,让新手机能用旧耳机。 代码实现 // 1. 旧款圆口充电器(被适配者) class RoundHoleCharger {public int getRoundHoleV…...

【NLP 面经 3】

目录 一、Transformer与RNN对比 多头自注意力机制工作原理 相比传统 RNN 在处理长序列文本的优势 应对过拟合的改进方面 二、文本分类任务高维稀疏文本效果不佳 特征工程方面 核函数选择方面 模型参数调整方面 三、NER中,RNN模型效果不佳 模型架构方面 数据处理方面…...

区间预测 | MATLAB实现QRBiGRU门控循环单元分位数回归时间序列区间预测

区间预测 | MATLAB实现QRBiGRU门控循环单元分位数回归时间序列区间预测 目录 区间预测 | MATLAB实现QRBiGRU门控循环单元分位数回归时间序列区间预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍 区间预测 | MATLAB实现QRBiGRU门控循环单元分位数回归时间序列区…...

Github 热点项目 awesome-mcp-servers MCP 服务器合集,3分钟实现AI模型自由操控万物!

【今日推荐】超强AI工具库"awesome-mcp-servers"星数破万! ① 百宝箱式服务模块:AI能直接操作浏览器、读文件、连数据库,比如让AI助手自动整理Excel表格,三分钟搞定全天报表; ② 跨领域实战利器:…...

深入理解 YUV 颜色空间:从原理到 Android 视频渲染

在视频处理和图像渲染领域,YUV 颜色空间被广泛用于压缩和传输视频数据。然而,在实际开发过程中,很多开发者会遇到 YUV 颜色偏色 的问题,例如 画面整体偏绿。这通常与 U、V 分量的取值有关。那么,YUV 颜色是如何转换为 …...

Qt中绘制不规则控件

在Qt中绘制不规则控件可通过设置遮罩(Mask)实现。以下是详细步骤: ‌继承目标控件‌:如QPushButton或QWidget。‌重写resizeEvent‌:当控件大小变化时,更新遮罩形状。‌创建遮罩区域‌:使用QRegion或QPain…...

开源线下大数据平台的数据如何上云

使用云服务提供商的迁移工具 许多云服务提供商都提供了专门的数据迁移工具,可用于将开源线下大数据平台的数据迁移到云端。以亚马逊云服务(AWS)为例,其提供的 AWS Snowball 是一种边缘计算设备,可以用于大规模数据的离…...

【doris】Apache Doris简介

目录 1. 概述2. 技术特点2.1 高性能查询2.2 实时数据导入2.3 易于使用2.4 高可扩展性2.5 数据模型2.6 容错性 3. 适用场景4. 部署与架构4.1 部署方式4.2 架构特点 5. 优势 1. 概述 1.Apache Doris(原名Palo)最早诞生于百度广告报表业务,2017…...

在MFC中使用Qt(六):深入了解QMfcApp

前言 此前系列文章回顾: 在MFC中使用Qt(一):玩腻了MFC,试试在MFC中使用Qt!(手动配置编译Qt) 在MFC中使用Qt(二):实现Qt文件的自动编译流程 在M…...

JWT在线解密/JWT在线解码 - 加菲工具

JWT在线解密/JWT在线解码 首先进入加菲工具 选择 “JWT 在线解密/解码” https://www.orcc.top 或者直接进入JWT 在线解密/解码 https://www.orcc.top/tools/jwt 进入功能页面 使用 输入对应的jwt内容,点击解码按钮即可...

【机器学习】——机器学习思考总结

摘要 这篇文章深入探讨了机器学习中的数据相关问题,重点分析了神经网络(DNN)的学习机制,包括层级特征提取、非线性激活函数、反向传播和梯度下降等关键机制。同时,文章还讨论了数据集大小的标准、机器学习训练数据量的…...

高效定位 Go 应用问题:Go 可观测性功能深度解析

作者:古琦 背景 自 2024 年 6 月 26 日,阿里云 ARMS 团队正式推出面向 Go 应用的可观测性监控功能以来,我们与程序语言及编译器团队携手并进,持续深耕技术优化与功能拓展。这一创新性的解决方案旨在为开发者提供更为全面、深入且…...

emWin图片旋转

图片取模: //emwin6.16 //正常绘制 hMem0 GUI_MEMDEV_Create(0, 0, bmPHPH.XSize, bmPHPH.YSize); hMem1 GUI_MEMDEV_Create(0, 0, bmPHPH.XSize, bmPHPH.YSize); //正常绘制 hMem0 GUI_MEMDEV_CreateFixed32 (0,0, bmPHPH.XSize, bmPHPH.YSize); hMem1 GUI_M…...

CSS 父类元素的伪类 选择器

父元素的 :hover 状态可以影响子元素的样式。当父元素处于 :hover 状态时,可以通过 CSS 的选择器为子元素设置样式。 .parent:hover .child 这种选择器叫做 后代选择器(Descendant Selector) ,结合了 :hover 伪类。它的作用是&…...

【Spring Boot 与 Spring Cloud 深度 Mape 之三】服务注册与发现:Nacos 核心实战与原理浅析

【Spring Boot 与 Spring Cloud 深度 Mape 之三】服务注册与发现:Nacos 核心实战与原理浅析 #SpringCloudAlibaba #Nacos #服务注册 #服务发现 #服务治理 #微服务 #SpringBoot #Java 系列衔接:在前两篇 [【深度 Mape 之一】 和 [【深度 Mape 之二】] 中…...

JS实现动态点图酷炫效果

实现目标 分析问题 整个图主要是用canvas实现,其中难点是将线的长度控制在一定范围内、并且透明度随长度变化。 前置知识 canvas绘制点、线、三角形、弧形 // 点ctx.moveTo(this.x, this.y);ctx.arc(this.x, this.y, this.r,0, 2 * Math.PI, false);ctx.fillStyle …...

使用ModbusRTU读取松下测高仪的高度

使用C#通过Modbus RTU读取松下测高仪高度 1. 准备工作 1.1 硬件连接 确保松下测高仪支持Modbus RTU协议(需查阅设备手册确认)。通过RS-485或RS-232接口连接设备与计算机,可能需要USB转串口适配器。确认通信参数(波特率、数据位、停止位、奇偶校验),常见设置为:9600波特…...

SQL Server从安装到入门一文掌握应用能力。

本篇文章主要讲解,SQL Server的安装教程及入门使用的基础知识,通过本篇文章你可以快速掌握SQL Server的建库、建表、增加、查询、删除、修改等基本数据库操作能力。 作者:任聪聪 日期:2025年3月31日 一、SQL Server 介绍: SQL Server 是微软旗下的一款主流且优质的数据库…...

Ubuntu上给AndroidStudio创建桌面图标

最近使用了Ubuntu开发了,默认的android studio没有桌面图标,还是很不方便,每次都要cd到bin目录启动studio.sh。 步骤1:cd /usr/share/applications linux系统里面,所有的应用启动入口都在 /usr/share/applications …...

HarmonyOS:ComposeTitleBar 组件自学指南

在日常的鸿蒙应用开发工作中,我们常常会面临构建美观且功能实用的用户界面的挑战。而标题栏作为应用界面的重要组成部分,它不仅承载着展示页面关键信息的重任,还能为用户提供便捷的操作入口。最近在参与的一个项目里,我就深深体会…...

C# System.Net.Dns 使用详解

总目录 前言 在网络编程中,域名系统(DNS)是互联网的核心组成部分之一,它将人类可读的域名转换为机器可用的IP地址。在.NET框架中,System.Net.Dns类提供了一组静态方法,用于执行与DNS相关的操作。本文将详细…...

Spring-事务属性

1.隔离属性 数据库对于隔离属性的支持 隔离属性的值MySQLOracle ISOLATION.READ_COMMITTED √ √ ISOLATION.REPEATABLE_READ√ISOLATION.SERIALIZABLE√√ Oracle不支持REPEATABLE_READ值 如何解决不可重复度 采用的多版本比对的方式 解决不可重复读 默认隔离属性 ISO…...

“上云入端” 浪潮云剑指组织智能化落地“最后一公里”

进入2025年,行业智能体正在成为数实融合的核心路径。2025年初DeepSeek开源大模型的横空出世,通过算法优化与架构创新,显著降低算力需求与部署成本,推动大模型向端侧和边缘侧延伸。其开源策略打破技术垄断,结合边缘计算…...

Docker 的实质作用是什么

Docker 的实质作用是什么 目录 Docker 的实质作用是什么**1. Docker 的实质作用****2. 为什么使用 Docker?****(1)解决环境一致性问题****(2)提升资源利用率****(3)简化部署与扩展****(4)加速开发与协作****3. 举例说明****总结**Docker 的实质是容器化平台,核心作用…...

WEB安全--文件上传漏洞--白名单绕过

一、MIME类型(Content-Type)绕过 原理:在我们不能绕过白名单后缀限制时,如果后端检测的是文件类型(数据包中的Content-Type字段),那我们可以利用合法类型替换 示例:在上传,php后缀…...

Mac 本地化部署 dify

Macbook 本地化部署 dify 目录 Macbook 本地化部署 dify安装dockerdocker下载地址 安装dify下载dify到本地github可能遇到的问题: github打开超时在本地解压dify.zip文件本地化部署docker部署可能遇到的问题: 部署超时登录体验 dify 安装docker docker下载地址 根据电脑芯片选…...

MySQL和navicat日常使用记录

navicat界面上之前跟localhost连接的数据库可以直接点开了 这里有excel导入的地方 然后添加文件,选则文件是哪个,勾选excel的表是哪个,根据实际情况定义一些附加选项,注意时间格式,下一步下一步,然后选择主…...

linux进程信号 ─── linux第27课

在 Linux 系统中,信号(Signals) 是一种进程间通信(IPC)机制,用于通知进程发生了某种事件或请求进程执行特定操作。 你怎么能识别信号呢?识别信号是内置的,进程识别信号,是…...

云安全之k8s未授权漏洞总结

一、k8s介绍 全称是 kubernetes,是谷歌在2014年推出的一种开源容器编排系统,后来捐赠给了云原生计算基金会(CNCF)。因将k后面的8个字母进行缩写后,被广泛简称为K8s。随着容器技术的发展,面临着容器数量庞大…...

博客学术汇测试报告

Author:MTingle major:人工智能 Build your hopes like a tower! 目录 一.项目简介 二.开发技术 三.测试用例设计 四.自动化测试代码 common包 博客编辑 博客列表 登录页面 未登录测试 主函数 五.性能测试 六.测试总结 一.项目简介 该项目是一款基于 S…...

揭秘:父子组件之间的传递

基础知识 组件与组件之间有三大方面的知识点: 子组件通过props defineProps({})接收父组件传递到参数和方法;子组件可以通过定义 emit 事件,向父组件发送事件;父组件调用子组件通过defineExpose 导出的方法…...

leetcode 169.Majority Element

这道题虽然简单&#xff0c;但适合用来练习各种解法。《剑指offer》5.2节 面试题29与此题一样&#xff0c;并且给出了leetcode官方题解未给出的快速选择的解法。 方法一、用哈希表解决 class Solution { public:int majorityElement(vector<int>& nums) {unordered…...

魔改chromium——基础环境搭建

谷歌chromium环境要求详细文档 软件和环境要求&#xff0c;必须安装&#xff0c;硬性要求 系统环境&#xff1a;Windows 10&#xff0c;内存最小8GB&#xff0c;推荐16GB&#xff0c;NTFS格式磁盘最少100GB空间Git版本&#xff1a;安装最新版本即可&#xff0c;Git桌面端下载…...

[网络_1] 因特网 | 三种交换 | 拥塞 | 差错 | 流量控制

目录 一、网络、互连网与因特网 二、因特网发展 三、因特网的组成与功能 四、计算机网络的分类 五、因特网的标准化与意义 一、三种传输方式&#xff1a;电路交换 vs 报文交换 vs 分组交换 1. 电路交换&#xff08;Circuit Switching&#xff09;——像“打电话” 2. 报…...

android 何如查找内网设备 IP

前沿 最近在与嵌入式设备打交道,需要对设备进行配网。发现 UpnP 服务不稳定,经常收不到设备的信息。就想着能不能通过内网查找到 IP 后,直接与设备通信,不停的请求设备信息。 1.Android 端通过 UDP 组播(Multicast)查找设备 如果嵌入式设备支持 UDP 组播,Android 端可…...

Oracle数据库数据编程SQL<3.5 PL/SQL 存储过程(Procedure)>

存储过程(Stored Procedure)是 Oracle 数据库中一组预编译的 PL/SQL 语句集合&#xff0c;存储在数据库中并可通过名称调用执行。它们是企业级数据库应用开发的核心组件。 目录 一、存储过程基础 1. 存储过程特点 2. 创建基本语法 3. 存储过程优点 4. 简单示例 二、没有…...

六级词汇量积累day13

commend 表扬 exhaust 耗尽&#xff0c;用尽 weary 疲惫的&#xff0c;劳累的 fatigue 疲惫&#xff0c;劳累 obese 臃肿的&#xff0c;肥胖的 adopt 采纳&#xff0c;收养 adapt 适应 accomplish 完成&#xff0c;实现 accomplishment 成就 achieve 实现&#xff0c;完成 achi…...

蓝桥杯15届JAVA_A组

将所有1x1转化为2x2 即1x1的方块➗4 然后计算平方数 记得-1 2 import java.io.BufferedReader; import java.io.InputStreamReader; import java.io.OutputStreamWriter; import java.io.PrintWriter;public class Main{static BufferedReader in new BufferedReader(new In…...

OpenCV图像输入输出模块imgcodecs(imwrite函数的用法)

《OpenCV计算机视觉开发实践&#xff1a;基于Python&#xff08;人工智能技术丛书&#xff09;》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 3.2.3 imwrite保存图片 函数imwrite可以用来输出图像到文件&#xff0c;其声明如下&#xff1a; imwrite(filename,…...

win 远程 ubuntu 服务器 安装图形界面

远程结果&#xff1a;无法使用docker环境使用此方法 注意要写IP和:数字 在 ubuntu 服务器上安装如下&#xff1a; # 安装 sudo apt-get install tightvncserver # 卸载 sudo apt purge tightvncserver sudo apt autoremove#安装缺失的字体包&#xff1a; sudo apt update s…...

地下管线三维建模软件工具MagicPipe3D V3.6.1

经纬管网建模系统MagicPipe3D&#xff0c;基于二维矢量管线管点数据本地离线参数化构建地下管网三维模型&#xff08;包括管道、接头、附属设施等&#xff09;&#xff0c;输出标准3DTiles、Obj模型等格式&#xff0c;支持Cesium、Unreal、Unity、Osg等引擎加载进行三维可视化、…...

vue子组件生命周期的执行顺序

在 Vue 中&#xff0c;子组件的生命周期钩子函数的执行顺序受父组件的影响&#xff0c;通常遵循**“先创建子组件&#xff0c;后创建父组件&#xff1b;先销毁父组件&#xff0c;后销毁子组件”**的原则。 1. 组件创建&#xff08;挂载&#xff09;阶段 当父组件挂载时&#x…...

【含文档+PPT+源码】基于微信小程序的在线考试与选课教学辅助系统

项目介绍 本课程演示的是一款基于微信小程序的在线考试与选课教学辅助系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含&#xff1a;项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本套系统…...

树莓派超全系列文档--(17)树莓派配置显示器

树莓派配置显示器 显示支持 HDMI 显示器设置分辨率和旋转手动设置分辨率和旋转确定显示设备名称设置自定义分辨率设置自定义旋转 控制台分辨率和旋转 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 显示 要配置 Raspberry Pi 使用非默认显示模式…...

python将pdf文件转为图片,如果pdf文件包含多页,将转化的多个图片通过垂直或者水平合并成一张图片

要将PDF文件转换为图片&#xff0c;并将多页PDF垂直合并成一张图片&#xff0c;可以使用PyMuPDF&#xff08;也称为fitz&#xff09;库来读取PDF文件&#xff0c;并使用Pillow库来处理和合并图片。以下是一个示例代码&#xff0c;展示了如何实现这个功能&#xff1a; 首先&…...