React源码解析18(5)------ 实现函数组件【修改beginWork和completeWork】
摘要
经过之前的几篇文章,我们实现了基本的jsx,在页面渲染的过程。但是如果是通过函数组件写出来的组件,还是不能渲染到页面上的。
所以这一篇,主要是对之前写得方法进行修改,从而能够显示函数组件,所以现在我们在index.js文件中,修改一下jsx的写法。修改成函数组件:
import jsx from '../src/react/jsx.js'
import ReactDOM from '../src/react-dom/index'const root = document.querySelector('#root');function App() {return jsx("div", {ref: "123",children: jsx("span", {children: "456"})});
}ReactDOM.createRoot(root).render(<App />)
这里因为需要使用我们自己的jsx方法。所以在App里面返回的依旧是通过之前的方式进行调用。
1.修改reconcileChildren方法
我们来回忆一下,在beginWork阶段,我们主要是通过ReactElement,创建FilberNode。而reconcileChildren,就是创建FilberNode的方法。
在之前我们只处理了HostText类型和HostComponent类型,所以在这个方法里面,我们要对函数类型进行兼容,而作为函数组件的ReactElment,它最显而易见的特点就是type的值是一个函数。
例如上面的App组件,对应的ReactElement的type就是App。所以我们可以通过type来判断组件的类型:
function reconcileChildren(element) {let tag;if(typeof element.type === 'function') {tag = FunctionComponent}//其他代码console.log(filberNode)return filberNode
}
我们打印一下看看,这个函数组件是否满足预期:
2.updateFunctionComponent方法
现在有了tag为FunctionComponent类型的FilberNode,在beginWork里面,我们就要对这个类型的FilberNode进行处理:
function beginWork(nowFilberNode) {switch (nowFilberNode.tag) {//其他代码case FunctionComponent: {return updateFunctionComponent(nowFilberNode)}//其他代码}
}
现在我们来实现updateFunctionComponent方法。
之前对于HostComponent类型的FilberNode,它的子节点其实就是它对应的ReactElement。
但是对于函数类型的FilberNode,我们想一下不就是它自己的返回值嘛?所以我们直接调用这个函数就能拿到它的子FilberNode了。
function updateFunctionComponent(filberNode) {const nextChildren = filberNode.type();const newFilberNode = reconcileChildren(nextChildren);filberNode.child = newFilberNode;newFilberNode.return = filberNode;beginWork(newFilberNode)
}
2.修改completeWork方法
对于completeWork方法, 它的主要作用(目前)是给对应的FilberNode增加stateNode,而函数组件并没有自己对应的StateNode,所以直接继续递归就可以了:
export const completeWork = (filberNode) => {const tag = filberNode.tagswitch (tag) {//其他代码。。。case FunctionComponent: {completeWork(filberNode.child)}}
}
3.修改commitWork方法
对于之前的commitWork,我们是直接将最外层的FilberNode的stateNode挂载了容器上,现在由于最外层的可能是FunctionComponent,它是没有自己的stateNode的。所以我们要找到具有stateNode的最外层FilberNode。
import { HostComponent } from "./filberNode";export function commitWork(filberRootNode) {const container = filberRootNode.container;let node = filberRootNode.finishedWork;while( node.tag !== HostComponent ){node = node.child}container.appendChild(node.stateNode)
}
OK,经过上面的修改,我们的App组件也可以正常渲染了。
相关文章:
React源码解析18(5)------ 实现函数组件【修改beginWork和completeWork】
摘要 经过之前的几篇文章,我们实现了基本的jsx,在页面渲染的过程。但是如果是通过函数组件写出来的组件,还是不能渲染到页面上的。 所以这一篇,主要是对之前写得方法进行修改,从而能够显示函数组件,所以现…...
vscode ssh 远程 gdb 调试
一、点运行与调试,生成launch.json 文件 二、点添加配置,选择GDB 三、修改启动程序路径...
云原生 AI 工程化实践之 FasterTransformer 加速 LLM 推理
作者:颜廷帅(瀚廷) 01 背景 OpenAI 在 3 月 15 日发布了备受瞩目的 GPT4,它在司法考试和程序编程领域的惊人表现让大家对大语言模型的热情达到了顶点。人们纷纷议论我们是否已经跨入通用人工智能的时代。与此同时,基…...
PHP酒店点菜管理系统mysql数据库web结构apache计算机软件工程网页wamp
一、源码特点 PHP 酒店点菜管理系统是一套完善的web设计系统,对理解php编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。 代码下载 https://download.csdn.net/download/qq_41221322/88232051 论文 https://…...
【面试复盘】知乎暑期实习算法工程师二面
来源:投稿 作者:LSC 编辑:学姐 1. 自我介绍 2. 介绍自己的项目 3. 编程题 判断一个链表是不是会文链表class ListNode: def __init__(self, val, nextNone):self.val valself.next nextdef reverse(head):pre Nonep headwhile p ! No…...
内网穿透和服务器+IP 实现公网访问内网的区别
内网穿透和服务器IP 实现公网访问内网的区别在于实现方式和使用场景。 内网穿透(Port Forwarding):内网穿透是一种通过网络技术将公网用户的请求通过中转服务器传输到内网设备的方法。通过在路由器或防火墙上进行配置,将公网请求…...
JAVA权限管理 助力企业精细化运营
在企业的日常经营中,企业人数达到一定数量之后,就需要对企业的层级和部门进行细分,建立企业的树形组织架构。围绕着树形组织架构,企业能够将权限落实到个人,避免企业内部出现管理混乱等情况。权限管理是每个企业管理中…...
金融语言模型:FinGPT
项目简介 FinGPT是一个开源的金融语言模型(LLMs),由FinNLP项目提供。这个项目让对金融领域的自然语言处理(NLP)感兴趣的人们有了一个可以自由尝试的平台,并提供了一个与专有模型相比更容易获取的金融数据。…...
LeetCode--HOT100题(30)
目录 题目描述:24. 两两交换链表中的节点(中等)题目接口解题思路代码 PS: 题目描述:24. 两两交换链表中的节点(中等) 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节…...
Springboot 实践(3)配置DataSource及创建数据库
前文讲述了利用MyEclipse2019开发工具,创建maven工程、加载springboot、swagger-ui功能。本文讲述创建数据库,为项目配置数据源,实现数据的增删改查服务,并通过swagger-ui界面举例调试服务控制器 创建数据库 项目使用MySQL 8.0.…...
【问题整理】Ubuntu 执行 apt-get install xxx 报错
Ubuntu 执行 apt-get install xxx 报错 一、问题描述: 执行apt-get install fcitx时,报如下错误 grub-pc E: Sub-process /usr/bin/dpkg returned an error code (1)二、解决方法: 尝试修复依赖问题: sudo apt-get -f install这个命令会尝试修复系统…...
Java课题笔记~ SpringBoot简介
1. 入门案例 问题导入 SpringMVC的HelloWord程序大家还记得吗? SpringBoot是由Pivotal团队提供的全新框架,其设计目的是用来简化Spring应用的初始搭建以及开发过程 原生开发SpringMVC程序过程 1.1 入门案例开发步骤 ①:创建新模块&#…...
一种基于springboot、redis的分布式任务引擎的实现(一)
总体思路是,主节点接收到任务请求,将根据任务情况拆分成多个任务块,将任务块标识的主键放入redis。发送redis消息,等待其他节点运行完毕,结束处理。接收到信息的节点注册本节点信息到redis、开启多线程、获取任务块、执…...
基于IDE Eval Resetter延长IntelliJ IDEA等软件试用期的方法(包含新版本软件的操作方法)
本文介绍基于IDE Eval Resetter插件,对集成开发环境IntelliJ IDEA等JetBrains公司下属的多个开发软件,加以试用期延长的方法。 我们这里就以IntelliJ IDEA为例,来介绍这一插件发挥作用的具体方式。不过,需要说明使用IDE Eval Rese…...
RocketMQ消费者可以手动消费但无法主动消费问题,或生成者发送超时
1.大多数是配置问题 修改rocketmq文件夹broker.conf 2.配置与集群IP或本地IPV4一样 重启 在RocketMQ独享实例中支持IPv4和IPv6双栈,主要是通过在网络层面上同时支持IPv4和IPv6协议栈来实现的。RocketMQ的Broker端、Namesrv端和客户端都需要支持IPv4和IPv6协议&…...
【数据库系统】--【2】DBMS架构
DBMS架构 01DBMS架构概述02 DBMS的物理架构03 DBMS的运行和数据架构DBMS的运行架构DBMS的数据架构PostgreSQL的体系结构RMDB的运行架构 04DBMS的逻辑和开发架构DBMS的层次结构DBMS的开发架构DBMS的代码架构 05小结 01DBMS架构概述 02 DBMS的物理架构 数据库系统的体系结构 数据…...
第三章 图论 No.13拓扑排序
文章目录 裸题:1191. 家谱树差分约束拓扑排序:1192. 奖金集合拓扑序:164. 可达性统计差分约束拓扑序:456. 车站分级 拓扑序和DAG有向无环图联系在一起,通常用于最短/长路的线性求解 裸题:1191. 家谱树 119…...
喜报 | 擎创再度入围IDC中国FinTech 50榜单
8月16日,2023年度“IDC中国FinTech 50”榜单正式揭晓,擎创科技继2022年入选该榜单后,再次以创新者姿态成功入选,并以技术赋能业务创新,成为中国金融科技领域创新与活力的重要贡献者。 “IDC中国FinTech 50”旨在评选出…...
【C++ 记忆站】引用
文章目录 一、引用概念二、引用特性1、引用在定义时必须初始化2、一个变量可以有多个引用3、引用一旦引用一个实体,再不能引用其他实体 三、常引用四、使用场景1、做参数1、输出型参数2、大对象传参 2、做返回值1、传值返回2、传引用返回 五、传值、传引用效率比较六…...
Hlang--用Python写个编程语言-变量的实现
文章目录 前言语法规则表示次幂实现变量实现优先级实现步骤解析关键字语法解析解释器总结前言 先前的话,我们终于是把我们整个架子搭起来了,这里重复一下我们的流程,那就是,首先,我们通过解析文本,然后呢遍历文本当中的我们定义的合法关键字,然后呢,把他们封装为一个T…...
多维时序 | MATLAB实现PSO-CNN-BiLSTM多变量时间序列预测
多维时序 | MATLAB实现PSO-CNN-BiLSTM多变量时间序列预测 目录 多维时序 | MATLAB实现PSO-CNN-BiLSTM多变量时间序列预测基本介绍模型特点程序设计参考资料 基本介绍 本次运行测试环境MATLAB2021b,MATLAB实现PSO-CNN-BiLSTM多变量时间序列预测。代码说明:…...
实现Java异步调用的高效方法
文章目录 为什么需要异步调用?Java中的异步编程方式1. 使用多线程2. 使用Java异步框架 异步调用的关键细节结论 🎉欢迎来到Java学习路线专栏~实现Java异步调用的高效方法 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒🍹✨博客主页:IT陈寒的博…...
批量提取文件名到excel,详细的提取步骤
如何批量提取文件名到excel?我们的电脑中可能存储着数量非常多的电子文件,现在需要快速将这些文件的名称全部提取到Excel中。虽然少量数据可以通过复制粘贴的方式轻松完成,但是对于上万个数据而言,复制粘贴都是行不通的࿰…...
C#中的泛型约束可以用在以下几个地方?
1.泛型类型参数: 在定义泛型类型或泛型方法时,可以使用泛型约束来限制泛型类型参数的类型。这可以确保类型参数满足特定的条件,从而在编译时捕获错误并提供更安全和可靠的代码。 public class MyClass<T> where T : IComparable<T&…...
Linux Vm上部署Docker
创建ubutu虚拟机并远程连接, 参考 https://blog.csdn.net/m0_48468018/article/details/132267096 在终端中切换到root用户,并安装docker服务 2.1 切换到root用户 sudo su2.2 安装docker服务 , 参考 https://docs.docker.com/engine/install/ubuntu/ …...
ubuntu bind dns服务配置
sudo apt-get install bind9 内网搭建DNS服务器,大多数是解析纯内网地址使用。但是偶尔也需要解析外网的地址,所以我们可以配置DNS没有添加A记录的URL时,forward到外网DNS服务器或者内网的其他DNS服务器解析。 打开配置文件: sud…...
安卓的代码加固和其他安全问题
文章目录 安卓加固apk文件结构dex加固过程 其它安全问题 安卓加固 从App的加固技术来看:主流分为dex加密和so加密,目前来看保护dex文件更为重要,因为dex反编译后的java代码可读性更强。 android-ndk: Native Development Kit 官网解释:这套工具使您能在 Android 应…...
关于Linux Docker springboot jar 日志时间不正确 问题解决
使用Springboot项目的jar,制作了一个Docker镜像,启动该镜像后发现容器和容器中的Springboot 项目的日志时间不正确。 解决 查看容器时间命令为: docker exec 容器id date 1. 容器与宿主机同步时间 在启动镜像时候把操作系统的时间通过&q…...
提高批量爬虫工作效率
大家好!作为一名专业的爬虫程序员,我今天要和大家分享一些关于提高批量爬虫工作效率的实用技巧。无论你是要批量采集图片、文本还是视频数据,这些经验都能帮助你在大规模数据采集中事半功倍。废话不多说,让我们开始吧!…...
E96系列电阻阻值和代码、乘数对照表
1、为什么要用代码表示? 0805封装还可以简单易懂写下四位丝印,比如10K的1002,但0603的封装上面再想写下四位丝印就没空间了,就算写了也不容易看不清。 2、E96系列电阻阻值和代码、乘数对照表 下面是E96系列的对照表,…...
基于CentOS7.9安装部署docker(简洁版)
安装部署 1基于官方脚本安装(不推荐 不能自行选择版本) 官方文档:https://docs.docker.com/engine/install/centos/ 2 使用yum安装 阿里云文档:docker-ce镜像_docker-ce下载地址_docker-ce安装教程-阿里巴巴开源镜像站 # ste…...
MySQL常用练手题目
数据库表名和字段设计 1.学生表 Student(s_id,s_name,s_birth,s_sex) 学生编号,学生姓名, 出生年月,学生性别 2.课程表 Course(c_id,c_name,t_id) 课程编号, 课程名称, 教师编号 3.教师表 Teacher(t_id,t_name) 教师编号,教师姓名 4.成绩表 Score (s_id,c_id,s_score) 学生编号…...
Oracle字段长度不足位数补零
Oracle字段长度不足位数补零 有时候从数据库中取出的月份值是1,而不是01,该怎么办呢 SELECTLPAD( CODE_MONTH, 2, 0 ) FROMtb_cube_TY001 WHERECODE_BM_MEATYPE TY20 AND code_measure MYLX01 AND code_month <> ~ AND CODE_ENTITY 01A AND…...
<数据结构与算法>二叉树堆的实现
目录 前言 一、树的概念及结构 1 树的概念 2 树的相关概念 二、二叉树的概念及结构 1.二叉树的概念 2. 特殊的二叉树 3. 二叉树的性质 4.二叉树的存储结构 三、二叉树的顺序结构及实现 1.堆的性质 2.堆的插入 3.堆的实现 堆的结构体 HeapInit 初始化 HeapPush 插入 HeapPop 删…...
FPGA:RS编码仿真过程
FPGA:RS编码仿真过程 RS码是一种纠错性能很强的线性纠错码,能够纠正随机错误和突发错误。RS码是一种多进制BCH码,能够同时纠正多个码元错误。 之前已经记录了在MATLAB中进行rs编解码的过程,现在利用FPGA的IP核实现RS编码的过程&…...
RocketMQ 5.0 架构解析:如何基于云原生架构支撑多元化场景
作者:隆基 本文将从技术角度了解 RocketMQ 的云原生架构,了解 RocketMQ 如何基于一套统一的架构支撑多元化的场景。 文章主要包含三部分内容。首先介绍 RocketMQ 5.0 的核心概念和架构概览;然后从集群角度出发,从宏观视角学习 R…...
Android su
1. userdebug和user版本 2. 关闭selinux system/core diff --git a/init/selinux.cpp b/init/selinux.cpp index 5a0255acd..787917274 100644--- a/init/selinux.cpp b/init/selinux.cpp -104,6 104,8 EnforcingStatus StatusFromCmdline() { } bool IsEnforcing() { …...
微信小程序真机调试异常cmdId 1006, errCode-50011-已解决
cmdId 1006, errCode-50011 起因 小程序在模拟器上预览没问题,真机调试和体验版首页打不开,点展开显示cmdId 1006, errCode-50011 解决 查了下1006, 说是广告, 我没接广告,这个也不是错误码 1006广告组件被驳回你的广告正在被审核,无法展现广告后来找到几个类似的帖子…...
36.SpringMVC视图
SpringMVC视图 SpringMVC中的视图是View接口,视图的作用渲染数据,将模型Model中的数据展示给用户 SpringMVC视图的种类很多,默认有转发视图(InternalResourceView)和重定向视图(RedirectView) 配置视图: 当工程引入jstl的依赖&a…...
LeetCode 热题 100(四):48. 旋转图像、240. 搜索二维矩阵 II、234. 回文链表
一.48. 旋转图像 题目要求:就是一个顺时针的旋转过程。 思路:观察矩阵,得出翻转前第i行的第J个元素 等于 翻转后倒数第i列的第J个元素,举例说明,第1行第2个元素为“2”,翻转后到了 倒数第1列的第2个元素…...
Qt 编译使用Bit7z库接口调用7z.dll、7-Zip.dll解压压缩常用Zip、ISO9660、Wim、Esd、7z等格式文件(二)
修改qt5 7zip源码编译及使用(含展示进度)一文中的封装类ZlibHelper代码类,继承多线程,使解压,压缩时进度条不影响界面,同时添加压缩文件中的文件预览功能,建议直接看源码 导读 相关代码内容扩展预览内容时获取文件修改…...
224、仿真-基于51单片机音乐播放器流水灯控制Proteus仿真设计(程序+Proteus仿真+原理图+程序流程图+元器件清单+配套资料等)
毕设帮助、开题指导、技术解答(有偿)见文未 目录 一、硬件设计 二、设计功能 三、Proteus仿真图 四、原理图 五、程序源码 资料包括: 需要完整的资料可以点击下面的名片加下我,找我要资源压缩包的百度网盘下载地址及提取码。 方案选择 单片机的选…...
虹科展会 | 自动驾驶展品:上海汽车测试展精彩回顾
2023年8月9日-8月11日,上海国际汽车测试及质量监控博览会在上海圆满落幕。本次展会提供了一个了解最新汽车测试及质量监控技术、产品和趋势的机会,同时也是汽车测试及质量监控领域的专业人士和业内人士的重要交流平台。 雅名特是虹科旗下子公司ÿ…...
Unity自定义脚本的 初始模版
参考博主:Unity修改创建的脚本模板,Unity脚本模板路径_unity hub 怎么改脚本模板_先生沉默先的博客-CSDN博客 【100个 Unity实用技能】 ☀️ | Unity自定义脚本的初始模版_unity 模板脚本_呆呆敲代码的小Y的博客-CSDN博客 一,将脚本放到Ed…...
vue3中使用第三方插件mitt实现任意组件通讯
vue3中使用第三方插件mitt实现任意组件通讯 组件通讯是vue3组合式开发的核心之一,现在我在写代码时,一个组件的代码超过了200行,基本都会拆分组件。组件拆分后,组件之间的通讯就很重要,总结了一下,目前有这…...
(五)、深度学习框架源码编译
1、源码构建与预构建: 源码构建: 源码构建是通过获取软件的源代码,然后在本地编译生成可执行程序或库文件的过程。这种方法允许根据特定需求进行配置和优化,但可能需要较长的时间和较大的资源来编译源代码。 预构建: 预…...
迈向通用听觉人工智能!清华电子系、火山语音携手推出认知导向的听觉大语言模型SALMONN
日前,清华大学电子工程系与火山语音团队携手合作,推出认知导向的开源听觉大语言模型SALMONN (Speech Audio Language Music Open Neural Network)。 大语言模型 SALMONN LOGO 相较于仅仅支持语音输入或非语音音频输入的其他大模型,SALMONN对…...
NOIP 2015 扫雷(mine)
扫雷(mine) 说明 扫雷游戏是一款十分经典的单机小游戏。在 n行 m 列的雷区中有一些格子含有地雷(称之为地雷格),其他格子不含地雷(称之为非地雷格)。玩家翻开一个非地雷格时,该格将会…...
elaticsearch(3)
整合springboot 1.整合依赖 注意依赖版本和安装的版本一致 <properties> <java.version>1.8</java.version> <!-- 统一版本 --> <elasticsearch.version>7.6.1</elasticsearch.version> </properties> 导入elastics…...
DevOps系列文章 之 Gitlab+Docker自动部署SpringBoot
1.环境要求 以下服务器的操作系统均为Centos7 服务器A:Gitlab服务器B:GitlabRunner、Docker、docker-compose、Java1.8、maven3.6.3、git ps:这里可以把服务器B的GitlabRunner、Java1.8、maven3.6.3、git单独提出来,独立部署&a…...