【React】Diff算法

1. React15 Diff算法(递归进行)

一句话概括:新虚拟DOM和旧虚拟DOM对比,找出差异,根据差异更新真实DOM

Diff过程描述:

  1. 树比较(DOM)

同层节点之间相互比较,不会跨层级比较。(当发现节点不存在了,则将该节点及其⼦节点全部删除)

  1. 组件比较(class组件)

不同类型的节点,产生不同的树结构。(节点的类型相同,则按原策略继续比较虚拟DOM,节点的类型不同,移除老节点,创建新节点)

  1. 元素比较(DOM)

同一层级子节点,可以通过 key 来指定那些节点在不同的渲染下保持稳定

2. React16+ Diff算法(Fiber Reconciler,异步可中断)

一句话概括:React17 Diff算法是新JSX对象跟老Fiber树的对比,生成新Fiber的过程

Diff过程描述:

  1. 单节点比较:如果新的子节点(JSX)只有一个元素的话,对应老Fiber是一个或者多个。

1.1 key相同,type相同,复用老Fiber,将老Fiber节点标记为更新;

1.2 key相同,type不同,老Fiber标记删除,根据新的JSX生成新的Fiber,并标记插入;

1.3 key不同,将当前老Fiber标记删除,继续与老Fiber节点的其他兄弟Fiber进行比较。

  1. 多节点比较:如果JSX对象是一个数组的话

第一轮遍历(依次比较):

2.1 依次比较,key和type都相同,全部可复用

2.2 遇到key相同,type不同,不可复用,则将相应老Fiber节点标记删除,根据JSX生成新的Fiber节点

2.3 遇到key不同,直接进入第二轮遍历

2.4 如果JSX对象遍历结束,或者老Fiber遍历结束,进入第二轮遍历

第二轮遍历(分四种情况)

2.5 JSX对象和老Fiber都遍历完了,第二轮遍历直接结束

2.6 JSX对象遍历完了,老Fiber没有遍历完,将剩下老Fiber节点标记删除

2.7 JSX对象没有遍历完,老Fiber遍历完了,根据剩下JSX中元素创建新Fiber,并标记插入

2.8 JSX对象和老Fiber都没有遍历完,根据JSX对象中元素的顺序,对老Fiber进行移动。

所有标记effectTag的Fiber节点形成一条单向链表,在commit阶段,遍历该单向链表,根据effectTag更新真实DOM

相关推荐
abcy0712136 分钟前
flink state实例
大数据·算法·flink
qizayaoshuap16 分钟前
# [特殊字符] 密码生成器 — 鸿蒙ArkTS安全算法与密码强度评估系统
java·算法·安全·华为·harmonyos
良木林25 分钟前
滑动窗口 - LeetCode hot 100
javascript·算法·leetcode·双指针·滑动窗口
2401_8414956429 分钟前
【数据结构】B*树
数据结构·c++·b树·算法·删除·插入·三分分裂
QXWZ_IA2 小时前
**电力登高作业高空失保实时监管:千寻智能安全带高挂低用监测方案**
人工智能·科技·算法·能源·智能硬件
爱刷碗的苏泓舒2 小时前
FFRT:固定失败率比率检验、宽巷模糊度固定及 Ratio Test
算法·相位偏差·模糊度固定·ppp-ar·ffrt·ratio test·wlnl
不简说2 小时前
# JS 代码技巧 vol.7 — 20 个浏览器 API 实战,自带 API 能干的事别自己封装
前端·javascript·面试
小园子的小菜2 小时前
深入理解 JVM 垃圾回收:从对象判定、回收算法到经典收集器全解析
jvm·算法
2601_954526752 小时前
【硬核长文】从卡门涡街物理方程到边缘网关温压补偿算法:工业蒸汽测控实战,深度解密靠谱的涡街流量计厂家有哪些
算法
Hilaku2 小时前
为什么 Cloudflare 能做到毫秒级冷启动,而其它云厂商却不行?
前端·javascript·程序员