2024最新前端React面试题:JSX是什么,它和JS有什么区别

JSX是什么,它和JS有什么区别

  • 回答思路:1.编写方式--->2.分别是什么?--->3.分别是怎么编译的?
    • 1.编写方式
    • 2.分别是什么?
    • 3.分别是怎么编译的?

回答思路:1.编写方式—>2.分别是什么?—>3.分别是怎么编译的?

1.编写方式

(1)JS在标签中编写,可以被浏览器直接识别
(2)JSX可在html中编写JS,不能被浏览器直接识别,需要转译

2.分别是什么?

(1)JS是原生写法
(2)JSX是react的语法糖,JSX是JS的语法扩展

3.分别是怎么编译的?

(1)JS可以被打包工具直接编译,不需额外的转换
(2)JSX需要通过babel编译,它是React.createElement的语法糖,使用JSX相当于是React.createElement
注意:在react17之后jsx不一定会被转换为React.createElement
JSX编写:

function App(){return <h1>123</h1>
}    

JSX通过babel或者其他的编译工具编译之后:

import {jsx as _jsx} from 'react/jsx-runtime';
function App() {return _jsx('h1', { children: '123' });
}

编译之后不需要通过import React就能使用jsx了,但是用react hooks还是需要import React

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

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

相关文章

中国电科网安C++开发工程师校招一面面经

本文介绍2024届秋招中&#xff0c;中国电子科技网络信息安全有限公司的C/C开发工程师岗位一面的面试基本情况、提问问题等。 10月投递了中国电子科技网络信息安全有限公司的C/C开发工程师岗位&#xff0c;并不清楚所在的部门。目前完成了一面&#xff0c;在这里记录一下一面经历…

mysqlbinlog查看binlog

根据位置 mysqlbinlog --no-defaults -v --base64-outputdecode-rows --databasedbname --start-position1180 --stop-position1313 /www/server/data/mysql-bin.000007 > /path/db.sql根据时间 mysqlbinlog -v --base64-outputdecode-rows --databasedbname --start-date…

Oracle exists和in的效率问题

使用exists&#xff1a; select * from T1 where exists(select 1 from T2 where T1.aT2.a) ; 使用exists写法时&#xff0c;其中 “select 1 from T2 where T1.aT2.a” 相当于一个关联表查询&#xff0c;相当于“select 1 from T1,T2 where T1.aT2.a”&#xff0c; “selec…

git的使用基础教程

最近项目在搞自动化测试&#xff0c;需要将各种测试脚本集成到自动化框架里边&#xff0c;这个就需要用到版本管理系统了,下面简单价绍一下git的使用。 首先从官网下载并安装git工具&#xff0c;下面以wins系统为例子说明 https://git-scm.com/downloads wins安装好后&#xff…

灸哥问答:软件架构在软件研发中的作用

软件架构在软件开发中扮演着至关重要的角色。我们在软件研发的过程中&#xff0c;类比于建造一座公寓楼&#xff0c;而软件架构就像是盖楼之前的设计图纸&#xff0c;如果没有设计图纸就直接盖楼&#xff0c;可想而知带来的后果是什么。我对软件架构的作用表现总结如下&#xf…

[C语言]时间戳

时间戳的概念 时间戳就是定义一个时间点作为0秒, 之后每过一秒依此加一, 将当前的时间戳换算成年月日, 再加上起点, 获得的就是现在时刻的时间. 根据地球时区的偏移, 比如北京时间是东八区, 做一个偏移量的加减. 0起点: 1900年1月1日0时0分0秒. 0偏移地点: 英国伦敦 时间戳…

gradio-osprey-demo

创建需要的dockerfle ################### # 使用 Ubuntu 作为基础镜像 FROM nvcr.io/nvidia/cuda:11.8.0-devel-ubuntu22.04 # 更新软件包列表并安装依赖项 RUN apt update && \ apt install -y python3 python3-pip git ffmpeg libsm6 libxext6 curl wget …

JS变量和函数提升

JS变量和函数提升 JS变量提升编译阶段执行阶段相同变量或函数 变量提升带来的问题变量容易不被察觉的遭覆盖本应销毁的变量未被销毁 如何解决变量提升带来的问题 JS变量提升 sayHi()console.log(myname)var myname yyfunction sayHi() {console.log(Hi) }// 执行结果: // Hi …

[蓝桥杯 2023省模拟题]判断蓝桥

问题描述 输入一个字符串&#xff0c;请判断这个字符串是否正好是 lanqiao 。在输入时如果只是大小写不同也算作相同。 输入格式 输入一行包含一个字符串。 输出格式 如果是 lanqiao &#xff0c;输出全小写的字符串 yes &#xff0c;否则输出全小写的字符串 no 。 样例输…

深度学习——PIL和OpenCV

PIL 官方文档 格式互转 opencv cv2.imread() 参数&#xff1a; filepath&#xff1a;读入imge的完整路径 flags&#xff1a;标志位&#xff0c;{cv2.IMREAD_COLOR&#xff0c;cv2.IMREAD_GRAYSCALE&#xff0c;cv2.IMREAD_UNCHANGED} cv2.IMREAD_COLOR&#xff1a;默认参数&…

Attention机制

前置知识&#xff1a;RNN&#xff0c;LSTM/GRU 提出背景 Attention模型是基于Encoder-Decoder框架提出的。Encoder-Decoder框架&#xff0c;也就是编码-解码框架&#xff0c;主要被用来处理序列-序列问题。 Encoder&#xff1a;编码器&#xff0c;将输入的序列<x1,x2,x3……

如何理解IoC和DI?(小知识)

IOC就是控制反转&#xff0c;通俗的说就是我们不用自己创建实例对象&#xff0c;这些都交给Spring的bean工厂帮我们创建管理。这也是Spring的核心思想&#xff0c;通过面向接口编程的方式来是实现对业务组件的动态依赖。这就意味着IOC是Spring针对解决程序耦合而存在的。在实际…

『番外篇十』SwiftUI 实战:打造一款“五脏俱全”的网络图片显示 App(下)

概览 在上篇文章中,我们初步实现了一款小巧的网络图片显示器。 我们先是创建了 json 数据对应的图片模型,然后将 App 界面“分而治之”划分为独立的三个组件以便“逐个击破”,最后我们将所有这些融合在一起。 不过,目前的实现仍有一些问题。比如我们添加了一层不必要的 …

Spring MVC注解详解与实战:从请求处理到数据绑定

文章目录 第一部分&#xff1a;注解详解第二部分&#xff1a;代码示例 第一部分&#xff1a;注解详解 RequestBody 作用&#xff1a;主要用来处理Content-Type为application/json、application/xml等类型的请求体&#xff0c;将请求体中的参数绑定到方法的形参上。常用于处理PO…

详解Vue3中的鼠标事件mousemove、mouseover和mouseout

本文主要介绍Vue3中的常见鼠标事件mousemove、mouseover和mouseout。 目录 一、mousemove——鼠标移动事件二、mouseover——鼠标移入事件三、mouseout——鼠标移出事件 下面是Vue 3中常用的鼠标事件mousemove、mouseover和mouseout的详解。 一、mousemove——鼠标移动事件 鼠…

跟着cherno手搓游戏引擎【3】事件系统和预编译头文件

不多说了直接上代码&#xff0c;课程中的架构讲的比较宽泛&#xff0c;而且有些方法写完之后并未测试。所以先把代码写完。理解其原理&#xff0c;未来使用时候会再此完善此博客。 文件架构&#xff1a; Event.h:核心基类 #pragma once #include"../Core.h" #inclu…

mysql建表及数据重刷对比

1. mysql 设置及优化 通过某一台安装mysql环境的机器&#xff0c;进入mysql客户端&#xff1a; mysql -h host -u root -P port -p password db_name mysql -h17.9.9.16 -uroot -P3306 -proot finger_print 注意&#xff1a;mysql时区设置的是utc&#xff0c;数据库默认字符…

JMeter使用

目录 启动JMeter 创建线程组 设置线程参数 设置http请求参数 ​编辑 创建查看结果树(显示成功/失败多少以及返回结果等信息) 创建聚合报告(显示响应时间、吞吐量、异常数等信息) 点击上方的执行按钮即可开始压力测试 结果树显示 聚合报告结果显示 启动JMeter 在JMete…

CSS-4

平面转换 整体认识 div {margin: 100px 0;width: 100px;height: 100px;background-color: pink;/* 过渡效果 */transition: all 1s;}/* 当鼠标悬停到div时&#xff0c;进行平面转换 */div:hover {transform: translate(800px) rotate(360deg) scale(2) skew(180deg);}作用&…

系统学习Python——装饰器:函数装饰器-[对方法进行装饰:使用嵌套函数装饰方法]

分类目录&#xff1a;《系统学习Python》总目录 如果想要函数装饰器在简单函数和类级别的方法上都能工作&#xff0c;最直接的解决办法在于使用前面文章介绍的状态保持方案之一&#xff1a;把自己的函数装饰器编写为嵌套的def&#xff0c;这样你就不会陷入单一的self实例参数既…