react本质:JSX如何转化为javascript
栏目: JavaScript · 发布时间: 6年前
内容简介:react中基本都使用JSX来开发,但JSX其实是javascript的一种语法糖。简单说,JSX是一种更简便书写javascript的方式由于DOM结构被我们写到了javascript文件里,由javascript来生成DOM结构
react中基本都使用JSX来开发,但JSX其实是javascript的一种语法糖。
什么是语法糖?
语法糖就是提供了一种全新的方式书写代码,但是其实现原理与之前的写法相同。
语法糖可以说是广泛存在于各种计算机代码中,包括 C语言 中的a[i]其实就是*a+i的语法糖。而今天对于我们来说,a[i]其实已经很普遍和常用了,所以也没有人提这是语法糖这回事了。因为终极来说,所有语言都是汇编语言的语法糖:)
简单说,JSX是一种更简便书写javascript的方式
由于DOM结构被我们写到了javascript文件里,由javascript来生成DOM结构
如果一直使用javascript来写DOM结构,那么render函数里就是一堆React.createElement
这样既不美观也不实用。
但是我们必须知道,JSX本质上就是javascript
在编译的时候,会由babel将JSX转化为javascript。
比如
<div className="aaa">
<span>222</span>
<span>333</span>
</div>
生成了
"use strict";
React.createElement("div", {
className: "aaa"
}, React.createElement("span", null, "222"), React.createElement("span", null, "333"));
比如
function Comp(){
return <div className='test'>test</div>
}
<Comp className="test2">222</Comp>
生成
"use strict";
function Comp() {
return React.createElement("div", {
className: "test"
}, "test");
}
React.createElement(Comp, {
className: "test2"
}, "222");
了解JSX的本质,只需要记住:JSX本质就是javascript
附录
babel提供的一个在线转换JSX为javascript的地址
https://babeljs.io/repl/以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- js的类型转化三两事儿
- archTIS:将数据安全转化为经济增长
- 如何将JavaScript转化成Swift?(一)
- python3 第十章 - 如何进行进制转化
- 用Golang将图片转化成ASCII码
- 记一次bug解决过程(数字转化成中文)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
浪潮之巅(第三版)(上下册)
吴军 / 人民邮电出版社 / 2016-5 / 99.00元
一个企业的发展与崛起,绝非只是空有领导强人即可达成。任何的决策、同期的商业环境,都在都影响着企业的兴衰。《浪潮之巅》不只是一本历史书,除了讲述科技顶尖企业的发展规律,对于华尔街如何左右科技公司,以及金融风暴对科技产业的冲击,也多有着墨。此外,这本书也着力讲述很多尚在普及 或将要发生的,比如微博和云计算,以及对下一代互联网科技产业浪潮的判断和预测。因为在极度商业化的今天,科技的进步和商机是分不开的。......一起来看看 《浪潮之巅(第三版)(上下册)》 这本书的介绍吧!