【React源碼解讀】JSX到JavaScript的轉換

JSX到JS的轉化

https://babeljs.io/repl 代碼轉換jsx -> js

1).

<div></div>


React.createElement("div", null)

2).

<div id="div">test</div>


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

3).

<div id="div">
    <span>1</span>
    <span>1</span>
</div>


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

4). 組件大小寫區別

目前babel插件是根據首字母是否大小寫，來判斷是否字符串或者組件，自定義組件必定要寫成大寫，爲何要這樣作？

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

<Comp id="div">
    <span>1</span>
    <span>1</span>
</Comp>


"use strict";

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

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

// 小寫
function comp() {
    return <a>123</a>
}

<comp id="div">
    <span>1</span>
    <span>1</span>
</comp>


"use strict";

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

React.createElement("comp", {
  id: "div"
}, React.createElement("span", null, "1"), React.createElement("span", null, "1"));