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

相关推荐
艾小逗1 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇4 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
明似水5 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇5 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827525 小时前
vue中 vue.config.js反向代理
前端
Java&Develop5 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器