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

diff算法、fiber链表

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

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

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

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

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

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

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

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

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

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

相关推荐
Joker Zxc4 分钟前
【前端基础(Javascript部分)】6、用JavaScript的递归函数和for循环,计算斐波那契数列的第 n 项值
开发语言·前端·javascript
Highcharts.js7 分钟前
React 图表如何实现下钻(Drilldown)效果
开发语言·前端·javascript·react.js·前端框架·数据可视化·highcharts
2501_9181269120 分钟前
学习所有6502写游戏存档的语句
汇编·嵌入式硬件·学习·游戏·个人开发
橙露27 分钟前
Webpack/Vite 打包优化:打包体积减半、速度翻倍
前端·webpack·node.js
chushiyunen31 分钟前
python中的魔术方法(双下划线)
前端·javascript·python
楠木6851 小时前
从零实现一个 Vite 自动路由插件
前端
星雨流星天的笔记本1 小时前
2.用洗洁精洗过的三口烧瓶的处理方法
学习
云边散步1 小时前
godot2D游戏教程系列二(18)
笔记·学习·游戏
终端鹿1 小时前
Vue2 迁移 Vue3 避坑指南
前端·javascript·vue.js
程序员陆业聪1 小时前
工程师的瓶颈,已经不是代码了
前端