react Hooks(useEffect)实现原理 - 简单理解

useEffect

语法: useEffect(setup, dependencies?)
含义: useEffect 是一个 React Hook,它允许你 将组件与外部系统同步。

useEffect 源码简单理解

一、mountEffect 和 upadateEffect

useEffect 与其它 hooks 一样分为 mountEffect 和 upadateEffect 两个阶段

第一次执行 mountEffect
在这里插入图片描述
后面执行 upadateEffect
在这里插入图片描述
从代码中可以看出 mountEffect 和 upadateEffect 传参都是 函数 和 依赖数组,调用 mountEffectImplupdateEffectImpl
mountEffectImpl 和 updateEffectImpl 它们的四个入参一样。其中前面两个入参表示 tag 实现了指定的行为,具体可参考源码 ReactSideEffectTags.js 和 ReactHookEffectTags.js文件,暂时忽略。

二、mountEffectImpl 和 updateEffectImpl

mountEffectImpl

在这里插入图片描述
以上代码中可以看出 执行 pushEffect 并将返回结果记录在 hook的memoizedState上

updateEffectImpl

在这里插入图片描述
以下代码可以看出 当 currentHook 为空的时候,updateEffectImpl 的逻辑与 mountEffectImpl 的逻辑是一样。当 currentHook 不为空、依赖数组不为空时,判断依赖数组里的值是否有变化,若相等无变化则执行pushEffect。猜测这个时候的 hookFlags 指不执行这次 useEffect。

不管哪个阶段最终都执行 pushEffect 函数,那它是啥呢?

pushEffect

在这里插入图片描述
这个函数首先根据入参声明了一个新的 effect 并返回。它实际是一个循环链表

Effect = {tag: HookEffectTag, // 一个二进制数,它将决定 effect 的行为create: () => (() => void) | void, // 绘制后应该运行的回调inst: (() => void) | void, // 用于确定是否应销毁和重新创建 effectdeps: Array<mixed> | null, // 决定重绘制后是否执行的 depsnext: Effect, // 函数组件中定义的下一个 effect 的引用
};

componentUpdateQueue : 存储 Effect 的全局变量
判断 componentUpdateQueue 是否为空:

  1. componentUpdateQueue 空:与 mountEffect 逻辑类似,它会创建一个空的 componentUpdateQueue,它其实是 {lastEffect: null},之后将 componentUpdateQueue.lastEffect 指向 effect.next,其实就是存了一下 effect
  2. componentUpdateQueue 不为空:
    2.1 lastEffect 为空:这种情况是新的渲染阶段的第一个 useEffect,逻辑处理和 componentUpdateQueue 为空时一致
    2.2 lastEffect 不为空:这种情况意味着这个组件有多个 useEffect,是第二个及其之后的 useEffect 会走到的分支,将 lastEffect 指向下一个 effect

最后 returen effect

小结

以上就是 useEffect 源码的大致流程。表面上到这里就结束啦。
但不难发现,useEffect 的很多功能在上面代码并没有实现。还有以上代码中的 pushEffect 之后又有哪些逻辑呢?componentUpdateQueue 存储 Effect 之后会在哪里被用到?

饿了,先干饭去,后面接着总结。未完待续。。。

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

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

相关文章

I2C总线通信(温湿度实验)

1.使能GPIOF时钟 2.将PF14设置为输出&#xff0c;PF15也可以先设置为输出 3.设置输出速度最高档位速度 4.SI7006的初始化 5.读取温度、湿度 6.将读取到的温度湿度数据通过计算公式进行转换 7.将结果输出 main.c #include "si7006.h"extern void printf(cons…

linux bash shell变量操作符 —— 筑梦之路

1. 变量子串 ${var} 返回变量var的内容&#xff0c;单独使用时有没有{}一样&#xff0c;混合多个变量和常量时&#xff0c;用{}界定变量名 ${#var} 返回变量var内容的长度 ${var:offset} 从变量var中的偏移量offset开始截取到字符串结尾的子字符串&#xff0c;offset从0开始 ${…

工科数学分析(华南理工大学)

旷了三天课&#xff0c;估计要被薄纱了这下&#xff08;&#xff09; ----------------引言 第一节 集合与实数集 比较重要的是实数具有稠密性。 即在两个实数之间存在无穷个其他实数&#xff0c; 然后是绝对值不等式 第一个经常用来放缩不等式&#xff0c;证明极限 第二…

DENet:用于可见水印去除的Disentangled Embedding网络笔记

1 Title DENet: Disentangled Embedding Network for Visible Watermark Removal&#xff08;Ruizhou Sun、Yukun Su、Qingyao Wu&#xff09;[AAAI2023 Oral] 2 Conclusion This paper propose a novel contrastive learning mechanism to disentangle the high-level embedd…

Debian 系统镜像下载

最近在看一些网络相关的文章需要用到 debian 11.x 的系统网上找了好多都发下载&#xff0c;在官网看一下 有个 11.8 的版本我无法下载&#xff0c;提示被最新的 debian-12.4.0 所代替&#xff0c;于是找到了这个链接 Index of /cdimage/unofficial/non-free/cd-including-fi…

imazing是什么软件

imazing是什么软件 iMazing 是世界上最值得信赖的软件,可以将您的信息、音乐、文件和数据从 iPhone 或 iPad 传输到您的 Mac 或 PC。 获得备份、数据提取、媒体和文件传输的强大能力,以及更多 iMazing 功能。 iMazing是一款第三方的苹果iOS设备管理软件。 iMazing- 2 Mac-安装…

web前端之若依开发经验

MENU 前言创建路由的细节 前言 1、官网地址 2、在线文档 3、演示地址 4、代码下载 5、野生版的若依开发文档 创建路由的细节 1、从系统管理进入菜单管理页面创建菜单&#xff0c;菜单创建成功后刷新页面&#xff0c;然而刚刚创建的菜单并不会出现。 2、解决创建完菜单不显示问题…

【计算机网络基础4】UDP协议、DNS协议、NAT协议、DHCP协议和HTTP协议

1、UDP协议 UDP用户数据报协议&#xff0c;是面向无连接的通讯协议&#xff0c;UDP数据包括目的端口号和源端口号信息&#xff0c;由于通讯不需要连接&#xff0c;所以可以实现广播发送。 UDP通讯时不需要接收方确认&#xff0c;属于不可靠的传输&#xff0c;可能会出现丢包现…

死锁(面试常问)

1.什么是死锁 简单来说就是一个线程加锁后解锁不了 一个线程&#xff0c;一把锁&#xff0c;线程连续加锁两次。如果这个锁是不可重入锁&#xff0c;会死锁。两个线程&#xff0c;两把锁。 举几个例子&#xff0c;1.钥匙锁车里了&#xff0c;车钥匙锁家里了。2. 现在有一本书…

slot的理解

一. 什么是slot? 在Vue中&#xff0c;slot 是一种用于在组件之间进行内容分发的机制。它允许我们在组件的模板中定义具有特定名称的插槽&#xff0c;并在组件的使用者中填充相应的内容。 二. 使用场景 通过插槽可以让用户可以拓展组件&#xff0c;去更好地复用组件和对其做定…

在 Qt Creator 中编写 Doxygen 风格的注释

2023年12月10日&#xff0c;周日上午 如何生成Doxygen 风格的注释 在需要Doxygen 风格注释的函数上方输入 /**&#xff0c;然后按下 Enter 键。Qt Creator 将自动为你生成一个注释模板。 输入&#xff0c;Qt Creator会自动帮你补全Doxygen标签 不得不说&#xff0c;写了Doxyge…

Re58:读论文 REALM: Retrieval-Augmented Language Model Pre-Training

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文名称&#xff1a;REALM: Retrieval-Augmented Language Model Pre-Training 模型名称&#xff1a;Retrieval-Augmented Language Model pre-training (REALM) 本文是2020年ICML论文&#xff0c;作者来自…

Java版工程行业管理系统源码-专业的工程管理软件-提供一站式服务—鸿鹄工程管理系统

鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 项目背景 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工程管理的提…

飞天使-docker知识点3-docker数据卷

文章目录 pstreedocker 数据类型数据卷data volumedocker容器之间互联网络 设置docker启动时候的内网ip段docker registry 下载镜像 pstree pstree -p 1 pstree 是一个 Linux/Unix 命令&#xff0c;用于显示进程之间的父子关系。-p 选项会显示每个进程的进程 ID&#xff08;…

数据结构与算法:衡量算法好坏的指标——复杂度

1.复杂度 复杂度&#xff0c;用来分析算法执行过程中&#xff0c;所需要的资源。 时间复杂度是衡量所需要的时间。 空间复杂度&#xff0c;是衡量所需要的(内存)空间。 1.1 时间复杂度 特性 1.衡量算法执行所需时间 2.根据「常数操作」次数推定 3.一般以最大数据量N作为衡量…

js基础:函数、对象、WebAPIs-DOM

一、函数和对象 1、函数概述 &#x1f916;chatgpt&#xff1a;什么是函数&#xff1f;为什么要有函数&#xff1f; 函数是一种可重复使用的代码块&#xff0c;它们可以接受输入&#xff08;参数&#xff09;、执行特定的任务&#xff0c;并返回结果。 JavaScript中函数是非常…

计算机网络链路层(期末、考研)

计算机网络总复习链接&#x1f517; 目录 组帧差错控制检错编码纠错编码 流量控制与可靠传输机制流量控制、可靠传输与滑动窗口机制单帧窗口与停止-等待协议多帧滑动窗口与后退N帧协议&#xff08;GBN&#xff09;多帧滑动窗口与选择重传协议 介质访问控制信道划分介质访问控制…

Paper Reading: (InPL) 不平衡半监督学习中的分布内伪标记优先

目录 简介目标/动机方法实验总结Appendix 简介 题目&#xff1a;《InPL: Pseudo-labeling the Inliers First for Imbalanced Semi-supervised Learning》, ICLR’23 ​ InPL:不平衡半监督学习中的分布内伪标记优先 日期&#xff1a;2023.2.2 单位&#xff1a;威斯康星大学麦…

高通平台开发系列讲解(外设篇)高通平台EMMC适配说明

文章目录 一、EMMC的内部框图说明二、EMMC 设备树配置三、EMMC 内核配置四、EMMC 源码沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇章主要图解高通平台 EMMC适配说明。 eMMC(嵌入式多媒体卡)是一种集成了闪存存储器和控制器的存储芯片,通常用于嵌入式设备中,…

米贸搜|facebook广告的素材及文案

一、Facebook广告的形式 1、 Facebook轮播广告 Facebook广告的轮播广告&#xff0c;商家可以在一个广告位。上面放3~5张图片或者是视频来展示产品或APP。虽然没有声音&#xff0c;这是用户可以自己滑动图片或视频&#xff0c;看到多款产品或者是单个产品的细节。 轮播广告的…