JSX是什么,React为什么使用JSX,babel怎么转译JSX的

news/2024/3/29 21:03:00/文章来源:https://blog.csdn.net/qq_51965698/article/details/129251204

JSX是什么,React为什么使用JSX,babel怎么转译JSX的

在前端的框架中有两种“描述UI”的方案,一种是JSX语法,一种是模板语言。

其中React就是选择的JSX,Vue就是选择的模板语言。

JSX其实就是一个语法糖,在编写React代码的时候你可以不使用JSX来进行编写。在React中,你写的JSX代码最终都会被babel编译。

// JSX语法
const element = <h1>Hello,World!</h1>
// babel编译后
var element = React.createElement("h1",null,"Hello,world!");//React17版本之前
// React17版本之后
var _jsxRuntime = require("react/jsx-runtime");
var element = _jsxRuntime.jsx("h1",{children:"Hello World!"});

JSX由babel转换成React.createElement或_jsxRuntime.jsx的形式,函数执行后返回虚拟DOM,所以说你可以不使用JSX,可以直接写React.createElement或_jsxRuntime.jsx的形式。
所以我们写的代码最终都会被构建成虚拟DOM树。JSX就是一种类XML语法的语法糖,让开发者来构建这个虚拟DOM树更加的方便,使代码更加的简洁。

那么babel是怎么样将JSX语法转换成React.createElement或_jsxRuntime.jsx的形式的呢?

babel编译JSX的流程分为三个部分:

  1. parse:通过parse将JSX代码转换成AST。
  2. transform:在transform阶段使用@babel/plugin-transform-react-jsx插件,它的核心就是visitor函数,通过这个函数来遍历AST,根据不同的节点类型来做不同的处理,生成了JSX对应的createElement对应的AST。
  3. generate:最后由generate将AST转换为JS。

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

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

相关文章

LVGL8.3 集成 ST7789V 显示驱动和 CST816T 触摸屏驱动

LVGL8.3 集成 ST7789V 显示驱动和 CTS816S 触摸屏驱动起因效果&#xff08;正常显示&#xff0c;触摸屏可调换X&#xff0c;Y轴&#xff09;使用方式前提操作步骤最后参考起因 LVGL的ESP32 Drivers库中已经包含了大多数显示和触摸芯片的驱动&#xff0c;基本上只需要在MenuCon…

一些无线通信系统模型的概念

一些无线通信系统模型的概念 扩频通信,指的是系统的带宽WWW远大于其信息传输速率R(bits/s)R(bits/s)R(bits/s), 定义展频带因子BeWRB_e \frac{W}{R}Be​RW​, 易知在扩频通信系统中,BeB_eBe​远大于1. 在频率上产生如此大的冗余度,主要是为了减轻无线通信或卫星通信中经常产生…

SpringMVC——响应处理(1)【包含源码分析】

Controller public class JsonReturnController {ResponseBodyGetMapping("/getPet")public Pet getPet(){Pet petnew Pet();pet.setAge(5);pet.setName("lily");return pet;} }项目启动后 浏览器输入 http://localhost:8080/getPet 。 debug DispatcherS…

设备驱动模型--存储技术原理分析笔记 基于2.6.43内核

本文为读书笔记&#xff0c;详细内容参考《存储原理技术分析》1- 驱动模型2- 总线类型2.1- 重要数据结构总线bus_type 和 bus_type_private 互相可以找到对方struct bus_type {const char *name;struct bus_attribute *bus_attrs;struct device_attribute *dev_attrs;s…

BPMN2.0是什么,BPMN能解决企业流程管理中哪些问题?

一、前言&#xff1a; 在任何行业和企业中&#xff0c;一定存在着各式各样的流程&#xff0c;请假流程、报销流程、入职流程、离职流程、出差流程、合同审批流程、出入库流程等等…… 无论是管理者、技术人员还是业务人员&#xff0c;每天肯定也在使用各种流程&#xff0c;但…

Spring彻头彻尾的讲解,按照Spring框架启动流程,逐步剖析问题,不再是大杂烩!

文章目录1. 定义Spring Bean篇1.1 定义Spring Bean的几种方式1.1.1 XML文件定义Spring Bean1.1.2 JavaConfig定义Spring Bean1.1.3 Component注解定义SpringBean1.2 装配Spring Bean的四种常用方式1.2.1 手动装配 XML文件1.2.2 自动装配 XML文件1.2.3 手动装配 JavaConfig文…

C++常见类型及占用内存表

GPS生产厂家在定义数据的时候都会有一定的数据类型&#xff0c;例如double、int、float等&#xff0c;我们知道它们在内存中都对应了一定的字节大小&#xff0c;而我在实际使用时涉及到了端序的问题&#xff08;大端序高字节在前&#xff0c;小端序低字节在前&#xff09;&…

【ICCV2022】 CAPAO:一种高效的单阶段人体姿态估计模型

CAPAO&#xff1a;一种高效的单阶段人体姿态估计模型 重新思考关键点表示&#xff1a;将关键点和姿态建模作为多人姿态估计的对象&#xff08;Rethinking Keypoint Representations: Modeling Keypoints and Poses as Objects for Multi-Person Human Pose Estimation&#xf…

《数据库系统概论》学习笔记——第四章 数据库安全

教材为数据库系统概论第五版&#xff08;王珊&#xff09; 这一章简单记一下那几条sql的用法和两种存取控制和审计&#xff08;今年期末考了&#xff09;吧&#xff0c;不知道有啥好考的 数据库安全性 问题的提出 数据库的一大特点是数据可以共享数据共享必然带来数据库的安全…

idea远程调试线上jar包

有时候本地代码没问题但在线上运行会报错&#xff0c;这时候可以使用idea的remote功能调试线上jar包 步骤1 步骤2&#xff1a;新建remote 步骤3&#xff1a;配置服务器ip和端口 并复制生成的JVM参数供之后使用 步骤4&#xff1a;打jar包&#xff0c;并将生成的jar包放到服务…

Uncaught ReferenceError: jQuery is not defined

今天在拉取项目部署到本地的时候遇到了一个问题特此记录一下 &#xff08;以后闭坑&#xff09; 我和同事同时拉取了一样的代码&#xff0c;结果同事的页面加载正常而我的页面像被狗啃了一样&#xff0c;知道是js的问题但是不知道问题出在哪里&#xff1f;后来还是同事帮我解决…

栈与队列小结

一、理论基础1.队列是先进先出&#xff0c;栈是先进后出2.栈和队列是STL&#xff08;C标准库&#xff09;里面的两个数据结构。栈提供push和pop等等接口&#xff0c;所有元素必须符合先进后出规则&#xff0c;所以栈不提供走访功能&#xff0c;也不提供迭代器。3.栈是以底层容器…

CRM客户管理系统哪个好用?盘点前十名!

CRM客户管理系统排行&#xff1f;盘点前十名&#xff01; CRM客户管理系统是一种集成多种功能的软件系统&#xff0c;可以帮助企业跟进和管理客户关系、提高销售业绩、优化营销策略等。对于企业来说&#xff0c;选择一款适合自己的CRM系统非常重要&#xff0c;因为它能够直接影…

python之web自动化测试框架

梳理下搭建web自动化框架的流程&#xff1a; 创建目录&#xff1a; cases&#xff1a;存放测试用例&#xff0c;unittest框架要求用例名必须以test开头&#xff0c;所以命名test_case.py test_case.py代码如下&#xff1a;继承unittest.TestCase类下面的方法setupclass(),te…

学习 Python 之 Pygame 开发魂斗罗(六)

学习 Python 之 Pygame 开发魂斗罗&#xff08;六&#xff09;继续编写魂斗罗1. 创建碰撞类2. 给地图添加碰撞体3. 让人物可以掉下去4. 实现人物向下跳跃5. 完整的代码继续编写魂斗罗 在上次的博客学习 Python 之 Pygame 开发魂斗罗&#xff08;五&#xff09;中&#xff0c;我…

感知趋势,洞察发展:2023(第十届)趋势与预测大会成功举办

2023年2月23日&#xff0c;运联年会&#xff1a;2023&#xff08;第十届&#xff09;趋势与预测大会在深圳机场凯悦酒店成功闭幕。自2014年开始&#xff0c;“运联年会&#xff1a;趋势与预测”已经连续举办九届。这场大会&#xff0c;既是一次行业性的“年终总结”&#xff0c…

(四)K8S 安装 Nginx Ingress Controller

ingress-nginx 是 Kubernetes 的入口控制器&#xff0c;使用NGINX作为反向代理和负载均衡器 版本介绍 版本1&#xff1a;Ingress NGINX Controller(k8s社区的ingres-nginx) 以 NGINX 开源技术为基础&#xff08;kubernetes.io&#xff09;&#xff0c;可在GitHub的 kubernet…

记一次java.lang.ClassNotFoundException问题排查过程

记一次java.lang.ClassNotFoundException问题排查过程 同事提供一个or-simulation-engine.jar包&#xff08;非maven项目&#xff0c;内部依赖很多其他jar&#xff0c;这个包是手动打出来的&#xff09;给我&#xff0c;我集成到我的springboot项目中&#xff0c;在本地IDEA启…

Telnet 基础实验1: Telnet 实验

Telnet 基础实验1&#xff1a; Telnet 实验 拓扑图 配置命令 R1 的配置 undo ter mo sys sys R1 interface g0/0/0 ip address 192.168.1.1 255.255.255.0 qR2 的配置 undo ter mo system-view sysname R2 interface g0/0/0 ip address 192.168.1.2 255.255.255.0 q两台设…

day21_IO

今日内容 上课同步视频:CuteN饕餮的个人空间_哔哩哔哩_bilibili 同步笔记沐沐霸的博客_CSDN博客-Java2301 零、 复习昨日 一、作业 二、File 三、IO流 四、字节输入&输出流 零、 复习昨日 见晨考 一、作业 见答案二、File 2.1 介绍 File,通过一个路径代表文件或者文件夹 …