React源码解析(一)：JSX到javascript

使用jsx可以写类似html的标签，通过声明一个html标签，然后呢会返回一个react内识别的对象，如下：

babel转化前

<div id="div" className="div" key="div">
  <div>
    <span>2</span>
  </div>
  <span>1</span>
  <span>1</span>
</div>复制代码

转化后

"use strict";

React.createElement("div", {
    id: "div",
    className: "div",
    key: "div"
  }, 
  React.createElement("div", null, React.createElement("span", null, "2")), 
  React.createElement("span", null, "1"), React.createElement("span", null, "1")
);复制代码

组件的转化

function Comp() {
	return <div>111</div>
}

<Comp id="div" className="div" key="div">
  <span>222</span>
  <span>222</span>
</Comp>

-----------------------------------------------------------------------------------

function comp() {
	return <div>111</div>
}

<comp id="div" className="div" key="div">
  <span>222</span>
  <span>222</span>
</comp>
复制代码

转化后

"use strict";

function Comp() {
  return React.createElement("div", null, "111");
}

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

-----------------------------------------------------------------------------------
"use strict";

function comp() {
  return React.createElement("div", null, "111");
}

React.createElement('comp', {
    id: "div",
    className: "div",
    key: "div"
  }, 
  React.createElement("span", null, "222"), 
  React.createElement("span", null, "222")
);复制代码

注意：从上面的例子我们可以看到这就是为什么要求我们组件要首字母大写，因为小写它会当做一个标签来处理，最后会转化成一个字符串，然后如果没有这个标签就会报错。