可能初次接触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
标签看看会生成怎样的代码。