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

相关推荐
demi_meng4 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
千码君20165 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20097 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔7 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼7 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder7 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔7 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔7 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀7 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP8 小时前
Ajax 详解
java·前端·ajax·javaweb