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

2024-01-02 06:01:49

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

文章来源:https://blog.csdn.net/laowang357/article/details/135330642
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。