【react】react18的学习(十一)– 底层原理(一)之 diff 算法

diff算法、fiber链表

步骤:(追求多复用,快渲染)

  • 首次渲染,缓存虚拟dom或fiber链表(17及以后);

  • 组件更新,将新生成的虚拟dom与已有的真实dom的fiber链表对比;

  • 遵循同级对比、深度对比原则,先依次找节点对比;

  • 对比过程中,第一轮对比:按链表顺序对比,节点key值相同进一步比较标签、内容,并进行标记;

  • 当发现节点key不同时,则第一轮结束,开始从头开始第二轮对比;

  • 第二轮对比,是新的虚拟dom从第一轮中断的位置开始与fiber链表的map映射表对比;

  • 第二轮对比是以新虚拟dom的顺序从第一轮中断的位置开始依次进行,不是与映射表相同索引节点比较,而是去映射表找相同key值的节点比较,并给映射表的节点做相应标记;

  • 最多两轮后,依次得到:要删除的8、要更新的或复用的4(只内容不同或相同)、要移动位置的6、要新增的2,不变的不做标记;

  • 处理:要删除的、不变的和复用的、移动的、新增的;

相关推荐
想搞艺术的程序员6 分钟前
Java Survivor区学习笔记
java·笔记·学习·垃圾回收
吃杠碰小鸡8 分钟前
学习英语的思路性问题
学习
谪星·阿凯9 分钟前
XSS漏洞解析博客
前端·web安全·xss
ole ' ola15 分钟前
lambda表达式
java·前端·jvm
-Springer-19 分钟前
STM32 学习 —— 个人学习笔记9-2(USART串口数据包 & 串口收发 HEX 及 文本 数据包)
笔记·stm32·学习
wefly201721 分钟前
无需安装、开箱即用!m3u8live.cn 在线 HLS 播放器,调试直播流效率翻倍
前端·后端·python·前端开发工具·后端开发工具
UXbot22 分钟前
为什么 AI 正在重新定义 UI 设计工具的入门门槛
前端·人工智能·低代码·ui·交互·ai编程·ux
会编程的李较瘦35 分钟前
【C语言程序设计学习】一、C语法基础
c语言·开发语言·学习
柳杉37 分钟前
两款惊艳的 WebGL 开源项目推荐
前端·javascript·数据可视化
给算法爸爸上香43 分钟前
web网页显示点云
前端·3d·web·点云