脚本宝典收集整理的这篇文章主要介绍了react本质:JSX如何转化为javascript,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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/
以上是脚本宝典为你收集整理的react本质:JSX如何转化为javascript全部内容,希望文章能够帮你解决react本质:JSX如何转化为javascript所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。