浅谈JSX随着三四月份的过去，发现今年前端面试react的知识点更加多了，面试react，就始终绕不开一个话题就是JSX

随着三四月份的过去，发现今年前端面试react的知识点更加多了，面试react，就始终绕不开一个话题就是JSX，那么今天就聊聊JSX的特点。

什么是JSX

还是先聊聊什么是JSX吧，它是一种JavaScript的语法扩展，首先运用于React中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。以React创建元素为例，具体格式如下：

React.createElement('h1', null, 'Hello, world!');

创建一个h1标签：

<h1>Hello, world!</h1>

JSX特点

按照上面的案例来开，JSX在开发的过程当中，并没有提供很大的优势，反倒是编写起来难度更大了,那么JSX的特点或者说优点有哪呢，还是从大家耳熟能详的三点来聊吧：

1、JSX本身是不可以执行的，需要编译成JS脚本执行，编译的过程当中会有一个代码优化的过程，尤其对于新入行前端小伙伴来说，JSX脚本的效率会高一些，以React渲染为例：

（1）通过babel插件将JSX模板编译成react_element

jsx 模板

<div>
     <TextComponent />
     <div>JSX 渲染</div>
     jsx 渲染案例
</div>

React Element形式

React.createElement('div', null, 
    React.createElement(TextComponent,null),
    React.createElement('div',null,'JSX 渲染'),
    'jsx 渲染案例'               
);

（2）优化js代码

react.createElement 将react element 对象转换成 js element 对象，但是在这个过程当中并不是单单的转换，在这个过程当中也对div嵌套的元素进行了规范化，因为div嵌套的元素有我们自定义的TextComponent标签，还有html的div元素，更有文本，所以在转换的过程当中对数组进行了规范化，这样后续的处理会方便很多。（好多小伙伴会说扁平化，但是在这个案例里面，我们没有创建多余嵌套的标签元素，所以没有进行扁平化。至于规范化的具体操作我们之后再聊，这里只是大概的举例。）

2、JSX是静态类型的（变量有类型，在声明之后，只能同等类型的值修改，不可以传入其他类型的值），类型安全，在编译过程当中可以发现错误。

3、开发效率更高，这个不可以和简单的html案例来比较，而是和js来比较，并且比较的是含有html格式的渲染数据，比如,react 的这段还有判断的代码，如果使用JS，代码量就会多很多：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="root"></div>
        <script>
            var i = "启用"
            ReactDOM.render(
                <div>
                  <h1>{i == "启用" ? '停用!' : '启用'}</h1>
                </div>
                document.getElementById('root')
            );
        </script>
    </body>
</html>

当然，在最后还是要重复强调一下，浏览器只能解析JS，JSX需要编译成JS，浏览器才可以使用。聊的不多，还是欢迎各位大佬多多指点。