React16源码: React中的HostComponent HostText的源码实现

HostComponent & HostText

1 )概述

  • HostComponent 就是我们dom原生的这些节点, 如: div, span, p 标签这种
    • 使用的是小写字母开头的这些节点一般都认为它是一个 HostComponent
  • HostText,它是单纯的文本节点
  • 主要关注它们的一个更新过程

2 )源码

定位到 packages/react-reconciler/src/ReactFiberBeginWork.js
进入 updateHostComponent 这个API

function updateHostComponent(current, workInProgress, renderExpirationTime) {// 这个先跳过pushHostContext(workInProgress);if (current === null) {// 对于整个应用来讲,如果需要复用服务端渲染返回的dom内容,只有 HostComponent 和 HostText// 是需要被复用的,对于 class component 和 function component 本身是不对应于dom的某个节点的// 不会调用 hydrate 相关的东西tryToClaimNextHydratableInstance(workInProgress);}// 获取type和props, 对于 HostComponent 没有 state的概念const type = workInProgress.type;const nextProps = workInProgress.pendingProps;const prevProps = current !== null ? current.memoizedProps : null;let nextChildren = nextProps.children;const isDirectTextChild = shouldSetTextContent(type, nextProps); // 获取该节点是否是 纯字符串if (isDirectTextChild) {// We special case a direct text child of a host node. This is a common// case. We won't handle it as a reified child. We will instead handle// this in the host environment that also have access to this prop. That// avoids allocating another HostText fiber and traversing it.nextChildren = null;} else if (prevProps !== null && shouldSetTextContent(type, prevProps)) {// If we're switching from a direct text child to a normal child, or to// empty, we need to schedule the text content to be reset.// 之前props存在,并且也是文本,则重新设置 tagworkInProgress.effectTag |= ContentReset;}// 在 class component 和 host component 都有这个// 在 class component 是有 instance// 在 dom 节点,也有 instance// 对应这两种节点才能拿到 ref, 否则没有引用markRef(current, workInProgress);// Check the host config to see if the children are offscreen/hidden.// 符合 下面这种情况,其中 当前的更新的优先级不为 Never, workInProgress.mode 要符合 ConcurrentMode 并且 设置了 hidden// 比如模拟自定义的滑动,浏览器的滚动条,通过这个属性来进行一个优化,把不需要显示的组件设置为 hidden// 这样每次滑动,就不需要更新这个组件,减少损耗性能if (renderExpirationTime !== Never &&workInProgress.mode & ConcurrentMode &&shouldDeprioritizeSubtree(type, nextProps)) {// Schedule this fiber to re-render at offscreen priority. Then bailout.workInProgress.expirationTime = Never; // 设置成 Never 这个节点将永不会更新到return null;}// 调用来创建,调和子节点reconcileChildren(current,workInProgress,nextChildren,renderExpirationTime,);return workInProgress.child;
}
  • 进入 shouldSetTextContent

    • 来自于 packages/react-reconciler/src/ReactFiberHostConfig.js 这里打包对应的是
      • 这里根据不同平台指向不同的js
    • packages/react-reconciler/src/forks/ReactFiberHostConfig.dom.js 看到
      export * from 'react-dom/src/client/ReactDOMHostConfig';
      
    • 定位到 react-dom/src/client/ReactDOMHostConfig.js 中
      export function shouldSetTextContent(type: string, props: Props): boolean {return (type === 'textarea' ||type === 'option' ||type === 'noscript' ||typeof props.children === 'string' ||typeof props.children === 'number' ||(typeof props.dangerouslySetInnerHTML === 'object' &&props.dangerouslySetInnerHTML !== null &&props.dangerouslySetInnerHTML.__html != null));
      }
      
      • 基于此来确定是否继续调和子节点
      • 因为, textarea, option, noscript 这种内部只能显示字符串,里面放新节点没有任何意义
      • string和number是在一个dom节点内的内容
      • 如果有 dangerouslySetInnerHTML 相关也是一个特殊情况
  • 进入 shouldDeprioritizeSubtree

    // packages/react-dom/src/client/ReactDOMHostConfig.js
    export function shouldDeprioritizeSubtree(type: string, props: Props): boolean {return !!props.hidden;
    }
    

定位到 packages/react-reconciler/src/ReactFiberBeginWork.js#L733
进入 updateHostText 这个API

function updateHostText(current, workInProgress) {// 跳过 hydrate 过程if (current === null) {tryToClaimNextHydratableInstance(workInProgress);}// Nothing to do here. This is terminal. We'll do the completion step// immediately after.return null;
}
  • 对于 HostText 来说,不可能有子节点的,不需要调用 reconcileChildren
  • 真正被插入dom里面要等到后期完成树渲染进行commit时才会放进去
  • 在 update 的过程中,不涉及dom操作, 在completeUnitOfWork 时才会去更新dom

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

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

相关文章

Dockfile

dockerfile 1 常用指令1.1 FROM1.2 MAINTAINER镜像维护者的姓名和邮箱地址1.3 RUN1.4 EXPOSE1.5 WORKDIR1.6 USER1.7 ENV1.8 VOLUME1.9 ADD COPY1.10 CMD 和 ENTRYPOINT 2 Dockerfile 书写原则3 build镜像 1 常用指令 以Tomcat 的dockerfile 为例 # # NOTE: THIS DOCKERFILE …

Java工具类:使用RestTemplate请求WebService接口

目录 一、场景二、工具类 一、场景 对接第三方提供的WebService接口,早期的调用方式过于复杂繁琐,所以使用RestTemplate进行调用 二、工具类 package com.xxx.util;import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframew…

ElasticSearch 学习、实践笔记

一、基础概念 1. 索引(Index):索引是 Elasticsearch 中最基本的数据存储单位,类似于关系型数据库中的数据库。一个索引可以包含多个文档,每个文档都有一个唯一的 ID,用于标识该文档。索引可以被分为多个分片…

转转交易猫自带客服多模板全开源完整定制版源码

商品发布; 请在后台商品添加成功后, 再点击该商品管理,可重新编辑当前商品的所有信息及配图以及支付等等相关信息 可点击分享或者跳转,将链接地址进行发布分享 请在手机端打开访问 访问商品主要模板文件路径目录 咸鱼&#…

请谈谈session、cookie、 localStorage和SessionStorage的区别和特点?

Session、Cookie、localStorage和SessionStorage都是用于在客户端和服务器之间存储数据的技术,但它们之间存在一些重要的区别和特点。 Session: 含义:在Web开发中,Session通常指的是服务器为每个用户维护的会话信息。当用户首次访…

系统架构13 - 软件工程(1)

软件工程 软件开发生命周期软件定义时期软件开发时期软件运行和维护文档 软件工程过程软件系统工具软件设计四个活动:能力成熟度模型CMMCMMCMMI两种表示方法 软件开发生命周期 软件定义时期 包括可行性研究和详细需求分析过程,任务是确定软件开发工程必…

【实操】基于 GitHub Pages + Hexo 搭建个人博客

《开发工具系列》 【实操】基于 GitHub Pages Hexo 搭建个人博客 一、引言二、接入 Node.js2.1 下载并安装 Node.js2.2 环境变量配置 三、接入 Git3.1 下载并安装 Git3.2 环境变量配置 四、接入 Hexo4.1 安装 Hexo4.2 建站4.3 本地启动服务器 五、接入 GitHub Pages5.1 初识 G…

Java--类继承

文章目录 主要内容一.学生类1.源代码代码如下(示例): 2.结果 二.交通工具类1.源代码代码如下(示例): 2.结果 三.圆类1.源代码代码如下(示例): 2.结果 总结 主要内容 学生类交通工具类圆类 一.学生类 具有…

C 练习实例33 - 质数(素数)判断

题目:判断一个数字是否为质数。 程序分析:质数(prime number)又称素数,有无限个。一个大于1的自然数,除了1和它本身外,不能被其他自然数整除。 这题做过很多遍了,懂得都懂。 代码…

Raft算法详解(一):介绍

简单介绍 Raft是一种一致性算法,它包含了几个部分分别是领导者选举、日志复制、日志压缩和安全性。 角色 在Raft算法执行时存在着三种角色,分别是领导者(Leader)、追随者(Follower)以及竞选者&#xff0…

ChatGLM vs ChatGPT

所有的NLP大模型 都是transformer结构 1.Mask attention 的策略不同 2.训练任务目标不同 国内大模型nb公司:百度、清华智谱 一、主流大模型 粉色:Encoder-only。 绿色:Encoder-Decoder,尽头智谱ChatGLM。 蓝色:…

【MongoDB】下载安装、指令操作

目录 1.下载安装 2.指令 2.1.基础操作指令 2.2.增加 2.3.查询 2.4.修改 2.5.删除 前言: 关于MongoDB的核心概念请移步: 【文档数据库】ES和MongoDB的对比-CSDN博客 1.下载安装 本文以安装Windows版本的mongodb为例,Linux版本的其实…

三、arcgispro二次开发创建第一个工程

忙了几天,总算可以创建第一工程了。 步骤一: 步骤二: 工具介绍: 项目创建成功:项目目录在解决方案资源管理器中,整个工具都是动态可调整的,如下图: 想把窗口放哪里就把鼠标移到红…

Linux重定向:深入理解与实践

🎬慕斯主页:修仙—别有洞天 ♈️今日夜电波:晴る—ヨルシカ 0:20━━━━━━️💟──────── 4:30 🔄 ◀️ ⏸ ▶️ ☰ &…

DFA有穷自动机敏感词过滤算法

1.EndType package com.example.utils.wordfilter;/*** 结束类型定义*/ public enum EndType {/*** 有下一个,结束*/HAS_NEXT, IS_END } 2.WordType package com.example.utils.wordfilter;/*** 词汇类型*/ public enum WordType {/*** 黑名单/白名单*/BLACK, WHITE } 3.F…

RHEL - 更新升级软件或系统

《OpenShift / RHEL / DevSecOps 汇总目录》 文章目录 小版本软件更新yum update 和 yum upgrade 的区别升级软件和升级系统检查软件包是否可升级指定升级软件使用的发行版本方法1方法2方法3方法4 查看软件升级类型更新升级指定的 RHSA/RHBA/RHEA更新升级指定的 CVE更新升级指定…

L1-069 胎压监测(Java)

小轿车中有一个系统随时监测四个车轮的胎压,如果四轮胎压不是很平衡,则可能对行车造成严重的影响。 让我们把四个车轮 —— 左前轮、右前轮、右后轮、左后轮 —— 顺次编号为 1、2、3、4。本题就请你编写一个监测程序,随时监测四轮的胎压&…

Java中的包、类、接口说明

写在开头 包、类、接口、方法、变量、参数、代码块,这些都是构成Java程序的核心部分,即便最简单的一段代码里都至少要包含里面的三四个内容,这两天花点时间梳理了一下,理解又深刻了几分。 Java中的包 Java 定义了一种名字空间,称之为包:package。一个类总是属于某个包…

Servlet系列:两种创建方式(xml,注解)

一、使用web.xml的方式配置(Servlet2.5之前使用) 在早期版本的Java EE中,可以使用XML配置文件来定义Servlet。在web.xml文件中,可以定义Servlet的名称、类名、初始化参数等。然后,在Java代码中实现Servlet接口&#x…

数据结构---数组

一、基本概念 1. 存放一组相同数据类型的集合 2.在内存中,分配连续的空间,数组创建时要指定大小 3. 定义 数据类型 [] 数组名 // 1.定义一个数组,里面的元素包含10, 20, 24, 17, 35, 58, 45, 74 int arr[] {10, 20, 24, 17, 35, 58, 45, 74}; 4. 获取数组的长度 int lengt…