当前位置: 首页 > news >正文

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

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。

相关文章:

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

JSX是什么&#xff0c;React为什么使用JSX&#xff0c;babel怎么转译JSX的 在前端的框架中有两种“描述UI”的方案&#xff0c;一种是JSX语法&#xff0c;一种是模板语言。 其中React就是选择的JSX&#xff0c;Vue就是选择的模板语言。 JSX其实就是一个语法糖&#xff0c;在…...

从工地转行软件测试,拿下13k+年终奖是种什么体验?

最近&#xff0c;一则名为《我&#xff1a;毕业五年&#xff0c;存款5000。她:中传硕士&#xff0c;火锅店保洁》的视频走红网络&#xff0c;两位名校毕业生看似高开低走的就业经历&#xff0c;引起了很多人的共鸣。她们所传达的并不是所谓的躺平、摆烂&#xff0c;而是希望更多…...

前端面试题 —— 计算机网络(二)

目录 一、POST和PUT请求的区别 二、GET方法URL长度限制的原因 三、页面有多张图片&#xff0c;HTTP是怎样的加载表现&#xff1f; 四、HTTP2的头部压缩算法是怎样的&#xff1f; 五、说一下HTTP 3.0 六、HTTP协议的性能怎么样&#xff1f; 七、数字证书是什么&#xff1f…...

山东大学机器学习期末2022

接力&#xff1a;山东大学机器学习期末2021 本来是不想写的&#xff0c;因为不想回忆起考试时啥也不会的伤痛&#xff0c;没想到最后给分老师海底捞&#xff0c;心情好了一些&#xff0c;还是一块写完 备考建议&#xff1a;多看ppt&#xff0c;多看ppt&#xff0c;多看ppt 山东…...

FEBC2022|打造VR内容生态闭环 佳创视讯持续加码轻量化内容建设

2月24日&#xff0c;由陀螺科技主办的未来商业生态链接大会作为 2023 癸卯兔年开年率先召开的行业重要影响力盛会在深圳成功召开。今年大会云集了科技、软件、游戏、XR等元宇宙领域的世界500强、上市公司及行业独角兽企业&#xff0c;围绕游戏、元宇宙、XR、数字营销等多项热门…...

Redis常见的数据类型命令

文章目录Redis 常见的数据类型及命令一、常见的NoSQL二、Redis 简介三、key 键的一些操作命令四、Redis的五种基本数据结构1、String&#xff08;字符串&#xff09;介绍常用命令1.1 set/get1.2 append1.3 strlen1.4 setex1.5 mset/mget1.6 setrange/getrange1.7 setnx1.8 incr…...

Python3+Selenium3自动化测试-(准备)

最近在学习selenium自动化测试相关的内容&#xff0c;所以将实际准备情况做一记录&#xff0c; # 系统&#xff1a;win10(64位) # 浏览器&#xff1a;Chrome(67.0)、Firefox(61.0)、IE # python版本&#xff1a;3.6.5 # Selenium&#xff1a;3.13.0Selenium简介 Selenium是一…...

VUE的安装和创建

安装node.js 进入node官网进行下载&#xff0c;然后一直下一步。 测试是否安装成功&#xff1a; 命令提示窗下执行&#xff1a;npm -v 若出现版本号&#xff0c;则安装成功。 安装npm源&#xff1a; npm config set registry http://registry.npm.taobao.org 查看&#xff1a;…...

ETL工具(kettle) 与 ETL产品(BeeloadBeeDI) 差之毫厘,谬以千里

E T L——是英文Extract-Transform-Load的缩写&#xff0c;用来描述将数据从来源端经过抽取&#xff08;extract&#xff09;、转换&#xff08;transform&#xff09;、加载&#xff08;load&#xff09;至目的端的过程。工具——原指工作时所需用的器具&#xff0c;后引申为达…...

轻松入门H3C无线AC上线AP【入门篇】

我们知道华三的最新模拟器支持了无线AC的配置&#xff0c;今天就浅浅的出个无线AC的教程&#xff0c;你上也会的那种。今天我们模拟的是二层环境下&#xff0c;笔者准备了2个AP&#xff0c;以此展示AP上线到AC的教程&#xff0c;并且用手机测试WiFi连接正常&#xff0c;且客户端…...

尚医通(二十五)就医提醒和预约统计

目录一、就医提醒1、搭建定时任务模块二、后台管理系统-预约统计功能1、开发每天预约数据接口2、封装远程调用接口3、搭建统计分析模块4、整合统计功能前端一、就医提醒 我们通过定时任务&#xff0c;每天8点执行&#xff0c;提醒就诊 1、搭建定时任务模块 &#xff08;1&…...

网页js版音频数字信号处理:H5录音+特定频率信号的特征分析和识别提取

文章目录一、网页中的音频数据源二、FFT&#xff1a;时域转频域三、信号的特征分析四、信号的识别提取附录音频数字信号处理 Audio DSP (Digital Signal Processing) 是一个复杂又专业的话题&#xff0c;本文介绍的是如何从音频中实时分析和识别出特定频率信号的一种方法&#…...

uniapp结合腾讯云及时通信IM的聊天记录本地存储方案

uniapp结合腾讯云及时通信IM的聊天记录本地存储方案 UniApp 是一个跨平台的应用开发框架&#xff0c;可以使用 Vue.js 开发多端应用&#xff08;如H5、小程序、App等&#xff09;。在 UniApp 中&#xff0c;可以使用 uni-app 提供的文件系统 API 完成本地文件存储的操作。 1.…...

PyQGIS开发 -- 基础学习笔记

1、自主学习QGIS开发虽然QGIS本身功能强大&#xff0c;但还是架不住我们要编写新的功能、新的业务流程、新的算法。前文中我们提到&#xff0c;扩展QGIS有2种方法&#xff0c;一是用Python、C来写QGIS的插件&#xff1b;另一种就是基于QGIS的C API开发独立应用程序。然而后者资…...

一篇了解模块打包工具之 ——webpack(1)

本篇采用问题引导的方式来学习webpack&#xff0c;借此梳理一下自己对webpack的理解&#xff0c;将所有的知识点连成一条线&#xff0c;形成对webpack的记忆导图。 最终目标&#xff0c;手动构建一个vue项目&#xff0c;目录结构参考vue-cli创建出来的项目 一、问问题 1. 第…...

k8s学习之路 | Day16 k8s 中的容器初探

文章目录容器镜像镜像名称镜像拉取策略私有仓库的拉取策略容器的环境变量和启动命令容器的环境变量容器的启动命令容器的生命周期钩子postStartpreStop容器的探针startupProbelivenessProbereadinessProbek8s 集群中最小的管理单元就是一个Pod&#xff0c;而Pod里面才是容器&am…...

export、import、commit、save、load的区别

目录1. docker export 和 docker import2. docker commit3.docker save 和 docker load1. docker export 和 docker import docker export 容器ID/容器Name > xxx.tar 导出一个容器快照 docker import xxx.tar NewImageName:tag 导入一个容器快照到本地镜像库 适用场景&a…...

多部委联合举办中国人工智能大赛启动会在厦召开,快商通亮相发言

站在“第二个百年奋斗目标”的新起点上&#xff0c;为深入推动我国人工智能产业创新发展&#xff0c;发掘一批人工智能优秀团队&#xff0c; 国家互联网信息办公室、工业和信息化部、公安部、国家广播电视总局、厦门市人民政府将联合主办第四届中国人工智能大赛 。快商通联合创…...

js红宝书学习笔记(1-6章)

就按照原书中写的章节顺序记笔记了&#xff0c; 还有可能我学过js一段时间了&#xff0c;可能有些对于新手的细节会忽略&#xff0c;但是会尽量写全的~ 1.第一章 什么是JavaScript 1.1讲了一些历史&#xff0c;所以我们从1.2开始看 1.2 JavaScript的实现 完整的JaveScript包…...

第十四届蓝桥杯第三期官方模拟赛C\C++题解

文章目录A-填空题题意算法参考代码&#xff08;C&#xff09;B-填空题题意算法参考代码&#xff08;C&#xff09;C-填空题题意算法参考代码&#xff08;C&#xff09;D-填空题题意算法参考代码&#xff08;C&#xff09;E-填空题题意算法参考代码&#xff08;C&#xff09;F题…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

【UE5 C++】通过文件对话框获取选择文件的路径

目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 &#xff0c;这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器&#xff0c;右键点击 .uproject 文件&#xff0c;选择 "Generate Visual Studio project files"&#xff0c;重…...

第一篇:Liunx环境下搭建PaddlePaddle 3.0基础环境(Liunx Centos8.5安装Python3.10+pip3.10)

第一篇&#xff1a;Liunx环境下搭建PaddlePaddle 3.0基础环境&#xff08;Liunx Centos8.5安装Python3.10pip3.10&#xff09; 一&#xff1a;前言二&#xff1a;安装编译依赖二&#xff1a;安装Python3.10三&#xff1a;安装PIP3.10四&#xff1a;安装Paddlepaddle基础框架4.1…...

【FTP】ftp文件传输会丢包吗?批量几百个文件传输,有一些文件没有传输完整,如何解决?

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

高分辨率图像合成归一化流扩展

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 1 摘要 我们提出了STARFlow&#xff0c;一种基于归一化流的可扩展生成模型&#xff0c;它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流&#xff08;TARFlow&am…...