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