useRef 源码解读

news2024/11/24 9:31:10

文章目录

    • useRef 源码解读
      • mountRef
      • updateRef
      • ref 的生命周期(工作流程)
        • 总结:
        • render 阶段
        • commit 阶段
          • 总述
          • 具体阐述
            • safelyDetachRef
            • commitAttachRef

useRef 源码解读

由于 string 类型的 ref 已不推荐使用,所以只针对 function |{current:any} 类型的 ref

与之前 useState 和 useEffect 一样,在 mount 阶段时,会调用 mountRef;在 update 阶段时,会调用 updateRef
在这里插入图片描述
在这里插入图片描述

mountRef

  1. 获取当前 hook 对象
  2. 将 hook.memoizedState 赋值为 ref

其实useRef 最终返回了就是一个普通对象,包含有 current 属性 , {current: initialValue}
在这里插入图片描述

updateRef

很简单

  1. 获取当前 hook 对象
  2. 返回 hook.memoizedState ,即 返回 ref 对象

在这里插入图片描述

若是类组件实现 ref ,使用的是 createRef 函数来创建的对象,而且也是一样的 有 current 属性的对象
在这里插入图片描述

ref 的生命周期(工作流程)

一般我们在 HostComponent,ClassComponent,FunctionComponent ,ForwardRef 里面都可以使用 ref 属性,ref 属性的值一般是 一个函数或者是 一个包含current 属性的对象

比如:

<Home ref={homeRef} />
<div ref={divRef} />

对于一个 函数类型的 ref 来说,在 ref的不同生命周期中,这个 function ref 都会被调用,并且它的传参是不一样的;

对于一个包含 current 属性的对象来说,在 ref的不同生命周期中,current 属性对应的值也是不一样的

总结:

ref 的工作流程可以分为两部分:

  • render 阶段为含有 ref 属性的 fiber 添加 Ref effectTag
  • commit 阶段为包含 Ref effectTag 的 fiber 执行对应的操作

render 阶段

主要是 markRef 函数

在首屏渲染时,并且有ref 属性的情况下,

或者 在 update 时,并且 ref 改变的情况下,都会为当前 fiber 加上 Ref 的 effectTag
在这里插入图片描述

commit 阶段

总述

当标记完之后,进入 commit 阶段。

  1. 对于 ref 属性改变的情况,需要先移除之前的 ref

  2. 对于 Deletion effectTag 的 fiber(对应需要删除的DOM 节点),需要递归它的子树,对 子孙 fiber 的 ref 执行类似 commitDetachRef 的操作,这一步主要是 safelyDetachRef 函数

  3. 进入 ref 的赋值阶段,commitLayoutEffect 会执行 commitAttachRef (赋值 ref)

具体阐述

当标记完之后,进入 commit 阶段。

  1. 对于 ref 属性改变的情况,需要先移除之前的 ref

  2. 对于 Deletion effectTag 的 fiber(对应需要删除的DOM 节点),需要递归它的子树,对 子孙 fiber 的 ref 执行类似 commitDetachRef 的操作,这一步主要是 safelyDetachRef 函数

safelyDetachRef

递归子树,对子树中每个 fiber 节点执行 commitunmount
在这里插入图片描述

在 commitunmount 中,会根据fiber 的类型来做不同的处理
在这里插入图片描述
比如说若是 classComponent 类型的话,不仅会执行 safelyDetachRef ,还会判断 实例中是否存在 componentWillUnmount 的生命周期函数,若存在,还会执行 这个生命周期函数:
在这里插入图片描述

在 safelyDetachRef 函数中,若是 函数类型的 ref,会执行 ref 函数,参数为null;

若是对象类型的,就是把 current 属性赋值为 null:
在这里插入图片描述

  1. 进入 ref 的赋值阶段,commitLayoutEffect 会执行 commitAttachRef (赋值 ref)
commitAttachRef
  1. 通过当前fiber的 tag 来获取对应的实例,对于 HostComponent ,实例就是获取到的 DOM 节点,其他情况就是 fiber.stateNode
  2. 判断 ref 的类型,如果是 函数类型,调用 ref 函数并将实例传过去;若不是,则将 ref.current 赋值为该 实例

在这里插入图片描述

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

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

相关文章

论文复现-1:bertscore

Bertscore是计算相似度的一种方法。 遗留问题&#xff1a;使用model layer 中的单一层 还是多个层&#xff0c;会对结果造成很大的影响吗&#xff1f; sent_encode函数是使用tokenizer将句子做encode。 tokenizer.encode( sent, add_special_tokensTrue, add_prefix_spaceTrue,…

HTML与CSS基础

2022.12.12 程序员在前端写完代码之后通过浏览器的渲染和解析成为用户看到的网页 浏览器出品的公司不同&#xff0c;内部的渲染引擎也不同。导致解析相同代码时的速度、性能、效果也不同 相同的前端网页在不同浏览器中运行的的结果也可能不同 WEB的三大标准 HTML包含页面内…

Java+MySQL基于SSM的智能办公管理系统

随着时代的发展,人们越来越来希望通过简单方便快捷的方式来进行办公,通过自能办公系统可以实现在线办公,这种办公模式脱离了传统纸质办公很多困扰,在实现现代化的同时提高了办公的效率。 本智能办公管理系统采用JAVA语言来进行开发,用小巧灵活的MySQL数据库做完后台存储解释。本…

痞子衡职场经验与感悟分享 - 索引

大家好&#xff0c;我是痞子衡&#xff0c;是正经搞技术的痞子。本系列痞子衡给大家分享的是职场经验与见闻感悟。 痞子衡在嵌入式行业也摸打滚爬了不少年&#xff0c;有一些个人经验可以给大家参考。所谓他山之石可以攻玉&#xff0c;希望痞子衡的经验对大家的职场之路有所帮…

jsp+ssm计算机毕业设计电影影评网【附源码】

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; JSPSSM mybatis Maven等等组成&#xff0c;B/S模式 Mave…

java基础的综合运用

文章目录前言一.类的设计书籍类书架类用户类二.行为的规范2.1 增加书籍2.2展示所有书籍2.3查找书籍2.4 删除书籍2.5 归还书籍2.6 借阅书籍2.7 退出系统三.测试类的方法四.项目的目录前言 在我们学习完面向对象的知识之后&#xff0c;我们就要运用相关知识去实现一个图书管理系…

十六进制转Ascii脚本(包含\x处理)

目录 1.前言 2.十六进制转换脚本(包含处理\x) 1.前言 在以前玩CTF的时候,会遇到十六进制编码,特别是带\x的那种,网上虽然也有在线解密网站,但是对于\x解码不是特别友好。 2.十六进制转换脚本(包含处理\x&#

【Flink实时数仓】数据仓库项目实战 《四》日志数据分流 【DWD】

文章目录【Flink实时数仓】数据仓库项目实战 《四》日志数据分流-流量域 【DWD】1.流量域未经加工的事务事实表1.1主要任务1.1.1数据清洗&#xff08;ETL&#xff09;1.1.2新老访客状态标记修复1.1.3新老访客状态标记修复1.2图解1.3代码1.4数据测试1.4.1 测试脏数据1.4.2 测试e…

论文写作神器,SCI 写作必备

一、论文写作建议与英文句型积累/引用 1. Academic Phrasebank 网址&#xff1a; https://www.phrasebank.manchester.ac.uk/ Academic Phrasebank&#xff1a;从引言工作到结论提出了论文写作的详细建议&#xff0c;并在每个小点给出了海量的英语表达以供参考。是 SCI 新手…

linux red hat 8.0 搭建DNS服务

DNS简介&#xff1a; 简单的来说&#xff0c;DNS就是把域名和IP地址联系在一起的服务&#xff0c;有了DNS服务器&#xff0c;你就不用输入IP地址来访问一个网站&#xff0c;可以通过输入网址访问。 可以把DNS服务理解成网易有道词典&#xff0c;你去搜索一个英语单词&#xff0…

【MindStudio训练营第一期】【昇腾AI训练营新手班学习笔记】大作业

介绍 大作业&#xff1a;使用MindStudio成功复现昇腾社区中的MindX SDK应用案例 选题&#xff1a;黑白图像上色 https://www.hiascend.com/zh/developer/mindx-sdk/case-studies/d0c56d6f-a6f9-4b77-8587-db8272f22f3b 步骤 运行 使用MindStudio打开下载到的工程文件 创建d…

jsp+ssm计算机毕业设计大学新生军训管理系统【附源码】

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; JSPSSM mybatis Maven等等组成&#xff0c;B/S模式 Mave…

笔试强训(四十八)

目录一、选择题二、编程题2.1 左右最值最大差2.1.1 题目2.1.2 题解一、选择题 &#xff08;1&#xff09;常见的http错误描述原因错误的是&#xff08;D&#xff09; A.404-Not found B.302-临时重定向 C.500-内部服务错误 D.403-IP address rejected 403 Forbidden&#xff1…

Unity Animancer插件(三)运动

一、根运动 Animancer的根运动系统与原生的工作原理完全相同&#xff0c;但我们可以通过继承Transition类型或实现ITransition接口&#xff0c;来将额外的数据与动画绑定&#xff0c;从而更方便地控制根运动。 在下面这个示例中&#xff0c;我们通过自定义的Transition类实现…

jsp+ssm计算机毕业设计订单管理系统【附源码】

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; JSPSSM mybatis Maven等等组成&#xff0c;B/S模式 Mave…

Linux操作系统~信号处理的底层原理

目录 1.信号在内核中的表示 信号处理的方法 2.信号的递达&#xff0c;未决&#xff0c;阻塞 3.信号集操作函数 &#xff08;1&#xff09;.sigset_t&#xff08;信号集类型&#xff09; &#xff08;2&#xff09;.信号集函数 &#xff08;3&#xff09;.sigprocmask函数…

基于asp.net194校园火车票预订系统-计算机毕业设计

项目介绍 asp.net版火车票查询系统主要有用户注册&#xff0c;在线查询&#xff0c;在线订票&#xff0c;后台管理等功能。用户只有先注册才能登录火车票查询系统的首界面&#xff0c;然后可以进行在线查询、车票订购的功能。可对车次信息的查询和客户对已定车票信息的查询&am…

【云原生进阶之容器】第一章Docker核心技术1.6节——UnionFS

1 UnionFS综述 1.1 什么是 UnionFS 联合文件系统(Union File System),2004年由纽约州立大学开发,它可以把多个目录内容联合挂载到同一个目录下,而目录的物理位置是分开的。UnionFS可以把只读和可读写文件系统合并在一起,具有写时复制功能,允许只读文件系统的修改可以保…

二叉排序树详解及实现

二叉排序树详解及实现1.什么是二叉排序树2.二叉排序树的数据结构2.1二叉排序树的节点类型2.2二叉排序树中插入某个元素2.3 二叉排序树中按值查找元素2.4 找排序二叉树中的最小值2.5返回排序二叉树中ptr中序遍历的后续节点2.6 寻找排序二叉树中的最大值2.7 寻找二叉树中中序遍历…

《痞子衡嵌入式半月刊》 第 68 期

痞子衡嵌入式半月刊: 第 68 期 这里分享嵌入式领域有用有趣的项目/工具以及一些热点新闻,农历年分二十四节气,希望在每个交节之日准时发布一期。 本期刊是开源项目(GitHub: JayHeng/pzh-mcu-bi-weekly),欢迎提交 issue,投稿或推荐你知道的嵌入式那些事儿。 上期回顾 :…