react diff

react diff算法为降低算法复杂度提出了三大策略:
1.只进行同级比较
2.节点类型比较,不同元素生成不同的fiber树
3.key作为元素的唯一标识

diff算法流程
diff算法需要进行两轮遍历:
第一轮遍历更新的节点。
第二轮遍历没更新的节点。

第一轮:
从头遍历newChildren对象和老的fiber树。如果节点key不同,则不可复用,第一轮遍历结束。若key相同,但元素类型不同,oldfiber标记为delete,继续遍历。
第一轮遍历完有四种情况:
1.newChildren 与 oldFiber 同时遍历完
理想情况:只需在第一轮遍历进行组件更新,diff结束
2.newChildren 没遍历完,oldFiber 遍历完
本次更新有新加入的节点
3.newChildren 遍历完,oldFiber 没遍历完
有节点被删除
4.newChildren 与 oldFiber 都没遍历完
有节点更新了位置,通过oldfiber生成一个map,map的key为oldfiber的key,oldfiber为value。遍历剩余的newChildren,(lastPlacedIndex 是最后一个可复用的节点在 oldFiber 中的位置索引)逐个在 map 中寻找 oldFiber 中可复用的节点,如果找到可复用的节点,则将 oldIndex 与 lastPlacedIndex 比较,如果 oldIndex 与 lastPlacedIndex 小,则该节点需要右移,将新的 Fiber 节点标记为 Placement 。否则,将 lastPlacedIndex 更新为 oldIndex 。
遍历完新的子元素,map中还有剩余节点,则删除。

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

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

相关文章

【LeetCode:225. 用队列实现栈 + 栈 | 队列】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

水牛社软件是真的吗?

软件是真的,不过毕竟是为了赚钱或者获取资源而买的,所以大部分只关心能赚多少钱吧 说实话,我用了2年了,一些独立的项目还有群,有一月挣几千上万的,有一月赚几百的 软件是一个集合体,不是像很多…

【leetcode刷题之路】面试经典150题(5)——二叉树+二叉树层次遍历+二叉搜索树

文章目录 9 二叉树9.1 【递归】二叉树的最大深度9.2 【递归】相同的树9.3 【递归】翻转二叉树9.4 【递归】对称二叉树9.5 【递归】从前序与中序遍历序列构造二叉树9.6 【递归】从中序与后序遍历序列构造二叉树9.7 【BFS】填充每个节点的下一个右侧节点指针 II9.8 【递归】二叉树…

代码随想录第二十七天 455.分发饼干 376.摆动序列 53.最大子序和 122.买卖股票的最佳时机II

LeetCode 455 分发饼干 题目描述 假设你是一位很棒的家长,想要给你的孩子们一些小饼干。但是,每个孩子最多只能给一块饼干。 对每个孩子 i,都有一个胃口值 g[i],这是能让孩子们满足胃口的饼干的最小尺寸;并且每块饼…

2024全国护网行动HW行动招聘/收人!!!

2024全国护网行动HW行动招聘 溯蓉信创开始收人啦!!!现在开始收录2024HW简历,感兴趣的小伙伴扫码二维码添加微信 我们签约后,入场即预付款3k,签约后我们会在HW之前对我们的人员进行HW培训,保证上…

Three.js--》探寻Cannon.js构建震撼的3D物理交互体验(一)

我们用three.js可以绘制出各种酷炫的画面,但是当我们想要一个更加真实的物理效果的话,这个时候我们就需要一个物理的库,接下来我们就讲解一下今天要学习的canon,它可以给我们提供一个更加真实的物理效果,像物体的张力、…

YOLOv8姿态估计实战:训练自己的数据集

课程链接:https://edu.csdn.net/course/detail/39355 YOLOv8 基于先前 YOLO 版本的成功,引入了新功能和改进,进一步提升性能和灵活性。YOLOv8 同时支持目标检测和姿态估计任务。 本课程以熊猫姿态估计为例,将手把手地教大家使用C…

Mysql实战(2)之MySQL执行流程

-- 查看mysql当前有多少连接 show global status like Thread%; /* Threads_cached:缓存中的线程连接数 Threads_connected:当前打开的连接数 Threads_created:为处理连接创建的线程数 Threads_running:非睡眠状态的连接数&…

windows部署mariadb-11.3

因为需要用到数据库来处理一些东西,所以决定在windows上安装一下MariaDB. 随着版本升级,安装已经不是那么复杂了.对应的.其实网上一大堆的检索结果,很多并不可用. 由于是开发环境,这里一切从简了. 下载安装包.并解压进入bin目录,使用mysql_install_db.exe程序来进行安装.执行 m…

MSCKF5讲:后端代码分析

MSCKF5讲:后端代码分析 文章目录 MSCKF5讲:后端代码分析1 初始化initialize()1.1 加载参数1.2 初始化IMU连续噪声协方差矩阵1.3 卡方检验1.4 接收与订阅话题createRosIO() 2 IMU静止初始化3 重置resetCallback()4 featureCallback4.1 IMU初始化判断4.2 I…

【文末送书】智能计算:原理与实践

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab,机器人运动控制、多机器人协作,智能优化算法,滤波估计、多传感器信息融合,机器学习,人工智能等相关领域的知识和技术。关…

Linux系统运维脚本:一键添加防火墙规则(开启服务和网络端口)

目 录 一、要求 二、解决方案 (一)解决思路 (二)方案 三、脚本程序实现 (一)脚本代码和解释 1、脚本代码 2、代码解释 (二)脚本验证 1、脚本编辑 2、给予执行权限…

NumPy数据处理详解的笔记2

NumPy数据处理详解的笔记2 第1章NumPy基础 NumPy是用于处理多维数组的数值运算库,不仅可用于 机器学习,还可以用于图像处理,语言处理等任务。 1.2 多维数据结构ndarray的基础 在学习NumPy的过程中,只要理解了ndarray的相关知识…

java 关于 Object 类中的 wait 和 notify 方法。(生产者和消费者模式!)

4、关于 Object 类中的 wait 和 notify 方法。(生产者和消费者模式!) 第一:wait 和 notify 方法不是线程对象的方法,是 java 中任何一个 java 对象都有的方法,因为这两个方法是 Object 类中自带的。 wait 方…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的停车位检测系统(Python+PySide6界面+训练代码)

摘要:开发停车位检测系统对于优化停车资源管理和提升用户体验至关重要。本篇博客详细介绍了如何利用深度学习构建一个停车位检测系统,并提供了完整的实现代码。该系统基于强大的YOLOv8算法,并结合了YOLOv7、YOLOv6、YOLOv5的性能对比&#xf…

HarmonyOS端云体化开发—创建端云一体化开发工程

云开发工程模板 DevEco Studio目前提供了两种云开发工程模板:通用云开发模板和商城模板。您可根据工程向导轻松创建端云一体化开发工程,并自动生成对应的代码和资源模板。在创建端云一体化开发工程前,请提前了解云开发工程模板的相关信息。 …

前端学习之HTML(第一天)

什么是HTML HTML是一种用来描述网页的一种语言&#xff0c;HTML不是一种编程语言&#xff0c;而是一种标记语言。 HTML标签 HTML 标签是由尖括号包围的关键词&#xff0c;比如 <html> HTML 标签通常是成对出现的&#xff0c;比如 <b> 和 </b> 标签对中的…

ROS 2基础概念#3:主题(Topic)| ROS 2学习笔记

在ROS&#xff08;Robot Operating System&#xff09;中&#xff0c;主题&#xff08;Topics&#xff09;是实现节点之间通信的主要机制之一。节点&#xff08;Node&#xff09;可以发布&#xff08;publish&#xff09;消息到话题&#xff0c;或者订阅&#xff08;subscribe&…

市场复盘总结 20240304

仅用于记录当天的市场情况&#xff0c;用于统计交易策略的适用情况&#xff0c;以便程序回测 短线核心&#xff1a;不参与任何级别的调整&#xff0c;采用龙空龙模式 一支股票 10%的时候可以操作&#xff0c; 90%的时间适合空仓等待 二进三&#xff1a; 进级率中 20% 最常用的…

格两例12345

osu/Lucky Roll gaming 周末osu有道题&#xff1a;lcg已知低位 def lcg(s, a, b, p):return (a * s b) % pp getPrime(floor(72.7)) a randrange(0, p) b randrange(0, p) seed randrange(0, p) print(f"{p }") print(f"{a }") print(f"{b …