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

React源码解析18(8)------ 实现单节点的Diff算法

摘要

经过之前的几篇文章,我们已经实现了一个可以进行更新渲染的假React。但是如果我们把我们的jsx修改成这样:

function App() {const [age, setAge] = useState(20)const click = function() {setAge(age + 1)}return age % 2 === 0 ? jsx("div", {key: 'div1',children: jsx("span", {key: 'span',children: 'div1',onClick: click})}) : jsx("div", {key: 'div1',children: jsx("span", {key: 'span',children: 'div2',onClick: click})})
}ReactDOM.createRoot(root).render(<App />)

虽然页面的效果是正确的。但对于两个jsx,二者的区别仅仅是span标签里面的内容不同。
但是在程序里面,我们是相当于每次都重新beginWork,重新的创建Filber树,重新的创建真实DOM。
而对于这里div和span标签,它没有任何的改变,我们是否可以用一种优化策略,从而对旧资源进行利用呢? 所以Diff由此而来。

这一篇先只说单节点的Diff,因为目前还没实现带有sibling的情况。

1.修改beginWork

我们回顾一下在beginWork里面干了什么。在将jsx转换为ReactElement后,我们会通过beginWork来构建一颗Filber树。
那如果,对于可复用的FilberNode,我们是否可以不去创建,直接复用呢?
可以的,那对于React来说,什么节点是可复用的呢:

如果旧的FilberNode和新的ReactElement
key相同,type相同。
那么就是可以复用的。

所以在beginWork中的reconcileChildren方法里,如果我们发现上面的情况,我们就不会创建新的FilberNode。

function reconcileChildren(parent,element) {const newChild = diffReconcileChildren(parent, element);if(newChild) {return newChild}//其他代码。。。return filberNode
}

2.实现diffReconcileChildren方法

该方法接受两个参数,第一个是父节点,第二个是新的ReactElement。

(1)我们要先拿到父节点的child,比较child和element的key和type。
(2)将element保存在child的memoizedState里面。
(3)然后其他逻辑和reconcileChildren里的一样即可。
(4)直接返回child。

function diffReconcileChildren(filberNode, element) {const child = filberNode.child;if(child && child.key && child.type) {if(child.key === element.key && child.type === child.type) {child.memoizedProps = element;child.pendingProps = element.props;if(child.tag === HostText) {child.pendingProps = element}return child;}}
}

这里为什么要将element保存在memoizedState里面,是因为虽然节点没有改变,但是子节点可能有改变,或者属性会有改变。所以要在后面的completeWork里进行处理。

3.修改completeWork

经过上面的处理后,FilberNode不会无脑的重复创建,而是复用了。而completeWork的工作,主要是创建真实DOM,挂载在FilberNode的stateNode上。

所以在completeWork中,也不能无脑的创建真实DOM,而是也要判断是否是可复用的。

export const completeWork = (filberNode) => {const tag = filberNode.tagswitch (tag) {case HostComponent: {if(filberNode.stateNode !== null){//更新updateCompleteHostComponent(filberNode)}else{completeHostComponent(filberNode)}break;}//其他代码。。。。}
}

所以在对HostComponent的处理上,如果发现不是mount阶段,就要判断是否需要复用旧的。

4.实现updateCompleteHostComponent方法

在该方法中,我们接受filberNode。同时我们可以拿到它的memoizedState(在beginWork中传过来的)。

再判断一下key和type,如果依旧相同,那么说明是可复用的。我们直接不创建新的DOM即可。

function updateCompleteHostComponent(filberNode) {const element = filberNode.memoizedProps;if(element.key === filberNode.key && element.type === filberNode.type) {addPropsToDOM(filberNode.stateNode, filberNode.pendingProps)}else{const type = filberNode.type;const element = document.createElement(type);addPropsToDOM(element, filberNode.pendingProps)filberNode.stateNode = element;const parent = filberNode.return;if(parent && parent.stateNode && parent.tag === HostComponent) {parent.stateNode.appendChild(element)}}completeWork(filberNode.child)
}

addPropsToDOM方法是我们在实现事件机制的时候,需要调用的方法。

OK,这样我们就实现了单节点的Diff算法。

相关文章:

React源码解析18(8)------ 实现单节点的Diff算法

摘要 经过之前的几篇文章&#xff0c;我们已经实现了一个可以进行更新渲染的假React。但是如果我们把我们的jsx修改成这样&#xff1a; function App() {const [age, setAge] useState(20)const click function() {setAge(age 1)}return age % 2 0 ? jsx("div"…...

并查集路径压缩(Java 实例代码)

目录 并查集路径压缩 Java 实例代码 UnionFind3.java 文件代码&#xff1a; 并查集路径压缩 并查集里的 find 函数里可以进行路径压缩&#xff0c;是为了更快速的查找一个点的根节点。对于一个集合树来说&#xff0c;它的根节点下面可以依附着许多的节点&#xff0c;因此&am…...

Educational Codeforces Round 153 (Rated for Div. 2)

A.我直接构造&#xff08;&#xff08;&#xff08;&#xff09;&#xff09;&#xff09;&#xff09;和&#xff08;&#xff09;&#xff08;&#xff09;&#xff08;&#xff09;这种了&#xff0c;因为这两种都很简便&#xff0c;只有&#xff08;&#xff09;和&#xf…...

分布式 | 如何搭建 DBLE 的 JVM 指标监控系统

本篇文章采用 Docker 方式搭建 Grafana Prometheus 实现对 DBLE 的 JVM 相关指标的监控系统。 作者&#xff1a;文韵涵 爱可生 DBLE 团队开发成员&#xff0c;主要负责 DBLE 需求开发&#xff0c;故障排查和社区问题解答。 本文来源&#xff1a;原创投稿 爱可生开源社区出品&a…...

下线40万辆,欧拉汽车推出2023款好猫尊荣型和GT木兰版

欧拉汽车是中国新能源汽车制造商&#xff0c;成立于2018年。截至目前&#xff0c;已经下线了40万辆整车&#xff0c;可见其在市场的影响力和生产实力。为了庆祝这一里程碑&#xff0c;欧拉汽车推出了品牌书《欧拉将爱进行到底》&#xff0c;在其中讲述了欧拉汽车的发展历程和未…...

【Python】使用python解析someip报文,以someip格式打印报文

文章目录 1.安装scapy库2.解析someip格式报文3.示例 1.安装scapy库 使用 pip 安装 scapy 第三方库&#xff0c;打开 cmd&#xff0c;输入以下命令&#xff1a; pip install scapy出现如图所示&#xff0c;表示安装成功&#xff1a; 2.解析someip格式报文 要解析someip格式报…...

C#与西门子PLC1500的ModbusTcp服务器通信2--ModbusTcp协议

Modbus TCP是近年来越来越流行的工业控制系统通信协议之一&#xff0c;与其他通信协议相比&#xff0c;Modbus TCP通信速度快、可靠性高、兼容性强、适用于模拟或数字量信号的传输&#xff0c;阅读本文前你必须比较熟悉Modbus协议&#xff0c;了解tcp网络。 一、什么是Modbus …...

SpringBoot + MyBatis-Plus构建树形结构的几种方式

1. 树形结构 树形结构&#xff0c;是指&#xff1a;数据元素之间的关系像一颗树的数据结构。由树根延伸出多个树杈 它具有以下特点&#xff1a; 每个节点都只有有限个子节点或无子节点&#xff1b;没有父节点的节点称为根节点&#xff1b;每一个非根节点有且只有一个父节点&a…...

linux vscode 下开发

linux vscode 下开发 javajdk插件查看调用层次 java jdk 各种JAVA JDK的镜像分发 编程宝库 - 技术改变世界 jdk 镜像 ubuntu22.04 安装 # Linux x64 64位 jdk-8u351-linux-x64.tar.gztar -zxf jdk-8u351-linux-x64.tar.gz mv jdk1.8.0_351 jdk8/ vim ~/.pr…...

【工具】python代码编辑器--PyCharm下载安装和介绍

PyCharm是一种Python IDE(集成开发环境),由JetBrains打造。它带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试、语法高亮、项目管理、代码跳转、智能提示、自动完成、单元测试、版本控制等。此外,PyCharm还提供了一些高级功能,以用于支持Django框…...

SpringBoot第44讲:SpringBoot集成Redis - Redis分布式锁的实现之Jedis(setNXPX+Lua)

SpringBoot第44讲&#xff1a;SpringBoot集成Redis - Redis分布式锁的实现之Jedis(setNXPXLua) Redis实际使用场景最为常用的还有通过Redis实现分布式锁。本文是SpringBoot第44讲&#xff0c;主要介绍Redis实现分布式锁 文章目录 SpringBoot第44讲&#xff1a;SpringBoot集成Re…...

STM32F4X USART串口使用

STM32F4X USART串口使用 串口概念起始位波特率数据位停止位校验位串口间接线 STM32F4串口使用步骤GPIO引脚复用函数串口初始化函数串口例程 串口概念 串口是MCU与外部通信的重要通信接口&#xff0c;也是MCU在开发过程中的调试利器。串口通信有几个重要的参数&#xff0c;分别…...

python实现两个字符串比对差异点

一:代码实现 import difflib, re# 比较两个文本差异点 def compare_text_index(text1, text2):# 创建SequenceMatcher对象matcher = difflib.SequenceMatcher(a=text1, b=text2)# 获取差异报告diff_report = matcher.get_opcodes()# 检查差异报告中是否存在关键词错误for tag…...

SQLite数据库实现数据增删改查

当前文章介绍的设计的主要功能是利用 SQLite 数据库实现宠物投喂器上传数据的存储&#xff0c;并且支持数据的增删改查操作。其中&#xff0c;宠物投喂器上传的数据包括投喂间隔时间、水温、剩余重量等参数。 实现功能&#xff1a; 创建 SQLite 数据库表&#xff0c;用于存储宠…...

【Golang系统开发】搜索引擎(2) 压缩词典

写在前面 这篇文章我们就给出一系列的数据结构&#xff0c;使得词典能达到越来越高的压缩比。当然&#xff0c;和倒排索引记录表的大小相比&#xff0c;词典只占据了非常小的空间。那么为什么要对词典进行压缩呢&#xff1f; 这是因为决定信息检索系统的查询响应时间的一个重…...

clickhouse修改默认密码

1.明文密码 vim /etc/clickhouse-server/users.xml找到下面的语句,增加明文密码 <password>123456789</password> 2. sha256密码 # echo -n 123456789 | openssl dgst -sha256 (stdin) 15e2b0d3c33891ebb0f1ef609ec419420c20e320ce94c65fbc8c3312448eb225 修改…...

基于java在线捐赠系统设计与实现

摘要 近年来&#xff0c;随着网络的快速发展&#xff0c;由于网络的开放性和便利性&#xff0c;具有广阔的发展前景。 本文设计并实现了医药捐赠系统。通过分析确定由两个不同的用户组成&#xff0c;每个用户具有不同的功能。它还可以帮助用户在线求助、申请项目、发表留言等&a…...

【前端】vscode javascript 代码片段失效问题解决

1. 文件--首选项--用户代码片段-vue.json : 添加 // { // // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // // description. Add comma separated ids of the languages where the snippet is app…...

AE-卡通人物解说动画视频的制作

目录 1.导入卡通人物图片和音频文件 2.新建合成 3.在卡通人物图片上添加效果和表达式 4.在音频文件上添加效果和表达式 5.将卡通人物中的 CC Split2 中分割1 表达式链接到滑块中 6.卡通人物根据音频文件自动匹配口型。 AE制作卡通人物解说视频&#xff0c;卡通人物口型根据…...

Linux 查看日志

在 Linux 中&#xff0c;内核日志使用 printk 函数进行输出。你可以通过以下方法查看 printk 的日志&#xff1a; 使用 dmesg 命令&#xff1a; dmesg 这个命令会显示内核环缓冲区中的日志消息&#xff0c;包括使用 printk 输出的消息。你可以通过滚动浏览输出来查看完整的日志…...

【JavaWeb开发】从零构建前后端交互实战指南

1. JavaWeb前后端交互基础入门 第一次接触JavaWeb开发时&#xff0c;最让我困惑的就是前后端如何传递数据。记得刚开始做项目时&#xff0c;我傻乎乎地用字符串拼接HTML代码返回给前端&#xff0c;结果遇到中文乱码问题折腾了一整天。后来才发现&#xff0c;现代JavaWeb开发早已…...

python基于微信小程序的智慧社区娱乐服务管理平台

目录需求分析与规划技术架构设计功能模块开发实时交互实现数据可视化测试与部署安全与优化迭代计划项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作需求分析与规划 明确平台核心功能&#xff1a;居民活动报名、场地预约、社区公…...

MultiHighlight插件深度解析:掌握代码高亮的艺术与科学

MultiHighlight插件深度解析&#xff1a;掌握代码高亮的艺术与科学 【免费下载链接】MultiHighlight Jetbrains IDE plugin: highlight identifiers with custom colors &#x1f3a8;&#x1f4a1; 项目地址: https://gitcode.com/gh_mirrors/mu/MultiHighlight 在复杂…...

lite-avatar形象库入门:如何查找、预览并下载心仪的数字人形象

lite-avatar形象库入门&#xff1a;如何查找、预览并下载心仪的数字人形象 1. 数字人形象库简介 在数字人项目开发中&#xff0c;一个合适的虚拟形象往往能让用户体验大幅提升。lite-avatar形象库正是为解决这一需求而生的专业资源库。 这个基于HumanAIGC-Engineering/LiteA…...

新书推荐:《尊严的颓败》在废墟之上,寻找灵魂的微光

当世界沦为巨大的名利场&#xff0c;当人被简化为数据与欲望的载体&#xff0c;我们该如何定义“人”&#xff1f;又该如何安放那颗被称为“灵魂”的种子&#xff1f;洛本的《尊严的颓败》并非一本让人阅读时感到轻松愉悦的书&#xff0c;它更像是一把手术刀&#xff0c;精准地…...

深度学习 三次浪潮、三大驱动力与神经科学的恩怨(二)

1. 一个领域&#xff0c;多个名字 很多人以为"深度学习"是一个全新的领域。事实上&#xff0c;它的历史可以追溯到 20 世纪 40 年代——只不过在不同时期&#xff0c;它被叫过完全不同的名字&#xff1a; 1940s-1960s&#xff1a;被称为控制论&#xff08;Cybernetic…...

用MATLAB从零实现六足机器人步态:交替三角与波动步态代码详解

用MATLAB从零实现六足机器人步态&#xff1a;交替三角与波动步态代码详解 六足机器人因其卓越的稳定性和地形适应能力&#xff0c;在野外勘探、灾难救援等领域展现出巨大潜力。而步态规划作为机器人运动控制的核心&#xff0c;直接决定了机器人的移动效率和稳定性。本文将带您从…...

Gradio项目快速公网演示:除了share=True,你还有这几种轻量级内网穿透方案

Gradio项目快速公网演示&#xff1a;5种轻量级内网穿透方案横向评测 当你开发了一个酷炫的机器学习模型演示&#xff0c;或是精心设计的数据可视化界面&#xff0c;最迫切的需求往往是如何快速分享给同事或客户。Gradio的shareTrue参数可能是大多数开发者首先想到的方案&#x…...

OFA模型微调实战:适配特定领域的小样本学习

OFA模型微调实战&#xff1a;适配特定领域的小样本学习 用最少的数据&#xff0c;让通用大模型听懂你的专业语言 1. 引言&#xff1a;当通用模型遇到专业领域 你有没有遇到过这样的情况&#xff1a;一个在通用场景下表现优秀的AI模型&#xff0c;一到你的专业领域就"水土…...

Llama-3.2V-11B-cot部署教程:WSL2环境下双4090识别与分配验证

Llama-3.2V-11B-cot部署教程&#xff1a;WSL2环境下双4090识别与分配验证 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具。该工具针对双卡4090环境进行了深度优化&#xff0c;特别适合在WSL2环境下部署使用。通过本教程…...