react本質(zhì)：JSX如何轉(zhuǎn)化為javascript

ChanceWong 發(fā)布于2019-08-26 13:44 / 1382人閱讀

摘要：中基本都使用來開發(fā)，但其實是的一種語法糖。但是我們必須知道，本質(zhì)上就是在編譯的時候，會由將轉(zhuǎn)化為。比如生成了比如生成了解的本質(zhì)，只需要記住本質(zhì)就是附錄提供的一個在線轉(zhuǎn)換為的地址

react中基本都使用JSX來開發(fā)，但JSX其實是javascript的一種語法糖。

什么是語法糖？

語法糖就是提供了一種全新的方式書寫代碼，但是其實現(xiàn)原理與之前的寫法相同。
語法糖可以說是廣泛存在于各種計算機代碼中，包括C語言中的a[i]其實就是*a+i的語法糖。而今天對于我們來說，a[i]其實已經(jīng)很普遍和常用了，所以也沒有人提這是語法糖這回事了。因為終極來說，所有語言都是匯編語言的語法糖：）

簡單說，JSX是一種更簡便書寫javascript的方式
由于DOM結(jié)構(gòu)被我們寫到了javascript文件里，由javascript來生成DOM結(jié)構(gòu)
如果一直使用javascript來寫DOM結(jié)構(gòu)，那么render函數(shù)里就是一堆React.createElement
這樣既不美觀也不實用。

但是我們必須知道，JSX本質(zhì)上就是javascript
在編譯的時候，會由babel將JSX轉(zhuǎn)化為javascript。

比如


    222
      333

生成了

"use strict";

React.createElement("div", {
  className: "aaa"
}, React.createElement("span", null, "222"), React.createElement("span", null, "333"));

比如

function Comp(){
    return test
}

222

生成

"use strict";

function Comp() {
  return React.createElement("div", {
    className: "test"
  }, "test");
}

React.createElement(Comp, {
  className: "test2"
}, "222");

了解JSX的本質(zhì)，只需要記住：JSX本質(zhì)就是javascript

附錄

babel提供的一個在線轉(zhuǎn)換JSX為javascript的地址
https://babeljs.io/repl/