【React源码解读】JSX到JavaScript的转换

时间 2019-11-11

标签 React源码解读 jsx javascript 转换栏目 JavaScript 繁體版

原文原文链接

JSX到JS的转化

https://babeljs.io/repl 代码转换jsx -> jsbabel

1).spa

<div></div>


React.createElement("div", null)

2).插件

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


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

3).code

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

目前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"));