React16源码: React中的completeWork对HostText处理含更新的源码实现

HostText


1 )概述

  • completeWork 中 对 HostText的处理
  • 在第一次挂载和后续更新的不同条件下进行操作
    • 第一次挂载主要是创建实例
    • 后续更新其实也是重新创建实例

2 )源码

定位到 packages/react-reconciler/src/ReactFiberCompleteWork.js#L663

case HostText 这里

case HostText: {let newText = newProps;// 符合这个条件,说明它不是第一次渲染,就是更新的状态// 调用 updateHostText 进行更新if (current && workInProgress.stateNode != null) {const oldText = current.memoizedProps;// If we have an alternate, that means this is an update and we need// to schedule a side-effect to do the updates.updateHostText(current, workInProgress, oldText, newText);} else {// 对于第一次渲染if (typeof newText !== 'string') {invariant(workInProgress.stateNode !== null,'We must have new props for new mounts. This error is likely ' +'caused by a bug in React. Please file an issue.',);// This can happen when we abort work.}// 跳过 context 处理const rootContainerInstance = getRootHostContainer();const currentHostContext = getHostContext();// 跳过 hydrate 处理let wasHydrated = popHydrationState(workInProgress);if (wasHydrated) {if (prepareToHydrateHostTextInstance(workInProgress)) {markUpdate(workInProgress);}} else {// 创建 文本 实例workInProgress.stateNode = createTextInstance(newText,rootContainerInstance,currentHostContext,workInProgress,);}}break;
}
  • 进入 updateHostText

    updateHostText = function(current: Fiber,workInProgress: Fiber,oldText: string,newText: string,
    ) {// 这个非常简单,通过前后 text 是否有区别// 如果不同,则创建新的 text实例if (oldText !== newText) {// If the text content differs, we'll create a new text instance for it.// 先跳过 context 的处理const rootContainerInstance = getRootHostContainer();const currentHostContext = getHostContext();workInProgress.stateNode = createTextInstance(newText,rootContainerInstance,currentHostContext,workInProgress,);// We'll have to mark it as having an effect, even though we won't use the effect for anything.// This lets the parents know that at least one of their children has changed.markUpdate(workInProgress);}
    };
    
    • 进入 createTextInstance
      // packages/react-dom/src/client/ReactDOMHostConfig.js#L272
      export function createTextInstance(text: string,rootContainerInstance: Container,hostContext: HostContext,internalInstanceHandle: Object,
      ): TextInstance {if (__DEV__) {const hostContextDev = ((hostContext: any): HostContextDev);validateDOMNesting(null, text, hostContextDev.ancestorInfo);}const textNode: TextInstance = createTextNode(text, rootContainerInstance);// 这个方法之前阅过precacheFiberNode(internalInstanceHandle, textNode);return textNode;
      }
      
      • 进入 createTextNode
        export function createTextNode(text: string,rootContainerElement: Element | Document,
        ): Text {// 最终 getOwnerDocumentFromRootContainer 这里返回一个dom对象,调用dom的 createTextNode 这个方法return getOwnerDocumentFromRootContainer(rootContainerElement).createTextNode(text,);
        }
        
        • 进入 getOwnerDocumentFromRootContainer
        function getOwnerDocumentFromRootContainer(rootContainerElement: Element | Document,
        ): Document {// rootContainerElement.ownerDocument 这里是 window.document 对象// 这么做是为了兼容多平台api的使用return rootContainerElement.nodeType === DOCUMENT_NODE? (rootContainerElement: any): rootContainerElement.ownerDocument;
        }
        
  • HostText 相比于 HostComponents 来说,它没有多种选择

  • 没有各种各样的属性,整体来说非常的简单

  • 一些特别说明的,写在了上述代码注释中

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

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

相关文章

有挑战才有收获!PaddleOCR算法模型挑战赛火热开启!

在数字化时代,文本和表格识别在生活和工作中扮演着越来越重要的角色。从扫描件、图片中的文字提取,到自动化录入数据、分析报表,这些场景都需要高效准确的文本识别和表格识别技术。作为PaddleOCR开源项目背后的维护者,飞桨团队一直…

【第十五课】数据结构:堆 (“堆”的介绍+主要操作 / acwing-838堆排序 / 时间复杂度的分析 / c++代码 )

目录 关于堆的一些知识的回顾 数据结构:堆的特点 "down" 和 "up":维护堆的性质 down up 数据结构:堆的主要操作 acwing-838堆排序 代码如下 时间复杂度分析 确实是在写的过程中频繁回顾了很多关于树的知识&…

【开源】基于JAVA+Vue+SpringBoot的教学过程管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 教师端2.2 学生端2.3 微信小程序端2.3.1 教师功能如下2.3.2 学生功能如下 三、系统展示 四、核心代码4.1 查询签到4.2 签到4.3 查询任务4.4 查询课程4.5 生成课程成绩 六、免责说明 一、摘要 1.1 项目介绍 基于JAVAVu…

一文读懂量化交易中的算法交易使用!

高频交易策略利用计算机,在人类交易者能够处理他们观察到的信息之前,根据以电子方式接收到的信息做出精心的决定来启动订单。 为通过挂单被动成交来追求更好的交易均价,随着人工智能,机器学习等技术的引入,逐渐演变为…

flink-java使用介绍,flink,java,DataStream API,DataSet API,ETL,设置 jobname

1、环境准备 文档:https://nightlies.apache.org/flink/flink-docs-release-1.17/zh/ 仓库:https://github.com/apache/flink 下载:https://flink.apache.org/zh/downloads/ 下载指定版本:https://archive.apache.org/dist/flink…

Git的管理操作

目录 前言 认识工作区、暂存区、版本库 小结: 使用场景--1: git log: 查看.git文件: 使用场景--2: git status: git diff: 进行提交: 总结: 版本回退 退…

vue3模板中使用全局常量和全局方法

<img v-if"isNotEmpty(item.url)" :src"HOSTitem.url"/> 比如上述代码中需要使用全局方法 isNotEmpty判断当前图片是否为空和HOST常量前缀&#xff0c;发现不起作用&#xff0c;经过多方查证&#xff0c;需要再main.js中加入如下配置&#xff1a; …

Python函数调用的9大方法详解

概要 在Python中&#xff0c;函数是一种非常重要的编程概念&#xff0c;它们使得代码模块化、可重用&#xff0c;并且能够提高代码的可读性。本文将深入探讨Python函数调用的9种方法&#xff0c;包括普通函数、匿名函数、递归函数、高阶函数等&#xff0c;以及它们的应用示例。…

python内置函数有哪些?整理到了7大分类48个函数,都是工作中常用的函数

python内置函数 一、入门函数 1.input() 功能&#xff1a; 接受标准输入&#xff0c;返回字符串类型 语法格式&#xff1a; input([提示信息])实例&#xff1a; # input 函数介绍text input("请输入信息:") print("收到的数据是:%s" % (text))#输出…

k8s---pod的水平自动伸缩HPA

HPA&#xff1a;Horizontal Pod Autoscaling是pod的水平自动伸缩。是k8s自带的模块 pod占用CPU的比率到达一定的阈值会触发伸缩机制。 replication controller&#xff1a;副本控制器。控制pod的副本数 deployment controller&#xff1a;节点控制器。部署pod hpa控制副本的…

怎么他们都有开源项目经历|手把手教你参与开源

一、前言 大家好&#xff0c;这里是白泽。有一些同学提问&#xff0c;希望在自己的简历上增加一些有含金量的项目经历&#xff0c;最好能够去参与一些开源项目的开发&#xff0c;但由于对一个庞大的开源项目缺乏认知&#xff0c;难以着手。同时也担心自己能力不足&#xff0c;…

亚信安慧AntDB:AntDB-M元数据锁之锁的获取(三)

5 锁的获取 5.1 锁的强弱 当线程已经持有的锁比新申请的锁更强时&#xff0c;认为已经持有了锁&#xff0c;无需再对申请锁类型加锁。锁的强弱指持有的锁与其他锁的不兼容集合大小&#xff0c;集合相同锁相同&#xff0c;集合更大锁更强&#xff0c;否则无强弱关系。通过锁的…

C++——fstream文件读写操作

文件类型 文本文件 - 文件以文本的ASCII码形式存储在计算机中 二进制文件 - 文件以文本的二进制形式存储在计算机中&#xff0c;用户一般不能直接读懂它们 操作文件类 ofstream&#xff1a;写操作 ifstream&#xff1a; 读操作 fstream &#xff1a; 读写操作 文件打开方…

php比较运算,强相等(===)弱相等(==)表

弱相等&#xff08;&#xff09; 符号为&#xff1a; 规则为&#xff1a;只比较值&#xff0c;不比较类型&#xff0c;只要值对就为true 样例&#xff1a;比较整型123和字符串"123"&#xff0c;运行结果给出了true 弱相等表&#xff1a;* 代表在 PHP 8.0.0 之前为…

leetcode 刷题2

二分查找的绝妙运用&#xff1a; 看到有序数列&#xff0c;算法复杂度 0033. 搜索旋转排序数组 class Solution { public:int search(vector<int>& nums, int target) {int left 0;int right nums.size() - 1;while (left < right) {int mid left (right - …

SQL提示与索引终章

✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;重拾MySQL-进阶篇 &#x1f4dc; 感谢大家的关注&#xff01; ❤️ 可以关注黑马IT&#xff0c;进行学习 目录 &#x1f680;SQL提示 &#x1f680;覆盖索引 &#x1f680;前缀索引 &…

如何生成开发语言的排名图表

1、解释说明 生成开发语言排名图表&#xff0c;通常需要以下几个步骤&#xff1a; - 首先&#xff0c;我们需要收集一些关于不同编程语言的统计数据&#xff0c;例如使用人数、市场份额等。这些数据可以从各种来源获取&#xff0c;例如网站、报告、数据库等。 - 然后&#x…

.NET国产化改造探索(六)、银河麒麟操作系统中安装多个.NET版本

随着时代的发展以及近年来信创工作和…废话就不多说了&#xff0c;这个系列就是为.NET遇到国产化需求的一个闭坑系列。接下来&#xff0c;看操作。 上一篇文章介绍了如何在银河麒麟操作系统上&#xff0c;使用Nginx.NET程序实现自启动。本文介绍下如何在一个环境中&#xff0c;…

<蓝桥杯软件赛>零基础备赛20周--第16周--GCD和LCM

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周。 在QQ群上交流答疑&am…

深度学习技术栈 —— Pytorch之TensorDataset、DataLoader

深度学习技术栈 —— Pytorch之TensorDataset、DataLoader 前言一、TensorDataset、DataLoader的用法&#xff1f;二、从.csv文件-->tensor张量总结 前言 简单来说&#xff0c;TensorDataset与DataLoader这两个类的作用&#xff0c; 就是将数据读入并做整合&#xff0c;以便…