【React源码学习】JSX到JavaScript的转换

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). 组件大小写区别

// 大写
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"));