React16源码: React中处理ref的核心流程源码实现

ref的实现过程


1 )概述

  • 在更新流程当中如何去设置ref上面的对象的过程
  • 在我们创建fiber的时候去处理ref这个属性
  • 那我们什么时候创建fiber对象?
    • 就是我们去更新某一个节点,然后要去调和它的子节点的时候
    • 这个时候我们会对每一个子节点去创建这个fiber对象
  • 创建这个fiber对象的过程,我们就会去处理这个ref
  • commit开始之前先detach

2 )源码

定位到 packages/react-reconciler/src/ReactChildFiber.js#L1108

function reconcileSingleElement(returnFiber: Fiber,currentFirstChild: Fiber | null,element: ReactElement,expirationTime: ExpirationTime,
): Fiber {// ... 跳过很多代码while (child !== null) {// TODO: If key === null and child.key === null, then this only applies to// the first item in the list.if (child.key === key) {if (child.tag === Fragment? element.type === REACT_FRAGMENT_TYPE: child.elementType === element.type) {// ... 跳过很多代码// 注意这里existing.ref = coerceRef(returnFiber, child, element);// ... 跳过很多代码} else {deleteRemainingChildren(returnFiber, child);break;}} else {deleteChild(returnFiber, child);}child = child.sibling;}if (element.type === REACT_FRAGMENT_TYPE) {// ... 跳过很多代码return created;} else {// ... 跳过很多代码// 注意这里created.ref = coerceRef(returnFiber, currentFirstChild, element);created.return = returnFiber;return created;}
}
  • 进入 coerceRef
    function coerceRef(returnFiber: Fiber,current: Fiber | null,element: ReactElement,
    ) {let mixedRef = element.ref; // 拿到 ref// function ref 和 object ref 是不需要经过特殊处理的// 自己处理节点对象挂载到 class component 的 this 上面这一个过程// 对于 string ref,它只是一个string,它没有任何功能,它的挂载是要react这边来帮着去做的// 所以这边主要去 去处理一下 string ref 的一个实现过程if (mixedRef !== null &&typeof mixedRef !== 'function' &&typeof mixedRef !== 'object') {if (__DEV__) {// 跳过}// 在 ReactElement.js 中可看到  _owner 是 ReactCurrentOwner.current// 在更新 class component 的时候,调用 finishClassComponent 就会设置// ReactCurrentOwner.current = workInProgress// 在后面调用 instance.render() 去重新渲染子节点的过程中// 就会调用 React.createElement, 因为 ref 只有// 因为ref它肯定是在 class component,它这个过程当中才会被创建的// 因为只有 class component 有 this 去挂载 ref 的那个对象// 所以我们在调用 instance.render() 的时候,那么在 react element 里面拿到的这个 ReactCurrentOwner.current// 就是我们那个 class component,它对应的fiber对象if (element._owner) {const owner: ?Fiber = (element._owner: any);let inst;// 有了这个 fiber 对象之后,那么我们可以拿到它的 _owner,拿到它的 _owner 之后// 如果 owner 的存在,ownerFiber 就等于 ownerif (owner) {const ownerFiber = ((owner: any): Fiber);invariant(ownerFiber.tag === ClassComponent,'Function components cannot have refs.',);// 然后它的 inst 就是 ownerFiber.stateNode// 也就是我们 class component,那个 instance 也就是 thisinst = ownerFiber.stateNode;}invariant(inst,'Missing owner for string ref %s. This error is likely caused by a ' +'bug in React. Please file an issue.',mixedRef,);const stringRef = '' + mixedRef;// Check if previous string ref matches new string ref// 有了 inst 之后,可以为它去构建一个方法// 这边是一个对比,就是说我们每次设置完这个 ref 之后,都会给它设置一个属性 _stringRef// 用来在我们更新这个组件的过程当中,去判断一下它这个 _stringRef 对应的那个值是否有变化if (current !== null &&current.ref !== null &&typeof current.ref === 'function' &&current.ref._stringRef === stringRef) {// 如果没有变化,我们不需要去为它重新生成一个方法了,我们只需要 return 就可以了return current.ref;}// 对于新的情况,我们就需要去生成一个方法// 这个 value 就是后期dom节点或者是class instance它被挂载的时候// 它会调用这个 ref 这个方法,然后传入它自己的那个实例// 也就是给一个 dom 节点设置了 ref 之后,在后期就是 commitRoot 的过程当中,这个节点最终被挂载到 dom 上面了// 这个时候会把这个 dom 节点去调用 ref 这个方法,然后作为参数传入进来// 这个时候去设置到就是当前去创建这个 ref 的时候,这个 class component的对象上面的 ref 这个属性上面// 也就达到了 ref 可以设置在 this.refs 上面这个功能const ref = function(value) {let refs = inst.refs;if (refs === emptyRefsObject) {// This is a lazy pooled frozen object, so we need to initialize.refs = inst.refs = {};}if (value === null) {delete refs[stringRef];} else {refs[stringRef] = value;}};ref._stringRef = stringRef;return ref;} else {invariant(typeof mixedRef === 'string','Expected ref to be a function, a string, an object returned by React.createRef(), or null.',);invariant(element._owner,'Element ref was specified as a string (%s) but no owner was set. This could happen for one of' +' the following reasons:\n' +'1. You may be adding a ref to a function component\n' +"2. You may be adding a ref to a component that was not created inside a component's render method\n" +'3. You have multiple copies of React loaded\n' +'See https://fb.me/react-refs-must-have-owner for more information.',mixedRef,);}}return mixedRef;
    }
    
    • 这就是在调和子节点的过程当中,要处理 ref 的一个内容
    • 因为 stringRef 它是一个特殊的存在,它没有什么功能性
    • 而对于 function ref 传进来的就是一个方法,可以直接调用它
    • 而对于 object ref,只需要设置它的 .current 就可以了
    • 这也是为什么以后 string ref 要被移除的一个原因
    • 因为它比较麻烦,需要我们自己去处理
    • 这是我们去处理 ref 这个属性的过程

关于 commit开始之前先detach
定位到 packages/react-reconciler/src/ReactFiberScheduler.js#L392

查看 commitAllHostEffects

function commitAllHostEffects() {while (nextEffect !== null) {if (__DEV__) {ReactCurrentFiber.setCurrentFiber(nextEffect);}recordEffect();const effectTag = nextEffect.effectTag;if (effectTag & ContentReset) {commitResetTextContent(nextEffect);}// 对于有 ref 这个 SideEffect 的节点// 如果current不等于null,要先调用 commitDetachRef// 先把这个 ref 从之前挂载的地方去给它卸载下来,看下这个  commitDetachRefif (effectTag & Ref) {const current = nextEffect.alternate;if (current !== null) {commitDetachRef(current);}}// The following switch statement is only concerned about placement,// updates, and deletions. To avoid needing to add a case for every// possible bitmap value, we remove the secondary effects from the// effect tag and switch on that value.let primaryEffectTag = effectTag & (Placement | Update | Deletion);switch (primaryEffectTag) {case Placement: {commitPlacement(nextEffect);// Clear the "placement" from effect tag so that we know that this is inserted, before// any life-cycles like componentDidMount gets called.// TODO: findDOMNode doesn't rely on this any more but isMounted// does and isMounted is deprecated anyway so we should be able// to kill this.nextEffect.effectTag &= ~Placement;break;}case PlacementAndUpdate: {// PlacementcommitPlacement(nextEffect);// Clear the "placement" from effect tag so that we know that this is inserted, before// any life-cycles like componentDidMount gets called.nextEffect.effectTag &= ~Placement;// Updateconst current = nextEffect.alternate;commitWork(current, nextEffect);break;}case Update: {const current = nextEffect.alternate;commitWork(current, nextEffect);break;}case Deletion: {commitDeletion(nextEffect);break;}}nextEffect = nextEffect.nextEffect;}if (__DEV__) {ReactCurrentFiber.resetCurrentFiber();}
}

定位到 packages/react-reconciler/src/ReactFiberCommitWork.js#L623

查看 commitDetachRef

function commitDetachRef(current: Fiber) {const currentRef = current.ref;if (currentRef !== null) {if (typeof currentRef === 'function') {currentRef(null);} else {currentRef.current = null;}}
}

commitAllLifeCycles

function commitAllLifeCycles(finishedRoot: FiberRoot,committedExpirationTime: ExpirationTime,
) {// ... 跳过很多代码while (nextEffect !== null) {// ... 跳过很多代码// 注意这里if (effectTag & Ref) {recordEffect();commitAttachRef(nextEffect);}// ... 跳过很多代码}
}
  • 再次调用 commitAttachRef 把真正的更新过后的节点给它挂载上去
    function commitAttachRef(finishedWork: Fiber) {const ref = finishedWork.ref;if (ref !== null) {const instance = finishedWork.stateNode;let instanceToUse;switch (finishedWork.tag) {case HostComponent:instanceToUse = getPublicInstance(instance); // 获取到了 dom节点对应到的实例break;default:instanceToUse = instance;}// function 的处理if (typeof ref === 'function') {ref(instanceToUse);} else {// 跳过if (__DEV__) {if (!ref.hasOwnProperty('current')) {warningWithoutStack(false,'Unexpected ref object provided for %s. ' +'Use either a ref-setter function or React.createRef().%s',getComponentName(finishedWork.type),getStackByFiberInDevAndProd(finishedWork),);}}// 其他情况,直接设置ref.current = instanceToUse;}}
    }
    
    • 如果是 HostComponent 执行 getPublicInstance
      export function getPublicInstance(instance: Instance): * {return instance;
      }
      
  • 这个时候就完成了对于我们的 class component 上面的this,去挂载ref它的一个过程
  • 这边最主要的是去注意对于 stringRef 在调和子节点的过程当中
  • 会对它进行一个预先的处理,把它转化成一个方法
  • 以上就是ref在整个react应用更新的过程当中,如何被实现的原理

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

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

相关文章

YIA主题如何关闭新版本升级提示?WordPress主题怎么取消升级提醒?

前两天YIA主题发布了升级到2.8版本,新增了一些功能,优化调整修复了一些功能,但是这些功能调整幅度不大,加上boke112百科使用的YIA主题已经进行了很多方面的个性化修改,所以就懒得升级了,但是每次进入WordPr…

Spring的事件监听机制

这里写自定义目录标题 1. 概述(重点)2. ApplicationEventMulticaster2.1 SimpleApplicationEventMulticaster2.2 AbstractApplicationEventMulticaster 3. ApplicationListener3.1 注册监听器3.2 自定义 4. SpringApplicationRunListeners 1. 概述&#…

SpringBoot使用Guava实现日志脱敏(含源码)

点击下载《SpringBoot使用Guava实现日志脱敏(含源码)》 1. 摘要 本文将介绍如何使用Google Guava库进行日志脱敏,保护敏感数据的安全。我们将详细解释脱敏的必要性,然后介绍如何使用Guava中的Strings、Maps和CharMatcher类来进行…

JS面试题:说一下js的模块化?

作用: 一个模块就是实现某个特定功能的文件,在文件中定义的变量、函数、类都是私有的,对其他文件不可见。 为了解决引入多个js文件时,出现 命名冲突、污染作用域 等问题 AMD: 浏览器端模块解决方案 AMD即是“异步模块定…

12.1 Web开发_DOMBOM:JS关联CSS(❤❤)

12.1 Web开发_DOM&BOM 1. DOM&BOM2. DOM:文档对象模型2.1 获取页面元素1. getElementById2. getElementsByClassName3. querySelector3. 事件3.1 事件三要素3.2 绑定事件的三种方式1. 标签on2. 对象.on事件3. addEventListener3.3 常用事件

Python接口自动化测试(接口状态)

本节开始,开始介绍python的接口自动化测试,首先需要搭建python开发环境,到https://www.python.org/下载python 版本直接安装就以了,建议 下载python2.7.11版本,当然,也是可以下载python最新版本的。 接口测…

纯干货,3步轻松生成智慧乡村3D场景!

临近春节返乡,网上有个话题又重新上了热门,“以你的专业,回到家乡能做什么贡献?”虽然很多人调侃,对家乡最大的贡献就是“离开家乡”,但其实现在农村老家的发展也离不开打工人在远方的支持。 比如AMRT3D引…

Docker基础(持续更新中)

# 第1步,去DockerHub查看nginx镜像仓库及相关信息# 第2步,拉取Nginx镜像 docker pull nginx# 第3步,查看镜像 docker images # 结果如下: REPOSITORY TAG IMAGE ID CREATED SIZE nginx latest 60…

【数学】【记忆化搜索 】【动态规划】964. 表示数字的最少运算符

作者推荐 【动态规划】【字符串】【表达式】2019. 解出数学表达式的学生分数 本文涉及知识点 动态规划汇总 数学 记忆化搜索 LeetCoce964表示数字的最少运算符 给定一个正整数 x,我们将会写出一个形如 x (op1) x (op2) x (op3) x … 的表达式,其中每…

接口性能优化常见12式

目录 1.批处理 2.异步处理 3.空间换时间 4.预处理 5.池化思想 6.串行改并行 7.索引 8.避免大事务 9.优化程序结构 10.深分页问题 11.SQL优化 12.锁粒度避免过粗 1.批处理 批量思想:批量操作数据库,这个很好理解,我们在循环插入场…

微服务—Docker

目录 初识Docker Docker与虚拟机的区别 镜像与容器 Docker架构 常见Docker命令 镜像命令 容器命令 数据卷挂载 直接挂载 初识Docker 在项目部署的过程中,如果出现大型项目组件较多,运行环境也较为复杂的情况,部署时会碰到一些问题&…

Android AudioManager

Android AudioManager API AudioManager(audio翻译过来就是声音、音频): AudioManager,音频管理类,它主要提供了丰富的API让开发者对应用的音量和铃声模式进行控制以及访问。主要内容涉及到音频流、声音、蓝牙、扩音…

算法练习-逆波兰表达式求值(思路+流程图+代码)

难度参考 难度:中等 分类:栈与队列 难度与分类由我所参与的培训课程提供,但需要注意的是,难度与分类仅供参考。且所在课程未提供测试平台,故实现代码主要为自行测试的那种,以下内容均为个人笔记&#xff0c…

selenium元素定位总结 - xpath定位高级用法

文章目录 1.8种元素定位方法2.xpath定位的高级用法1. 绝对路径2.相对路径3. 索引定位4.使用XPATH的属性值定位元素5.使用XPATH的属性名称定位元素6.使用任意值来匹配属性及元素7.使用模糊的属性值匹配starts-with()ends-with()contains()text()last() 8.过虑某个元素name() 9.常…

【2023遥感应用组一等奖】“变”捷施肥-基于遥感的精准施肥检测决策实施一体化系统

作品介绍 1 应用背景 冬小麦是我国主要的粮食作物之一,粮食安全有利于社会稳定发展。氮是作物生长的重要元素之一,影响作物籽粒形成与品质优劣,是作物产量最重要的限制因素。氮肥对粮食增产的贡献率达到30%~50%,是保证作物高产、稳产的关键。实现作物氮素营养的精准监测…

Plant, Cell Environment:DNA pull down技术助力揭示AP2/ERF类转录因子提高芍药耐高温能力的分子机制

芍药是一种传统的中药材,并且具有极高的欣赏价值,其生长发育经常受到高温胁迫的影响。褪黑素是一种内源性微分子吲哚胺化合物,在各种生物体中具有多种生理功能,大量研究表明调节与褪黑素生物合成相关的基因来提高植物对高温的耐受…

CMake官方教程中文翻译 Step 11: Adding Export Configuration

鉴于自己破烂的英语,所以把cmake的官方文档用 谷歌翻译 翻译下来方便查看。 英语好的同学建议直接去看cmake官方文档(英文)学习:地址 点这里 或复制:https://cmake.org/cmake/help/latest/guide/tutorial/index.html …

《区块链简易速速上手小册》第8章:区块链的技术挑战(2024 最新版)

文章目录 8.1 可扩展性问题8.1.1 基础知识8.1.2 主要案例:比特币的可扩展性挑战8.1.3 拓展案例 1:以太坊的可扩展性改进8.1.4 拓展案例 2:侧链和分层解决方案 8.2 安全性与隐私8.2.1 基础知识8.2.2 主要案例:比特币交易的安全性8.…

linux查询文件夹及文件数目

1.查询文件夹下的文件夹数目 expr $(find ./uploud_from_machine/formal_dom/18 -maxdepth 1 -type d | wc -l) - 1 2.查询文件夹下的文件数目 要统计目录中的所有项(文件和子目录),但不包括目录本身,可以使用以下命令&#xf…

DVI接口如何连接HDMI接口显示器?DVI转HDMI转换器DHA

DVI转HDMI转换器DHA简介 DVI转HDMI转换器DHA能够将DVI信号和R/L音频信号输入转换成HDMI信号输出,独特的功能使其顺畅地整合到家庭影院中,并且播放出高品质的图像。主要用于数据监控中心、大型会议展示中心、学校及各个公司 DVI转HDMI转换器DHA特点 01.支持分辨率4K…