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

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

回答思路: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编写:

javascript 复制代码
function App(){
    return <h1>123</h1>
}    

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

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

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

相关推荐
Mintopia6 分钟前
🌐 数据合规框架下的 WebAIGC 训练数据处理技术规范
前端·javascript·aigc
骥龙25 分钟前
2.6、Web漏洞挖掘实战(下):XSS、文件上传与逻辑漏洞深度解析
前端·xss
用户66006766853933 分钟前
从 var 到 let/const:JavaScript 变量声明的进化之路
javascript
用户4338453756934 分钟前
Promise深度解析,以及简易版的手写实现
前端
十年_H35 分钟前
Cesium自定义着色器-片元着色器数据来源
javascript·cesium
梦之云36 分钟前
state 状态相关
前端
梦之云40 分钟前
effect 副作用相关
前端
UIUV43 分钟前
var、let 与 const:JavaScript 变量声明的演进与最佳实践
javascript
golang学习记1 小时前
从0死磕全栈之Next.js 生产环境优化最佳实践
前端
Mintopia1 小时前
🧠 Next.js 还是 Nuxt.js?——当 JavaScript 碰上命运的分叉路
前端·后端·全栈