react本质:JSX如何转化为javascript

时间: 2019-05-12阅读: 136标签: jsx

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/

来自;https://segmentfault.com/a/1190000019151871


fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全