react的diff源码

react 的 render 阶段,其中 begin 时会调用 reconcileChildren 函数, reconcileChildren 中做的事情就是 react 知名的 diff 过程

diff 算法介绍

react 的每次更新,都会将新的 ReactElement 内容与旧的 fiber 树作对比,比较出它们的差异后,构建新的 fiber 树,将差异点放入更新队列之中,从而对真实 dom 进行 render。简单来说就是如何通过最小代价将旧的 fiber 树转换为新的 fiber 树。

diff 策略

react 将 diff 算法优化到 O(n) 的时间复杂度,基于了以下三个前提策略:

  • 只对同级元素进行比较。如果出现跨层级的 dom 节点更新,则不进行复用。 深度优先遍历
  • 两个不同类型的组件会产生两棵不同的树形结构。类型不同,整个删除
  • 对同一层级的子节点,开发者可以通过 key 来确定哪些子元素可以在不同渲染中保持稳定。

上面的三种 diff 策略,分别对应着 tree diff、component diff 和 element diff。

tree diff

根据策略一,react 会对 fiber 树进行分层比较,只比较同级元素(同一个父节点下的子节点(往上的祖先节点也都是同一个),而不是树的深度相同)。

react 的 tree diff 是采用深度优先遍历,所以要比较的元素向上的祖先元素都会一致,

即图中会对相同颜色的方框内圈出的元素进行比较,例如左边树的 A 节点下的子节点 C、D 会与右边树 A 节点下的 C、D、E进行比较。

当元素出现跨层级的移动时,例如下图: 

 A 子树从 root 节点下到了 B 节点下,在 react diff 过程中并不会直接将 A 子树移动到 B 子树下,而是进行如下操作:

  1. 在 root 节点下删除 A 节点
  2. 在 B 节点下创建 A 子节点
  3. 在新创建的 A 子节点下创建 C、D 节点

component diff

对于组件之间的比较,只要它们的类型不同,就判断为它们是两棵不同的树形结构,直接会将它们给替换掉。

例如下面的两棵树,左边树 B 节点和右边树 K 节点除了类型不同(比如 B 为 div 类型,K 为 p 类型),内容完全一致,但 react 依然后直接替换掉整个节点。实际经过的变换是:

  1. 在 root 节点下创建 K 节点
  2. 在 K 节点下创建 E、F 节点
  3. 在 F 节点下创建 G、H 节点
  4. 在 root 节点下删除 B 子节点

虽然如果在本例中改变类型复用子元素性能会更高一点,但是在时机应用开发中类型不一致子内容完全一致的情况极少,对这种情况过多判断反而会增加时机复杂度,降低平均性能。

element diff

react 对于同层级的元素进行比较时,会通过 key 对元素进行比较以识别哪些元素可以稳定的渲染。同级元素的比较存在插入删除移动三种操作。

如下图左边的树想要转变为右边的树: 

实际经过的变换如下:

  1. 将 root 节点下 A 子节点移动至 B 子节点之后
  2. 在 root 节点下新增 E 子节点
  3. 将 root 节点下 C 子节点删除

结合源码看 diff

整体流程

diff 算法从 reconcileChildren 函数开始,根据当前 fiber 是否存在,决定是直接渲染新的 ReactElement 内容还是与当前 fiber 去进行 Diff,看一下其源码:

 // 如果当前 fiber 节点为空,则直接将新的 ReactElement 内容生成新的 fiber,使mountChildFibers函数
  // 当前 fiber 节点不为空,则与新生成的 ReactElement 内容进行 diff 使用reconcileChildFibers函数

export function reconcileChildren(current: Fiber | null, // 当前 fiber 节点workInProgress: Fiber, // 父 fibernextChildren: any, // 新生成的 ReactElement 内容renderLanes: Lanes, // 渲染的优先级
) {if (current === null) {// 如果当前 fiber 节点为空,则直接将新的 ReactElement 内容生成新的 fiberworkInProgress.child = mountChildFibers(workInProgress,null,nextChildren,renderLanes,);} else {// 当前 fiber 节点不为空,则与新生成的 ReactElement 内容进行 diffworkInProgress.child = reconcileChildFibers(workInProgress,current.child,nextChildren,renderLanes,);}
}

因为我们主要是要学习 diff 算法,所以我们暂时先不关心 mountChildFibers 函数,主要关注 reconcileChildFibers ,我们来看一下它的源码

j

入口函数中,接收 returnFibercurrentFirstChildnewChildlanes 四个参数,其中,根据 newChid 的类型,我们主要关注几个比较常见的类型的 diff,单 React 元素的 diff、纯文本类型的 diff 和 数组类型的 diff。

 // 对新创建的 ReactElement 最外层是 fragment 类型单独处理,比较其 children
  // 对更新后的 React.Element 是单节点的处理
   // 更新后的 React.Element 是多节点的处理
  // 不符合以上情况都视为 empty,直接从父节点删除所有旧的子 Fiber

所以根据 ReactElement 类型走的不同流程如下: 

新内容为单元素

当新创建的节点 type 为 object 时,我们看一下其为 REACT_ELEMENT_TYPE 类型的 diff,即 placeSingleChild(reconcileSingleElement(...)) 函数。

先看一下 reconcileSingleElement 函数的源码:

echarts原理和源码解析 - 掘金 (juejin.cn)

根据源码得知,reconcileSingleElement 函数中,会遍历父 fiber 下所有的旧的子 fiber,寻找与新生成的 ReactElement 内容的 key 和 type 都相同的子 fiber。每次遍历对比的过程中:

  • 若当前旧的子 fiber 与新内容 key 或 type 不一致,对当前旧的子 fiber 添加 Deletion 副作用标记(用于 dom 更新时删除),继续对比下一个旧子 fiber
  • 若当前旧的子 fiber 与新内容 key 或 type 一致,则判断为可复用,通过 deleteRemainingChildren 对该子 fiber 后面所有的兄弟 fiber 添加 Deletion 副作用标记,然后通过 useFiber 基于该子 fiber 和新内容的 props 生成新的 fiber 进行复用,结束遍历。

若都遍历完没找到与新内容 key 或 type 子 fiber,此时父 fiber 下的所有旧的子 fiber 都已经添加了 Deletion 副作用标记,通过 createFiberFromElement 基于新内容创建新的 fiber 并将其 return指向父 fiber。

再来看 placeSingleChild 的源码:

placeSingleChild 中做的事情更为简单,就是将 reconcileSingleElement 中生成的新 fiber 打上 Placement 的标记,表示 dom 更新渲染时要进行插入。

所以对于 REACT_ELEMENT_TYPE 类型的 diff 总结如下: 

新内容为纯文本类型

当新创建节点的 typeof 为 string 或者 number 时,表示是纯文本节点,使用 placeSingleChild(reconcileSingleTextNode(...)) 函数进行 diff。

placeSingleChild 前面说过了,我们主要看 reconcileSingleTextNode 的源码:

新内容为纯文本时 diff 比较简单,只需要判断当前父 fiber 的第一个旧子 fiber 类型:

  • 当前 fiber 也为文本类型的节点时,deleteRemainingChildren 对第一个旧子 fiber 的所有兄弟 fiber 添加 Deletion 副作用标记,然后通过 useFiber 基于当前 fiber 和 textContent 创建新的 fiber 复用,将其 return 指向父 fiber
  • 否则通过 deleteRemainingChildren 对所有旧的子 fiber 添加 Deletion 副作用标记,然后 createFiberFromText 创建新的文本类型 fiber 节点,将其 return 指向父 fiber

所以对文本类型 diff 的流程如下: 

新内容为数组类型

上面所说的两种情况,都是一个或多个子 fiebr 变成单个 fiber。新内容为数组类型时,意味着要将一个或多个子 fiber 替换为多个 fiber,内容相对复杂,我们看一下 reconcileChildrenArray 的源码:

 

从上述代码我们可以得知,对于新增内容为数组时,react 会对旧 fiber 和 newChildren 进行遍历。

  1. 首先先对 newChildren 进行第一轮遍历,将当前的 oldFiber 与 当前 newIdx 下标的 newChild 通过 updateSlot 进行 diff,diff 的流程和上面单节点的 diff 类似,然后返回 diff 后的结果:
    • 如果 diff 后 oldFiber 和 newIdx 的 key 和 type 一致,说明可复用。根据 oldFiber 和 newChild 的 props 生成新的 fiber,通过 placeChild 给新生成的 fiber 打上 Placement 副作用标记,同时新 fiber 与之前遍历生成的新 fiber 构建链表树关系。然后继续执行遍历,对下一个 oldFiber 和下一个 newIdx 下标的 newFiber 继续 diff
    • 如果 diff 后 oldFiber 和 newIdx 的 key 或 type 不一致,那么说明不可复用,返回的结果为 null,第一轮遍历结束
  2. 第一轮遍历结束后,可能会执行以下几种情况:
    • 若 newChildren 遍历完了,那剩下的 oldFiber 都是待删除的,通过 deleteRemainingChildren 对剩下的 oldFiber 打上 Deletion 副作用标记
    • 若 oldFiber 遍历完了,那剩下的 newChildren 都是需要新增的,遍历剩下的 newChildren,通过 createChild 创建新的 fiber,placeChild 给新生成的 fiber 打上 Placement 副作用标记并添加到 fiber 链表树中。
    • 若 oldFiber 和 newChildren 都未遍历完,通过 mapRemainingChildren 创建一个以剩下的 oldFiber 的 key 为 key,oldFiber 为 value 的 map。然后对剩下的 newChildren 进行遍历,通过 updateFromMap 在 map 中寻找具有相同 key 创建新的fiber(若找到则基于 oldFiber 和 newChild 的 props创建,否则直接基于 newChild 创建),则从 map 中删除当前的 key,然后placeChild 给新生成的 fiber 打上 Placement 副作用标记并添加到 fiber 链表树中。遍历完之后则 existingChildren 还剩下 oldFiber 的话,则都是待删除的 fiber,deleteChild 对其打上 Deletion 副作用标记。

所以整体的流程如下: 

diff 后的渲染

diff 流程结束后,会形成新的 fiber 链表树,链表树上的 fiber 通过 flags 字段做了副作用标记,主要有以下几种:

  1. Deletion:会在渲染阶段对对应的 dom 做删除操作
  2. Update:在 fiber.updateQueue 上保存了要更新的属性,在渲染阶段会对 dom 做更新操作
  3. Placement:Placement 可能是插入也可能是移动,实际上两种都是插入动作。react 在更新时会优先去寻找要插入的 fiber 的 sibling,如果找到了执行 dom 的 insertBefore 方法,如果没有找到就执行 dom 的 appendChild 方法,从而实现了新节点插入位置的准确性

在 completeUnitWork 阶段结束后,react 会根据 fiber 链表树的 flags,构建一个 effectList 链表,里面记录了哪些 fiber 需要进行插入、删除、更新操作,在后面的 commit 阶段进行真实 dom 节点的更新,下一章将详细讲述 commit 阶段。

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

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

相关文章

【算法积累】辗转相除法

【算法积累】辗转相除法,python实现两种 辗转相除法(又称欧几里得算法)减法(不常用)代码实现执行结果 辗转相除法代码实现执行结果 辗转相除法(又称欧几里得算法) 又称欧几里得算法&#xff0c…

【洛谷 P8781】[蓝桥杯 2022 省 B] 修剪灌木 题解(数学)

[蓝桥杯 2022 省 B] 修剪灌木 题目描述 爱丽丝要完成一项修剪灌木的工作。 有 N N N 棵灌木整齐的从左到右排成一排。爱丽丝在每天傍晩会修剪一棵灌木,让灌木的高度变为 0 0 0 厘米。爱丽丝修剪灌木的顺序是从最左侧的灌木开始,每天向右修剪一棵灌木…

镭速教你如何解决大数据量串行处理的问题

大数据的高效处理成为企业发展的关键。然而,大数据量串行处理的问题常常困扰着许多企业,尤其是在数据传输方面。本文将探讨大数据量串行处理的常见问题,并介绍企业常用的处理方式,最后重点阐述镭速如何提供创新解决方案&#xff0…

【20240309】WORD宏设置批量修改全部表格格式

WORD宏设置批量修改全部表格格式 引言1. 设置表格文字样式2. 设置表格边框样式3. 设置所有表格边框样式为075pt4. 删除行参考 引言 这两周已经彻底变为office工程师了,更准确一点应该是Word工程师,一篇文档动不动就成百上千页,表格图片也是上…

Linux中三次握手,四次挥手状态图,端口复用 半关闭状态,心跳包

tcp三次握手和四次挥手状态图: 为什么需要2MSL: 原因1:让四次挥手过程更加可靠,确保最后一个发送给对方的ACK到达;若对方没有收到ACK应答,对方会再次发送FIN请求关闭,此时在2MSL时间内被动关闭…

MySQL-锁:共享锁(读)、排他锁(写)、表锁、行锁、意向锁、间隙锁,锁升级

MySQL-锁:共享锁(读)、排他锁(写)、表锁、行锁、意向锁、间隙锁 共享锁(读锁)、排他锁表锁行锁意向锁间隙锁锁升级 MySQL数据库中的锁是控制并发访问的重要机制,它们确保数据的一致性…

[C语言][PTA基础C基础题目集] strtok 函数的理解与应用

一.strtok函数的解释与说明 ①strtok函数的功能 Find the next token in a string. 即查找字符串中的下一个标记. 就是将一个字符串分割成一系列的子串. ②strtok函数的原型 char *strtok( char * strToken, const char * strDelimit ); strToken: 要分割的字符串. strDel…

【机器学习】在Python中进行K-Means聚类和层次聚类

文章目录 Python中聚类算法API的使用指南K-Means 聚类步骤一:导入必要的库步骤二:加载数据步骤三:应用K-Means聚类步骤四:保存聚类结果 层次聚类步骤一:导入库步骤二:加载数据并计算距离矩阵步骤三&#xf…

MyBatis拦截器四种类型和自定义拦截器的使用流程

文章目录 MyBatis拦截器四种类型和自定义拦截器的使用流程一、MyBatis拦截器四种类型的详细解释:1. **ParameterHandler 拦截器**:2. **ResultSetHandler 拦截器**:3. **StatementHandler 拦截器**:4. **Interceptor Chain 拦截器…

Threejs粒子水波纹效果

依赖 three(这个重要)react (这个不重要)ahooks(这个不重要)unocss(这个不重要) 效果 代码 import React, { useEffect, useRef } from react; import { useGetState } from ahoo…

数据结构---C语言栈队列

知识点: 栈: 只允许在一端进行插入或删除操作的线性表,先进后出LIFO 类似一摞书,按顺序拿,先放的书只能最后拿; 顺序栈:栈的顺序存储 typedef struct{Elemtype data[50];int top; }SqStack; SqS…

Java实现自定义Hive认证账户密码

一、业务背景 在搭建好Hive环境后,应用项目远程连接hive需要设置用户名和密码,但hive默认的用户名和密码都是空,因此需要设置自定义用户名和密码。 二、开发步骤 2.1 新建maven项目,pom.xml引入相关依赖,主要是hadoop、…

RabbitMQ 面试题及答案整理,最新面试题

RabbitMQ的核心组件有哪些? RabbitMQ的核心组件包括: 1、生产者(Producer): 生产者是发送消息到RabbitMQ的应用程序。 2、消费者(Consumer): 消费者是接收RabbitMQ消息的应用程序…

计算机网络——计算机网络的性能

计算机网络——计算机网络的性能 速率带宽吞吐量时延时延宽带积往返时间RTT利用率信道利用率网络利用率 我们今天来看看计算机网络的性能。 速率 速率这个很简单,就是数据的传送速率,也称为数据率,或者比特率,单位为bit/s&#…

Midjourney绘图欣赏系列(七)

Midjourney介绍 Midjourney 是生成式人工智能的一个很好的例子,它根据文本提示创建图像。它与 Dall-E 和 Stable Diffusion 一起成为最流行的 AI 艺术创作工具之一。与竞争对手不同,Midjourney 是自筹资金且闭源的,因此确切了解其幕后内容尚不…

信息安全、网络安全以及数据安全三者之间的区别

随着信息技术的飞速发展,网络安全、信息安全、数据安全等词汇在平时出现的频率越来越高,尤其是数据安全,是大家都关心的一个重要话题。事实上,有很多人对网络安全、信息安全、数据安全的概念是区分不清的,下面由我帮大…

吴恩达深度学习笔记:深度学习引言1.1-1.5

目录 第一门课:神经网络和深度学习 (Neural Networks and Deep Learning)第一周:深度学习引言(Introduction to Deep Learning)1.1 欢迎(Welcome)1.2 什么是神经网络?(What is a Neural Network)1.3 神经网络的监督学习(Supervised Learning …

【PyQT/Pysider】控件背景渐变

默认渐变配色说明 background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(255, 178, 102, 255), stop:0.55 rgba(235, 148, 61, 255), stop:0.98 rgba(0, 0, 0, 255), stop:1 rgba(0, 0, 0, 0));这段样式表使用了qlineargradient函数来创建…

Dynamic Wallpaper v17.4 mac版 动态视频壁纸 兼容 M1/M2

Dynamic Wallpaper Engine 是一款适用于 Mac 电脑的视频动态壁纸, 告别单调的静态壁纸,拥抱活泼的动态壁纸。内置在线视频素材库,一键下载应用,也可导入本地视频,同时可以将视频设置为您的电脑屏保。 应用介绍 Dynam…

chatgpt与人类有何不同?

ChatGPT和人类之间存在多个显著的差异。 首先,ChatGPT是一种基于人工智能技术的计算机程序,通过机器学习和自然语言处理等技术,从大量的数据中获取知识并生成语言输出。它主要依赖于算法和数据进行工作,能够迅速处理和检索信息&a…