JSX 到 JS 的轉換

在寫react代碼的時候，大部分同學應該都是寫JSX。因為相比於寫純JavaScript。寫JSX為我們去寫組件，比寫一些在JavaScript當中寫類似於html結構的這種代碼是要方便非常非常多的，他的可閱讀性，可維護性都要高很多的。那么JSX他的魔力在哪里，能夠讓我們在JS里面寫html代碼。

 

JSX相對於JavaScript來講，他的唯一的一個區別就是他可以寫類似於html的標簽。

 

https://www.babeljs.cn/repl 在這個網址寫示例

 

左邊

<div></div>

右邊

"use strict";
React.createElement("div", null);

在左邊我們聲明了html的標簽，他在右邊會返回一個我們在react當中我們需要返回的一個對象。這就是 JSX 到 JS 的一個轉換過程

我們會發現通過這種標簽寫的，他最終都會轉換成 React.createElement 。里面的標簽名，屬性，內容都會通過參數給他。

 

左邊

<div id='div' key='key'>test</div>

右邊

React.createElement("div", {
  id: "div",
  key: "key"
}, "test");

會把所有的屬性放在第二個參數，第二個參數是個對象，都會加在這個對象里面給他。第三個參數在 React 中稱為 children ，也就是標簽內容

 

如果標簽里面也有標簽

左邊

<div id='div' key='key'>
  <span>spanTest</span>
</div>

右邊

React.createElement("div", {
  id: "div",
  key: "key"
}, React.createElement("span", null, "spanTest"));

因為span他也是標簽，所有第三個參數傳內容的地方，再次將標簽轉換成 React.createElement 。

 

再復制一個節點

左邊

<div id='div' key='key'>
  <span>spanTest</span>
  <span>spanTest</span>
</div>

右邊

React.createElement("div", {
  id: "div",
  key: "key"
}, React.createElement("span", null, "spanTest"), 
React.createElement("span", null, "spanTest"));

會發現第三個以后都是節點，多少個節點，后面就多少個 React.createElement 。這就是 JSX 轉換成 JS 的樣子。在這里我們看到第一個參數是個字符串。那么如果這個不是個標簽，是個組件，他會怎么樣呢？

 

左邊

function Comp() {
    return <a>123</a>
}

<Comp id='div' key='key'>
  <span>spanTest</span>
  <span>spanTest</span>
</Comp>

右邊

function Comp() {
  return React.createElement("a", null, "123");
}

React.createElement(Comp, {
  id: "div",
  key: "key"
}, React.createElement("span", null, "spanTest"), React.createElement("span", null, "spanTest"));

這個時候發現就不再是字符串，而是以變量的方式傳遞進來。值得注意的是。在目前的babel插件里面，在轉化的過程當中，會根據大小寫判斷。小寫認為是原生的html標簽，就是以字符串的形式傳遞，如果是大寫，就認為是組件，當做變量傳遞

 

React.createElement 我們就從來不會寫到，但是我們用到的是最多的