react本質：JSX如何轉化為javascript

摘要： react中基本都使用JSX來開發，但JSX其實是javascript的一種語法糖。 什麼是語法糖？ 語法糖就是提供了一種全新的方式書寫程式碼，但是其實現原理與之前的寫法相同。 語法糖可以說是廣泛存在於各種計算機程式碼中，包括C語言中的a[i]其實就是*...

react中基本都使用JSX來開發，但JSX其實是javascript的一種語法糖。

簡單說，JSX是一種更簡便書寫javascript的方式

由於DOM結構被我們寫到了javascript檔案裡，由javascript來生成DOM結構

如果一直使用javascript來寫DOM結構，那麼render函式裡就是一堆React.createElement

這樣既不美觀也不實用。

但是我們必須知道，JSX本質上就是javascript

在編譯的時候，會由babel將JSX轉化為javascript。

比如

<div className="aaa">
<span>222</span>
<span>333</span>
</div>

生成了

"use strict";

React.createElement("div", {
className: "aaa"
}, React.createElement("span", null, "222"), React.createElement("span", null, "333"));

比如

function Comp(){
return <div className='test'>test</div>
}

<Comp className="test2">222</Comp>

生成

"use strict";

function Comp() {
return React.createElement("div", {
className: "test"
}, "test");
}

React.createElement(Comp, {
className: "test2"
}, "222");

瞭解JSX的本質，只需要記住：JSX本質就是javascript

附錄