本文介绍了JSX在React中的使用，它允许开发者在JS文件中编写类似HTML的结构。JSX实际上是语法糖，最终会被转换为JavaScript。通过Babel的repl环境，我们可以观察到JSX转换后代码的形式，其中标签转换为方法调用，属性以对象形式传递，子元素通过参数递归定义。自定义组件需首字母大写，否则会被视为原生标签。
可能初次接触React的人会惊讶于为什么可以在JS文件中写HTML的语句，例如return <div>hello</div>。
其实这种语法就是JSX，它实际上是一种语法糖。我们想“All-in-JS”，但是无奈HTML那样的标签语法更适合表示界面的结构与层次，于是人们便想出了JSX这种方法，即在JS中写标签，但是实际上最终编译时又会被转换为JavaScript。
那么，被转换成的JavaScript代码是怎样的呢？我们可以通过Babel提供的repl环境一探究竟。
从上图可以看出，从JSX转换为的JavaScript代码，有点像document.createElement方法，第一个参数都是所要创建的元素的tag值。
第二个参数就是我们传给元素的props值了，在生成的JS代码中，是以一个普通对象，以键值对的方式存在。
这个时候我们可以往div标签中再嵌入一个span标签看看会生成怎样的代码。
可以看出，新嵌入的标签转换为JavaScript后变成了第三个参数，同时这个参数也是
最低0.47元/天 解锁文章
511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
