jsx代码如何变成dom

news2024/11/15 7:49:38

jsx代码如何变成dom

  • 一、三个问题考察对jsx的理解
  • 二、jsx的本质以及它和js之间是什么关系?
    • 2.1 jsx是什么
    • 2.2 和js的关系
    • 2.3 jsx的本质
  • 三、为什么要用jsx?不用会有什么后果
  • 四、jsx背后的功能模块是什么?这个功能模块都做了哪些事情?
    • 4.1 createElement
      • 1.入参分析
      • 2.函数体拆解
    • 4.2 ReactElement
    • 4.3 虚拟dom和reactDom.render
    • 4.4 总结

一、三个问题考察对jsx的理解

  1. jsx的本质是什么,它和js之间是什么关系?
  2. 为什么要用jsx?不用会有什么后果
  3. jsx背后的功能模块是什么?这个功能模块都做了哪些事情?

二、jsx的本质以及它和js之间是什么关系?

2.1 jsx是什么

jsx是JavaScript的一种语法拓展,它和模板语言很接近,但是它充分具备JavaScript的能力。

2.2 和js的关系

因为jsx是JavaScript的拓展,所以直接决定了浏览器不会像天然支持JavaScript一样支持jsx。
但是既然jsx充分具备JavaScript的能力,那么jsx是如何在js中生效的呢?
其实在react官网中就给出了答案,jsx会被编译为React.createElement(),它将返回一个“React Element”的js对象。

编译这个动作是由Babel来完成的。Babel是一个工具链,主要用于将es2015+版本的代码转换为向后兼容的js语法,以便能够运行在当前和旧版本的浏览器或其他环境。

在babel官网中,可以看到编译前后的代码
[图片]

2.3 jsx的本质

当我们在写jsx时,实际上编译后就是React.createElement。
jsx的本质就是调用js中的React.createElement语法糖。

三、为什么要用jsx?不用会有什么后果

既然jsx等价于一次React.createElement调用,那么React官方为什么不直接引导我们用ReactElement来创建元素?

因为当jsx内容更多时,编译之后的代码会变得很复杂,嵌套不清晰

所以jsx语法糖允许我们使用最为熟悉的类HTML标签语法来创建虚拟DOM,降低学习成本的同时,也提升了研发效率和体验。

四、jsx背后的功能模块是什么?这个功能模块都做了哪些事情?

4.1 createElement

1.入参分析

export function createElement(type,config,children)

type:标识节点类型
config:以对象形式传入,组件所有的属性都会以键值对的形式存储在config中
children:以对象形式传入,它记录的是组件标签之间嵌套的内容

2.函数体拆解

[图片]

[图片]

createElement的步骤其实是在格式化数据。将开发传入的数据根据ReactElement的预期做一层格式化,最终调用ReactElement实现元素的创建。

4.2 ReactElement

主要做的事情就是组装ReactElement把传入的参数按照一定的规范,组装进Element对象里,然后返回给React.createElement,最后React.createElement交回给开发者手中。
[图片]

可以通过打印验证这一点。输出的确实是标准的ReactElement实例。本质是以js对象形式存在的对dom的描述,也就是虚拟dom。
[图片]

[图片]

4.3 虚拟dom和reactDom.render

既然是虚拟dom,那和渲染到页面上的真实dom一定是有差距的,它们之间的差距就是由reactDom.render方法来填补的。
reactDOM.render经常出现在项目的入口文件中。

reactDOM.render的入参分析[图片]

4.4 总结

jsx背后的功能模块的内容以及做了的事情:
1.通过babel将jsx代码编译为React.createElement的调用。

2.React.createElement将传入的参数包括type,config,children格式化为ReactElement预期的格式。

3.调用ReactElement后组装成ReactElement对象,返回给React.createElement,最终生成虚拟dom。

4.虚拟dom作为ReactDOM.render的入参,经过渲染处理生成真实DOM。
[图片]

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

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

相关文章

DVWA 之 SQL注入(非盲注)

文章目录SQL注入1.判断是否存在注入,注入是字符型还是数字型2.猜解SQL查询语句中的字段数3.确定显示的字段顺序4.获取当前数据库5.获取数据库中的表6.获取表中的字段名7.下载数据SQL注入 步骤: 1.判断是否存在注入,注入是字符型还是数字型 2…

数据库平滑扩容方案剖析

1. 扩容方案剖析 1.1 扩容问题 在项目初期,我们部署了三个数据库A、B、C,此时数据库的规模可以满足我们的业务需求。为了将数据做到平均分配,我们在Service服务层使用uid%3进行取模分片,从而将数据平均分配到三个数据库中。 如…

4-6 最小生成树Prim,Kruskal(贪心)

4.6最小生成树 Prim,Kruskal(贪心) 一、问题描述 设G (V,E)是无向连通带权图,即一个网络。E中每条边(u,v)的权为 c[u][v]。 如果G的子图G’是一棵包含G的所有顶点的树,则称G’为G的生成树。生成树上各边权的总和称为该生成树的耗费。 在G的所有生成树中…

java计算机毕业设计基于安卓Android的校园快药APP-药店管理app

项目介绍 本文介绍了校园快药APP软件开发建设的意义和国内外发展现状,然后详细描述了所开发手机APP的可行性分析,并分析了手机APP所要实现的功能。因为校园快药设施较多,而且人口密集,不能更好的管理校园快药,造成需要时患者不必要的伤亡,所以采用比较方便的、容易便携的手机AP…

[附源码]Python计算机毕业设计Excel操作题自动评分系统

项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等等。 环境需要 1.运行环境:最好是python3.7.7,…

基于PHP+MySQL的企业宣传展示网

随着互联网的发展,企业越来越重视网上宣传渠道了。谢现在各大企业都有了自己的官网,以达到宣传企业或方便客户了解企业的目的。PHP企业宣传展示网分为前台和后台两部分。前台不部分主要是让用户了解和查看及动态等信息,使用的后台部分主要是企业的管理人员对网站的信息进行管理…

股票系统接口是如何进行数据共享的?

股票系统接口系统在量化交易中常见的一种数据挖掘系统,就比如说,如果你想要从别的网站或服务器上获取资源或信息,别人是不会把数据库共享过来的,他只能给你提供一个他们写好的编程方法来获取数据。也就是说通过股票系统接口输入你…

springboot15:junit5的使用

1.测试平台Junit springboot新版使用junit 只需要标注一个注解SpringBootTest然后方法中标注Test即可 以前springboot的使用 比较困难 现在整合使用后 只需要编写测试方法Test写测试的逻辑,整个类具有spring的功能,比如事务(测试完成后会自动…

补盲激光雷达「PK」4D成像雷达,车企会作何选择?

关于4D成像雷达和激光雷达的争论,在此之前,两方势力之间还是有些克制。「谁也不是替代谁」,成了各方一致的看法。目标,也很一致,就是补齐摄像头的物理性能缺陷。 比如,与激光雷达相比,4D成像雷…

Python之第十一章 面向对象 --- 基础

目录 1.面向对象编程思想 1.编程思想 2.面向过程编程思想 3.面向对象编程思想 例 面向对象报名案例分析 面向过程与面向对象的区别 2.面向对象专业术语 1.组成 2.对象(object) 3.类: 1.引入类的原因 2.定义: 3.类的定…

2022HDC见闻与新技术学习体验分享

一、创新照见未来,共建鸿蒙世界,主题演讲笔记 以创新照见未来,共建鸿蒙世界为主题的第四界HDC大会于2022年11月4日在东莞松山湖线上与线下同时开启。本次大会展示了鸿蒙生态的最新成果与发展规划。第一天的主题演讲中,华为发布了解…

06-HTTPS单向认证及Java案例

一、单向认证流程 单向认证流程中,服务器端保存着公钥证书和私钥两个文件,整个握手过程如下: 客户端发起建立HTTPS连接请求,将SSL协议版本的信息发送给服务器端;服务器端将本机的公钥证书(server.crt&am…

Windows - WINS Service

WINS SERVICE配置工作任务 安装及配置 WINS 服务; 配置为DCserver 为主WINS服务器。 WINS server - Windows server 更新 1-1 查看计算机名称 1-2 命令查看计算机名称: win+R---->>powerShell---->>命令nbtstat -n 1-3 查

《FFmpeg Basics》中文版-05-裁剪视频

正文 裁剪视频意味着从输入到输出中选择想要的矩形区域而没有余数。 裁剪通常用于调整大小,填充和其他编辑。 裁剪基础知识 较老的FFmpeg版本有cropbottom、cropleft、cropright和croptop选项,但现在已弃用,并使用下表中描述的裁剪操作。 …

微服务分布式开源架构是什么?

微服务分布式开源架构跟单体应用比起来有着较大的优势,可以解决单体系统的不足之处,满足日益增多的业务量需求。那么,微服务分布式开源架构是什么?什么软件服务商的微服务架构比较适合? 一、微服务分布式开源架构是什么…

nmap各种扫描的注意事项

1) nmap -sS 192.168.0.100 TCP的SYN扫描,也称为stealth扫描,扫描时,发送一个SYN包,等待SYN/ACK响应,当能够收到SYN/ACK响应时,就认为该端口是开放的。SYN扫描是一个速度极快而且结果又准的扫描&#xff0…

Linux 进程通信深剖

目录传统艺能😎进程间通信🤔通信方式🤔管道🤔匿名管道🤔pipe🤔匿名管道使用🤔读写规则🤔管道特点🤔同步与互斥😋管道生命周期😋流式服务&#x1f…

Nginx反向代理

代理概述 正向代理代理的对象是客户端,反向代理代理的是服务端,Nginx即可以实现正向代理,也可以实现反向代理。 正向代理 反向代理 正向代理案例 理论上Nginx可以支持正向代理上网,但是在实验中,域名访问有问题&am…

有奖报名|StarRocks 获开源热力值增速第一,有你的贡献

近日,由开放原子开源基金会、X-lab 开放实验室和阿里巴巴开源委员会联合出品的《2022 开源大数据热力报告》在云栖大会公布。StarRocks 荣登《2022开源大数据热力报告》Top 30,并作为数据查询与分析方向增速第一的项目受邀出席 11 月 17 日的线上圆桌讨论…

顺序表--C语言版(从0开始,超详细解析 ,小白一听就懂!!!)

目录 一、前言 🍎什么是数据结构 🍐学习数据结构有什么用 二、顺序表概念 ------- (线性表) 🍉什么是线性表 🍓顺序表概念详解 💦 顺序表与数组的区别 三、顺序表详解 🍌…