react实质：JSX怎样转化为javascript

2024年2月18日 180次阅读 来源: aaron_lawliet

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/

    原文作者：aaron_lawliet
    原文地址: https://segmentfault.com/a/1190000019151871
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞