先看一下JSX的常見寫法
<script type="text/babel">
const ele = <h2>Hello React!</h2>
ReactDOM.render(ele, document.getElementById("app"));
</script>
JSX是語法糖，通過babel轉(zhuǎn)成React.createElement函數(shù)，在babel官網(wǎng)上可以在線把JSX轉(zhuǎn)成React的JS語法
JSX語法糖
script標(biāo)簽中不添加text/babel解析jsx語法的情況下：
<script>
const ele = React.createElement("h2", null, "Hello React!");
ReactDOM.render(ele, document.getElementById("app"));
</script>
JSX的本質(zhì)是React.createElement()函數(shù)
最后一個參數(shù)并未寫成可變參數(shù)的形式，為什么可以傳入多個參數(shù)呢？
把右側(cè)React的代碼格式化一下：
/*#__PURE__ 根元素div*/
React.createElement("div", null,
/*第一個子元素，header*/
React.createElement("div", { className: "header" },
React.createElement("h1", { title:"\u6807\u9898"}, "\u6211\u662F\u6807\u9898")
),
/*第二個子元素，content*/
React.createElement("div", { className: "content" },
React.createElement("h2", null, "\u6211\u662F\u9875\u9762\u7684\u5185\u5BB9"),
React.createElement("button", null, "\u6309\u94AE"),
React.createElement("button", null, "+1"),
React.createElement("a", { href: "http://www.baidu.com" },
"\u767E\u5EA6\u4E00\u4E0B")
),
/*第三個子元素，footer*/
React.createElement("div", { className: "footer" },
React.createElement("p", null, "\u6211\u662F\u5C3E\u90E8\u7684\u5185\u5BB9")
)
);
根元素中有三個子元素，第二個子元素中也有4個子元素，所以function createElement(type, config, children) {}中的children是對應(yīng)是多個參數(shù)，類似可變參數(shù)的寫法。
React實際處理是怎樣的呢？
事實上，JavaScript中參數(shù)在函數(shù)內(nèi)部是以一個數(shù)組表示的，函數(shù)接收的始終是一個數(shù)組，可以通過
arguments[n]來獲取對應(yīng)的參數(shù)。當(dāng)傳入多個參數(shù)時，通過獲取第三個以及以后參數(shù)。
createElement函數(shù)返回的對象是ReactEelement對象。
createElement的寫法如下
class App extends React.Component {
constructor() {
super()
this.state = {}
}
render() {
return React.createElement("div", null,
/*第一個子元素，header*/
React.createElement("div", { className: "header" },
React.createElement("h1", { title: "\u6807\u9898" }, "\u6211\u662F\u6807\u9898")
),
/*第二個子元素，content*/
React.createElement("div", { className: "content" },
React.createElement("h2", null, "\u6211\u662F\u9875\u9762\u7684\u5185\u5BB9"),
React.createElement("button", null, "\u6309\u94AE"),
React.createElement("button", null, "+1"),
React.createElement("a", { href: "http://www.baidu.com" },
"\u767E\u5EA6\u4E00\u4E0B")
),
/*第三個子元素，footer*/
React.createElement("div", { className: "footer" },
React.createElement("p", null, "\u6211\u662F\u5C3E\u90E8\u7684\u5185\u5BB9")
)
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
實際開發(fā)中不會使用createElement來創(chuàng)建ReactElement的，一般都是使用JSX的形式開發(fā)。
ReactElement在程序中打印一下
render() {
let ele = (
<div>
<div className="header">
<h1 title="標(biāo)題">我是標(biāo)題</h1>
</div>
<div className="content">
<h2>我是頁面的內(nèi)容</h2>
<button>按鈕</button>
<button>+1</button>
<a >百度一下</a>
</div>
<div className="footer">
<p>我是尾部的內(nèi)容</p>
</div>
</div>
)
console.log(ele);
return ele;
}
react通過babel把JSX轉(zhuǎn)成createElement函數(shù)，生成ReactElement對象，然后通過ReactDOM.render函數(shù)把ReactElement渲染成真是的DOM元素
