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

相关推荐
拾光拾趣录10 分钟前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲17 分钟前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃27 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军27 分钟前
React 协调器 render 阶段
前端·react.js·前端框架
中微子30 分钟前
Blob 对象及 Base64 转换指南
前端
风铃喵游30 分钟前
让大模型调用MCP服务变得超级简单
前端·人工智能
中微子32 分钟前
智能前端实践之 shot-word demo
前端
归于尽32 分钟前
智能前端小魔术,让图片开口说单词
前端·react.js
用户98738245810133 分钟前
vite 插件
前端
无数山35 分钟前
autorelease pool
前端