JSX到JavaScript的转换

布满荆棘的人生 2021-10-30 02:38 426阅读 0赞

可能初次接触React的人会惊讶于为什么可以在JS文件中写HTML的语句，例如`return <div>hello</div>`。

其实这种语法就是JSX，它实际上是一种语法糖。我们想“All-in-JS”，但是无奈HTML那样的标签语法**更适合表示界面的结构与层次**，于是人们便想出了JSX这种方法，即在JS中写标签，但是实际上最终编译时又会被转换为JavaScript。

那么，被转换成的JavaScript代码是怎样的呢？我们可以通过[Babel提供的repl环境][Babel_repl]一探究竟。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]

从上图可以看出，从JSX转换为的JavaScript代码，有点像`document.createElement`方法，第一个参数都是所要创建的元素的`tag`值。

**第二个参数就是我们传给元素的props值了，在生成的JS代码中，是以一个普通对象，以键值对的方式存在**。

这个时候我们可以往`div`标签中再嵌入一个`span`标签看看会生成怎样的代码。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 1]

可以看出，新嵌入的标签转换为JavaScript后变成了第三个参数，同时这个参数也是递归定义的。

如果我们往`div`标签内嵌入多个标签，结果就是参数会相应的增加。**在`React.createElement`内，会把从第三个参数开始的之后所有参数放进一个数组，然后作为父元素的`children`来处理**。

--------------------

学习React的时候都知道，若要使用自己定义的组件必须首字母大写，至于原因我们也能从转换后的JavaScript代码中看出。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 2]

我首先定义了一个`Foo`组件并将其嵌入`div`标签中，**可以看见`Foo`组件所对应的`React.createElement`方法的第一个参数不是一个字符串而是`Foo`组件本身**。

若我将`Foo`改成`foo`，则第一个参数会变回字符串"foo"。

目前的Babel是将首字母是否是大写作为判断自定义组件的依据。**大写的就是自定义组件，小写的则是原生标签**。

[Babel_repl]: https://babeljs.io/repl/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: /images/20211029/a821902809d34a3f8001aceb139ca0f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 1]: /images/20211029/a0879e1463b74dd08104b09b0838c4a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 2]: /images/20211029/979ebd8385cd4b5883d87af9cb823a78.png