React16源码: React中的PortalComponent创建, 调和, 更新的源码实现

PortalComponent


1 )概述

  • React Portal之所以叫Portal,因为做的就是和“传送门”一样的事情
  • render到一个组件里面去,实际改变的是网页上另一处的DOM结构
  • 主要关注 portal的创建, 调和, 更新过程

2 )源码

定位到 packages/react-dom/src/client/ReactDOM.js#L576

function createPortal(children: ReactNodeList,container: DOMContainer,key: ?string = null,
) {invariant(isValidContainer(container),'Target container is not a DOM element.',);// TODO: pass ReactDOM portal implementation as third argumentreturn ReactPortal.createPortal(children, container, null, key);
}
  • 这里调用的是 ReactPortal.createPortal, 进入

    // packages/shared/ReactPortal.js#L14
    export function createPortal(children: ReactNodeList,containerInfo: any,// TODO: figure out the API for cross-renderer implementation.implementation: any,key: ?string = null,
    ): ReactPortal {return {// This tag allow us to uniquely identify this as a React Portal$$typeof: REACT_PORTAL_TYPE,key: key == null ? null : '' + key,children,containerInfo, // dom 挂载节点implementation,};
    }
    
    • 这里返回一个对象,类似于 ReactElement
    • 区别在于 $$typeofcontainerInfo 需要的挂载点
  • 对于 REACT_PORTAL_TYPE 类型的组件在 reconcile 时, 看下具体操作, 找到 reconcileSinglePortal

    // packages/react-reconciler/src/ReactChildFiber.js#L1171
    function reconcileSinglePortal(returnFiber: Fiber,currentFirstChild: Fiber | null,portal: ReactPortal,expirationTime: ExpirationTime,
    ): Fiber {const key = portal.key; // 当前的 keylet child = currentFirstChild;// 如果 存在 child, 对比 child.key === keywhile (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) {// 关注这里,有 containerInfo 的对比,portal 需要关心渲染到的节点是否有变化// 如果节点有变化,那么这个 portal 的渲染过程也会有变化// 都符合,说明老节点都可以复用if (child.tag === HostPortal &&child.stateNode.containerInfo === portal.containerInfo &&child.stateNode.implementation === portal.implementation) {deleteRemainingChildren(returnFiber, child.sibling); // 删除其他节点// 通过 useFiber 复用这个节点const existing = useFiber(child,portal.children || [],expirationTime,);existing.return = returnFiber;return existing;} else {// key相同,但是不符合上述if, 没法复用,删除干净deleteRemainingChildren(returnFiber, child);break;}} else {// key 不同,删除当前节点deleteChild(returnFiber, child);}child = child.sibling;}// 创建一个 portal 的 fiber 对象const created = createFiberFromPortal(portal,returnFiber.mode,expirationTime,);created.return = returnFiber;return created;
    }
    
  • 对于更新一个portal节点,进入 updatePortalComponent

    // packages/react-reconciler/src/ReactFiberBeginWork.js#L1322
    function updatePortalComponent(current: Fiber | null,workInProgress: Fiber,renderExpirationTime: ExpirationTime,
    ) {// 挂载点处理pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);const nextChildren = workInProgress.pendingProps; // 这里 pendingProps 是 childrenif (current === null) {// Portals are special because we don't append the children during mount// but at commit. Therefore we need to track insertions which the normal// flow doesn't do during mount. This doesn't happen at the root because// the root always starts with a "current" with a null child.// TODO: Consider unifying this with how the root works.workInProgress.child = reconcileChildFibers(workInProgress,null,nextChildren,renderExpirationTime,);} else {reconcileChildren(current,workInProgress,nextChildren,renderExpirationTime,);}return workInProgress.child;
    }
    
    • 之前梳理过的 API 不再赘述
    • 一些API的调用,在源码的注释中

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

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

相关文章

Docker(一)简介和基本概念:什么是 Docker?用它会带来什么样的好处?

作者主页: 正函数的个人主页 文章收录专栏: Docker 欢迎大家点赞 👍 收藏 ⭐ 加关注哦! 一、简介 本章将带领你进入 Docker 的世界。 什么是 Docker? 用它会带来什么样的好处? 好吧,让我们带…

python插件架构介绍

一、插件架构 在 Python 中,插件架构通常指的是一种软件架构模式,它允许开发者在不改变主应用程序代码的情况下,向应用程序添加新的功能或修改现有功能。这种架构使得应用程序可以通过加载外部模块或组件来扩展其功能,这些外部模…

【ROS2】实现自定义服务接口

1 定义服务接口 在之前创建的ROS接口功能包的基础上。 int32 num1 int32 num2 --- int32 num3 2 在CmakerLists.txt中增加如下语句,实现对服务接口的生成 # 为接口文件生成源代码 rosidl_generate_interfaces(${PROJECT_NAME}"msg/Student.msg""…

IP劫持的危害分析及应对策略

在当今数字化时代,网络安全问题备受关注,其中IP劫持是一种常见而危险的威胁。本文将深入探讨IP劫持的危害,并提供一些有效的应对策略。 第一部分:IP劫持的定义 IP劫持是指黑客通过各种手段获取并篡改目标IP地址的控制权&#xf…

vue3+vite:封装Svg组件

前言 在项目开发过程中,以svg图片引入时,会遇到当hover态时图片颜色修改的场景,我们可能需要去引入另一张不同颜色的svg图片,或者用css方式修改,为了方便这种情况,需要封装svg组件来自定义宽高和颜色&…

react 页签(自行封装)

思路:封装一个页签组件,包裹页面组件,页面渲染之后把数据缓存到全局状态实现页面缓存。 浏览本博客之前先看一下我的博客实现的功能是否满足需求,实现功能: - 页面缓存 - 关闭当前页 - 鼠标右键>关闭当前 - 鼠标右…

Endnote文章编号从10开始

前部分章节已经写好,后续添加,endnote参考文献需要从特定序号如10开始 知乎回答 在word中点击Endnote,instant Formatting is on右下角有一个小箭头, 点开箭头后点击layout, 下边有一个Start with bibliography 里面输入要开始的…

Python中类的继承实现

""派生类继承了基类的一切",这里创建基类曲线,派生类有椭圆。派生类调用基类的方法,只需方法名前加上基类基类名作为前缀,再将派生类的self和其他参数传入。 当派生类与基类有同名的方法时,调用的是派…

按键+数码管

key.c #include "key.h" //把led.h文件包含进来 #include "system.h" //把timer0.h文件包含进来 #include "smg.h"extern uint num; char key_value; //有按键按下 char key_shourtflag;//没有按键按下uint KeyScan () //按键扫描函数 {…

Linux中关于head命令详解

head的作用 head用于查看文件的开头部分的内容。 head的参数 -q隐藏文件名-v 显示文件名-c<数目>显示的字节数-n<数目>显示的行数 head的案例 # 查看yum.log前五行内容 head -5 yum.log

vue2打包

首先&#xff0c;请确保您已经安装了Vue CLI。 打开终端或命令提示符&#xff0c;进入您的Vue项目的根目录。 运行以下命令来安装所需的依赖项&#xff1a; npm install安装完成后&#xff0c;运行以下命令来打包您的Vue项目&#xff1a; npm run build这将在您的项目根目录…

Cortex-M3/M4内核NVIC及HAL库函数详解(4):使用HAL库配置外部中断

0 工具准备 Keil uVision5 Cortex M3权威指南&#xff08;中文&#xff09; Cortex M3与M4权威指南 stm32f407的HAL库工程 STM32F4xx中文参考手册 1 使用HAL库配置外部中断 前面我们已经熟悉了有关内核部分的寄存器配置&#xff0c;接下来我们结合stm32f407的GPIO外设&#xf…

站长为什么都说WordPress太复杂不会用要放弃?

网络上经常看到有站长说要放弃WordPress&#xff0c;理由各有不同&#xff0c;比如有些说WordPress太复杂不会用&#xff1b;有些说WordPress是国外建站系统&#xff0c;在国内用来搭建访问速度太慢&#xff1b;也有些说WordPress是针对谷歌优化的&#xff0c;不适合国内的搜索…

UE 可靠UDP实现原理

发送 我们的消息发送都是通过 UChannel 来处理的&#xff0c;通过调用 UChannel::SendBunch 统一处理。 发送的 Bunch 是以 FOutBunch 的形式存在的。当 bReliable 为 True 的时候&#xff0c;表示 Bunch 是可靠的。 发送逻辑直接从UChannel::SendBunch处开始分析 1、大小限…

【算法与数据结构】1049、LeetCode 最后一块石头的重量 II

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题需要得到石头之间两两粉碎之后的最小值&#xff0c;那么一个简单的思路就是将这堆石头划分成大小相…

【MySQL】where和having的区别

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;数据库 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 用途: 使用位置: 操作对象: 聚合函数: 示例&#xff1a; 结语 我的其他博客 前言 数据库中的 WHERE 和 HAVING 子句在 SQL 查…

线程池最佳实践!这几个坑使用不当绝对生产事故!!

拿来即用!这篇文章我会介绍我使用线程池的时候应该注意的坑以及一些优秀的实践。 1、正确声明线程池 线程池必须手动通过 ThreadPoolExecutor 的构造函数来声明&#xff0c;避免使用Executors 类创建线程池&#xff0c;会有 OOM 风险。 Executors 返回线程池对象的弊端如下(…

【机器学习300问】14、什么是特征工程?

当我学习到这个知识点的时候十分困惑&#xff0c;因为从名字中我完全无法理解这个什么东西。于是呢我就去问了一下维基百科&#xff0c;下面是他的回答&#xff1a; 特征工程&#xff08;英语&#xff1a;feature engineering&#xff09;又称特征提取&#xff08;英语&#xf…

H3C设备配置端口镜像案例

知识改变命运&#xff0c;技术就是要分享&#xff0c;有问题随时联系&#xff0c;免费答疑&#xff0c;欢迎联系&#xff01; 厦门微思网络​​​​​​ https://www.xmws.cn 华为认证\华为HCIA-Datacom\华为HCIP-Datacom\华为HCIE-Datacom Linux\RHCE\RHCE 9.0\RHCA\ Oracle O…

C语言练习day8

变种水仙花 变种水仙花_牛客题霸_牛客网 题目&#xff1a; 思路&#xff1a;我们拿到题目的第一步可以先看一看题目给的例子&#xff0c;1461这个数被从中间拆成了两部分&#xff1a;1和461&#xff0c;14和61&#xff0c;146和1&#xff0c;不知道看到这大家有没有觉得很熟…