全棧React: 第2天 什么是 JSX?
本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3797
原文：https://www.fullstackreact.com/30-days-of-react/day-2/
現(xiàn)在我們知道React是什么，讓我們來(lái)看看這個(gè)系列的其余部分將會(huì)出現(xiàn)的幾個(gè)術(shù)語(yǔ)和概念。
在我們前面的文章中，我們看了一下[React]（https://facebook.github.io/react/），并在高級(jí)別上討論了它的工作原理。 在本文中，我們將介紹React生態(tài)系統(tǒng)的一部分：ES6和JSX。
## JSX/ES5/ES6 什么鬼東西??!
在互聯(lián)網(wǎng)上的任何粗略的搜索尋找React材料，毫無(wú)疑問(wèn)，你已經(jīng)遇到了術(shù)語(yǔ)JSX，ES5和ES6。這些難懂的首字母縮略詞可能會(huì)很快混亂。
ES5（ES 代表ECMAScript）基本上是“常規(guī)JavaScript”。第5次更新JavaScript，ES5在2009年完成。它已被所有主要瀏覽器支持多年。因此，如果你在最近寫過(guò)或看過(guò)任何JavaScript，很可能是ES5。
ES6是一個(gè)新版本的JavaScript，添加了一些不錯(cuò)的語(yǔ)法和功能添加。它在2015年完成。ES6 幾乎完全支持 所有主要的瀏覽器。但這將是一段時(shí)間，直到較舊版本的Web瀏覽器逐步停止使用。例如，Internet Explorer 11不支持ES6，但是具有大約12％的瀏覽器市場(chǎng)份額。
為了獲得ES6的好處今天，我們必須做一些事情，使它工作在盡可能多的瀏覽器，我們可以：
我們必須 轉(zhuǎn)換 我們的代碼，以便更廣泛的瀏覽器了解我們的JavaScript。這意味著將ES6 JavaScript轉(zhuǎn)換為ES5 JavaScript。
We have to include a shim or polyfill that provides additional functionality added in ES6 that a browser may or may not have.
我們必須包括一個(gè)墊片或polyfill，提供在ES6中添加的瀏覽器可能具有或可能沒(méi)有的附加功能。
我們將在本系列的稍后部分看到我們?nèi)绾巫龅竭@一點(diǎn)。
我們將在本系列中編寫的大多數(shù)代碼都可以輕松地轉(zhuǎn)換為ES5。在我們使用ES6的情況下，我們將首先介紹功能，然后通過(guò)它。
我們將看到，所有的React組件都有一個(gè)render函數(shù)，它指定了React組件的HTML輸出。JavaScript eXtension，或更常見(jiàn)的JSX，是一個(gè)React擴(kuò)展，允許我們編寫看起來(lái)像 HTML的JavaScript 。
盡管在以前的范例中，將JavaScript和標(biāo)記包含在同一個(gè)地方被認(rèn)為是一種不好的習(xí)慣，但是結(jié)果是將視圖與功能相結(jié)合使得對(duì)視圖的推理變得非常簡(jiǎn)單。
看看這是什么意思，想象一下，我們有一個(gè)React組件來(lái)呈現(xiàn)一個(gè)h1 HTML標(biāo)簽。JSX允許我們以非常類似于HTML的方式聲明這個(gè)元素：
class Header extends React.Component {
render() {
return (
<h1 className='large'>Hello World</h1>
);
}
}
這個(gè)HelloWorld組件中的render()函數(shù)看起來(lái)像它的返回HTML，但其實(shí)這是JSX。JSX 在運(yùn)行時(shí)被翻譯成常規(guī)JavaScript。那個(gè)組件，翻譯后，看起來(lái)像這樣：
class HelloWorld extends React.Component {
render() {
return (
React.createElement(
'h1',
{className: 'large'},
'Hello World'
)
);
}
}
雖然JSX看起來(lái)像HTML，但它實(shí)際上只是一種更靈敏的方式React.createElement()來(lái)編寫聲明。當(dāng)組件渲染時(shí)，它輸出一個(gè)React元素樹(shù)或該組件輸出的HTML元素的虛擬表示。React然后將基于此React元素表示來(lái)確定對(duì)實(shí)際DOM所做的更改。在HelloWorld組件的情況下，React寫入DOM的HTML將如下所示：
<h1 class='large'>Hello World</h1>
在
class extends我們?cè)诘谝粋€(gè)作出反應(yīng)組件使用的語(yǔ)法是ES6語(yǔ)法。它允許我們使用熟悉的面向?qū)ο髽邮骄帉憣?duì)象。
在ES6中，class語(yǔ)法可能翻譯為：
> var HelloWorld = function() {}
> Object.extends(HelloWorld, React.Component)
> HelloWorld.prototype.render = function() {}
>
因?yàn)镴SX是JavaScript，我們不能使用JavaScript保留字。這包括class和像for。
React提供了我們的屬性className。我們使用它在HelloWorld來(lái)設(shè)置我們的h1標(biāo)簽上的large 類。還有一些其他屬性，如標(biāo)簽上的屬性for為轉(zhuǎn)換htmlFor ，因?yàn)?code>for 也是保留字。當(dāng)我們開(kāi)始使用它們時(shí)，我們將看看這些。
如果我們想要編寫純JavaScript而不是依賴于JSX編譯器，我們可以只寫該React.createElement()函數(shù)，而不必?fù)?dān)心抽象層。但我們喜歡JSX。它特別是更復(fù)雜的組件可讀性。考慮下面的JSX：
<div>
<h1>Welcome back Ari</h1>
</div>
傳送到瀏覽器的JavaScript看起來(lái)像這樣：
React.createElement("div", null,
React.createElement("img", {src: "profile.jpg", alt: "Profile photo"}),
React.createElement("h1", null, "Welcome back Ari")
);
再提一下，雖然你可以跳過(guò)JSX并直接編寫后者，但JSX語(yǔ)法非常適合表示嵌套的HTML元素。
現(xiàn)在我們了解JSX，我們可以開(kāi)始編寫我們的第一個(gè)React組件。明天加入我們，當(dāng)我們跳進(jìn)我們的第一個(gè)React應(yīng)用程序。
