React16源码: React中commit阶段的commitBeforeMutationLifecycles的源码实现

commitBeforeMutationLifecycles


1 )概述

  • 在 react commit阶段的 commitRoot 第一个while循环中
  • 调用了 commitBeforeMutationLifeCycles
  • 现在来看下,里面发生了什么

2 )源码

回到 commit 阶段的第一个循环中,在 commitRoot 函数里
定位到 packages/react-reconciler/src/ReactFiberScheduler.js#L647

看这里

// Invoke instances of getSnapshotBeforeUpdate before mutation.
nextEffect = firstEffect;
startCommitSnapshotEffectsTimer();// 接下去就进入了三个循环:
// 第一个循环主要是 commitBeforeMutationLifecycles,这个方法它其实很简单,它是这三个循环当中最简单的一个方法
// 它唯一的作用就是调用 ClassComponent 上面可能会存在的 getSnapshotBeforeUpdate 这么一个生命周期方法
while (nextEffect !== null) {let didError = false;let error;if (__DEV__) {invokeGuardedCallback(null, commitBeforeMutationLifecycles, null);if (hasCaughtError()) {didError = true;error = clearCaughtError();}} else {try {commitBeforeMutationLifecycles();} catch (e) {didError = true;error = e;}}if (didError) {invariant(nextEffect !== null,'Should have next effect. This error is likely caused by a bug ' +'in React. Please file an issue.',);captureCommitPhaseError(nextEffect, error);// Clean-upif (nextEffect !== null) {nextEffect = nextEffect.nextEffect;}}
}
  • 在开始循环之前都会用到一个全局变量叫做 nextEffect,当然它一开始是 firstEffect
    • 是在 RootFiber 上面,它的 firstEffect 到 lastEffect 这个链表上面的第一个effect
    • 也就是第一个需要我们commit的fiber对象
  • 需要注意一点,这边有一个很奇怪的代码,就是我们这个 commitBeforeMutationLifecycles 方法
    • 可以看到 import { commitBeforeMutationLifeCycles } from './ReactFiberCommitWork'
    • 但是又在本文件中,定义了一个同名的方法
      // 这个是核心
      function commitBeforeMutationLifecycles() {while (nextEffect !== null) {if (__DEV__) {ReactCurrentFiber.setCurrentFiber(nextEffect);}const effectTag = nextEffect.effectTag;if (effectTag & Snapshot) {recordEffect();const current = nextEffect.alternate;commitBeforeMutationLifeCycles(current, nextEffect); // 这个函数,不是上层的自己,而是 import 进来的}nextEffect = nextEffect.nextEffect;}if (__DEV__) {ReactCurrentFiber.resetCurrentFiber();}
      }
      
  • 这个操作会有点奇怪,因为正常来讲,import 进来的内容,它是一个常量,它不应该是能够直接被修改
  • 注意,在 commitRoot 里调用的 commitBeforeMutationLifeCycles 是文件内的这个方法
  • 而文件内的这个方法,调用的 commitBeforeMutationLifeCycles 是 import 进来的
    • 它来自于 packages/react-reconciler/src/ReactFiberCommitWork.js#L215
  • 它通过一个while循环,循环的是我们的 effect链
    • 在这个循环的后面,可以看到 nextEffect = nextEffect.nextEffect;
  • 这就是说一个一个往下这么去循环,对 有 Snapshot 这个 SideEffect 的节点执行了下面的方法

再次定位到 packages/react-reconciler/src/ReactFiberCommitWork.js#L215

进入 commitBeforeMutationLifeCycles 这个就是上面定义的同名函数里面调用的方法

function commitBeforeMutationLifeCycles(current: Fiber | null,finishedWork: Fiber,
): void {switch (finishedWork.tag) {case FunctionComponent:case ForwardRef:case SimpleMemoComponent: {commitHookEffectList(UnmountSnapshot, NoHookEffect, finishedWork);return;}case ClassComponent: {if (finishedWork.effectTag & Snapshot) {if (current !== null) {const prevProps = current.memoizedProps;const prevState = current.memoizedState;startPhaseTimer(finishedWork, 'getSnapshotBeforeUpdate');const instance = finishedWork.stateNode;// We could update instance props and state here,// but instead we rely on them being set during last render.// TODO: revisit this when we implement resuming.if (__DEV__) {if (finishedWork.type === finishedWork.elementType) {warning(instance.props === finishedWork.memoizedProps,'Expected instance props to match memoized props before ' +'getSnapshotBeforeUpdate. This is likely due to a bug in React. ' +'Please file an issue.',);warning(instance.state === finishedWork.memoizedState,'Expected instance state to match memoized state before ' +'getSnapshotBeforeUpdate. This is likely due to a bug in React. ' +'Please file an issue.',);}}const snapshot = instance.getSnapshotBeforeUpdate(finishedWork.elementType === finishedWork.type? prevProps: resolveDefaultProps(finishedWork.type, prevProps),prevState,);if (__DEV__) {const didWarnSet = ((didWarnAboutUndefinedSnapshotBeforeUpdate: any): Set<mixed,>);if (snapshot === undefined && !didWarnSet.has(finishedWork.type)) {didWarnSet.add(finishedWork.type);warningWithoutStack(false,'%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +'must be returned. You have returned undefined.',getComponentName(finishedWork.type),);}}instance.__reactInternalSnapshotBeforeUpdate = snapshot;stopPhaseTimer();}}return;}case HostRoot:case HostComponent:case HostText:case HostPortal:case IncompleteClassComponent:// Nothing to do for these component typesreturn;default: {invariant(false,'This unit of work tag should not have side-effects. This error is ' +'likely caused by a bug in React. Please file an issue.',);}}
}
  • 它传入的 current 是 workInProgress 对象,也就是fiber对象
  • 然后传入的 nextEfect 是 finishedWork 对象
  • 通过 instance.getSnapshotBeforeUpdate 传入两个 props 来获取 snapshot 快照对象
  • 之后将 snapshot 挂载到 instance.__reactInternalSnapshotBeforeUpdate
  • 对于其他类型的组件,它都没有任何的处理,只处理了 ClassComponent
  • 因为对这种情况来说,只有 ClassComponent 有这个 SideEffect
  • 并且会有 getSnapshotBeforeUpdate 这个生命周期方法的

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

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

相关文章

命名强制类型转换

命名强制类型转换 1. static_cast&#xff1a; static_cast 主要用于编译时的类型转换&#xff0c;它通常用于类层次结构中的相关类型、基本数据类型之间的转换以及一些隐式类型转换的显式表示。 任何具有明确的类型转换&#xff0c;只要不包含底层const&#xff0c;都可以使…

E7数据库备份和恢复

E7数据库备份和恢复 一、实验目的 在Mysql上&#xff0c;学习如何备份数据库和恢复的各种方法。 二、实验要求: 1、基本硬件配置:英特尔Pentium III 以上,大于4G内存&#xff1b; 2、软件要求:Mysql&#xff1b; 3、时间:1小时&#xff1b; 4、撰写实验报告并按时提交。 三、…

C++刷题日记:Day 1

题目描述 小明是一野生动物园的管理人员&#xff0c;他统计了一份野生动物的名单&#xff0c;糟糕的是&#xff0c;因为操作不当导致打乱了名单&#xff0c;每种野生动物出现的次数都无法进行查询。 小明只能重新进行统计&#xff0c;已知名单中的动物名称只由大小写字母构成&a…

实用工具合集(持续更新...)

一、搜索引擎 1.1、小白盘 网站&#xff1a;https://www.xiaobaipan.com 度盘资源搜索的网站&#xff0c;能够搜索电影、电视剧、小说、音乐等资源&#xff08;注意&#xff1a;评论区很多小伙伴说小白盘有毒&#xff0c;我用谷歌浏览器搜索过几次并无大碍&#xff0c;请慎用…

如何荒废你的2024?

这个演讲题目出人意料&#xff0c;当大家都在想着如何才能获得幸福、快乐、成功的时候&#xff0c;芒格却在跟我们讲“如何获得痛苦&#xff1f;” 为什么&#xff1f; 因为只有知道了自己不想过怎样的生活&#xff0c;才能想尽办法避免它&#xff1b;同样&#xff0c;也只有…

python3-cookbook-查找最大或最小的 N 个元素

第一章&#xff1a;数据结构和算法 Python 提供了大量的内置数据结构&#xff0c;包括列表&#xff0c;集合以及字典。大多数情况下使用这些数据结构是很简单的。但是&#xff0c;我们也会经常碰到到诸如查询&#xff0c;排序和过滤等等这些普遍存在的问题。 因此&#xff0c;这…

C++ day 1

思维导图 使用C编写一个程序&#xff0c;输入一个字符串&#xff0c;统计大小写字母、数字、空格和其他符号的个数 #include <iostream>using namespace std;int main() {int capital 0;int lower 0;int digit 0;int spaces 0;int others 0;cout << "请…

从全流程的角度来了解python包的使用,也许你会有不一样的认识

在python中&#xff0c;只要我们一谈到包或模块&#xff0c;基本默认说的就是包的导入和使用。也就是说只要我们知道包的名字&#xff0c;导入后知道怎么使用基本就可以了&#xff0c;但本人认为&#xff0c;我们仅仅了解的是包的一部分&#xff0c;若想对包有个整体的认识&…

EXCEL VBA调用adobe的api识别电子PDF发票里内容并登记台账

EXCEL VBA调用adobe的api识别电子PDF发票里内容并登记台账 代码如下 使用须知&#xff1a; 1、工具--引用里勾选[Adobe Acrobat 10.0 Type Library] 2、安装Adobe Acrobat pro软件Dim sht As Worksheet Function BrowseFolders() As String 浏览目录Dim objshell As ObjectDim…

小白的AI编程之路

AI初见 这两年各类大模型搜索引擎不断面世&#xff0c;BingChat,ChatGPT等等&#xff0c;网上对其各种神乎其神的描述和各种正面负面的评论纷至沓来&#xff0c;本着百闻不如一见的心态&#xff0c;我也注册了这些搜索引擎&#xff0c;然后开始了和这些AI小助手们的日常。 面…

测试模型分类

测试模型 1. 概述 软件测试和软件开发一样,都遵循软件工程原理,遵循管理学原理,所以理解好软件的开发模型会便于理解测试模型. 软件测试的一般流程: 我们发现一般的软件测试流程和软件开发的流程一样,但是这样的流程测试介入的较晚,对于前期重大的bug很难修复.所以测试的流程…

网工内推 | 急招网工、运维,弹性工作,不加班,最高22K

01 Finogeeks 招聘岗位&#xff1a;运维工程师 职责描述&#xff1a; 1、负责FinClip小程序数字化管理系统产品的POC测试、交付部署、日常巡检工作&#xff0c;包括&#xff1a;交付运维方案、安装部署、数据对接调试、安全事件分析、日常巡检维护等 2、负责FinClip小程序数字…

QCustomPlot开源库使用

1.简介 QCustomPlot是用于绘图和数据可视化的Qt C 小部件。它没有进一步的依赖关系&#xff0c;并且有据可查。该绘图库专注于制作美观&#xff0c;出版质量的2D绘图&#xff0c;图形和图表&#xff0c;以及为实时可视化应用程序提供高性能。看一下“ 设置”和“ 基本绘图”教…

css的flex-direction: column;与direction: rtl;的作用

flex 个人理解 对子元素影响 设为 Flex 布局以后&#xff0c;子元素的float、clear和vertical-align属性将失效。 作用自身的样式 1. flex-direction 属性决定主轴的方向(即项目的排列方向) 2. flex-wrap属性定义,如果一条轴线排不下&#xff0c; 如何换行。 3. flex-flow属性…

Java的异常处理

九. 异常处理 1.try - catch 回忆之前我们对异常的使用&#xff0c;我们用异常改变了方法执行流程 public class TestTry {public static void main(String[] args) {System.out.println(1);test(0.0);System.out.println(3);}public static void test(double p) {if(p <…

docker: 修改容器的端口

修改运行中容器的端口 正在运行的容器端口冲突了&#xff0c;但是还需要这个容器&#xff0c;怎么办&#xff1f;只能修改端口了 过程&#xff1a; 停止需要修改的容器 修改hostconfig.json文件 重启 docker 服务 启动修改容器 停止需要修改的容器 [roottest ~]# docke…

猫头虎分享:已解决RuoYi-Vue3 项目代码生成器默认生成代码使用的Vue2模板代码问题与Vue2升级到Vue3解决方案

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通Golang》…

PHP中一些特征函数导致的漏洞总结

第一部分&#xff1a; 特征函数 接触到几个常用的函数&#xff1a; \\ \\\ md5 intval strpos in_array preg_match str_replacephp用这些函数实现过滤一些代码&#xff0c;漏洞可能有一些特性&#xff0c;利用这些特征代码进行对比&#xff1b;账号密码对比&#xff1b;强制检…

npm 报错 request to https://registry.cnpmjs.org/vue failed, reason:

npm 报错 request to https://registry.cnpmjs.org/vue failed, reason:_qq62581587d2bea的技术博客_51CTO博客 本来是非常简单的一个报错。 正常情况下&#xff0c;按照网上的方法就可以解决问题。 但是我尝试了使用代理、换源、重装node.js&#xff08;但是npm的配置参数没…

由于找不到msvcr120.dll,无法继续执行代码

一、msvcr120.dll作用介绍 msvcr120.dll文件是Microsoft Visual C Redistributable Package的一部分&#xff0c;它是一个动态链接库&#xff08;DLL&#xff09;文件。这个文件在Windows操作系统中提供C运行时库支持&#xff0c;包含了大量系统级函数和对象&#xff0c;这些函…