React（二）—— JSX

前言

如今咱們知道了 React 是什麼，讓咱們來看看本系列其他部分將會出現的一些術語和概念。

在上一篇文章中，咱們研究了 React 是什麼，並在高層討論它是如何工做的。在本文中，咱們將討論 React 生態系統的一部分：ES6 和 JSX。

JSX/ES5/ES6 WTF??!

在網上對 React 的搜索中，你必定已經遇到了 JSX, ES5 和 ES6這些術語。這些不透明的縮寫很快就會讓人混淆。

ES5（ES 表明 ECMAScript）基本上是「常規 JavaScript」。JavaScript 的第五次更新，ES5 於2009年完成。多年來，它一直受到全部主流瀏覽器的支持。所以，若是你最近編寫或看過JavaScript，那麼極可能是ES5。

ES6 是 JavaScript 的一個新版本，添加了一些很好的語法和功能。2015年定稿。ES6 幾乎徹底獲得全部主流瀏覽器的支持。可是，在舊版本瀏覽器逐步中止使用還須要一段時間。例如，IE 11 就不支持 ES6, 但擁有約12%的瀏覽器市場份額。

爲了得到 ES6 的好處，咱們必須作一些事情才能讓它在儘量多的瀏覽器中運行：

1. 咱們必須轉換代碼，以便更普遍的瀏覽器可以理解咱們的 JavaScript。這也意味着將 ES6 轉換爲 ES5。
2. 咱們必須包括一個墊片或polyfill，它提供在ES6中添加的瀏覽器可能有或沒有的附加功能。

咱們將在稍後的系列文章中看到如何實現這一點。

咱們在本系列寫的大多數代碼均可以輕鬆轉換成 ES5。在咱們使用 ES6 的狀況下，咱們將首先介紹該功能，而後逐步介紹它。

正如咱們將看到的，咱們全部的 React 組件都有一個 render 函數，它指定了 React 組件的 HTML 輸出。JavaScript eXtension, 或更常見的 JSX, 是一個 React 擴展，它容許咱們編寫相似 HTML 的 JavaScript。

儘管在以前的範例中，將 JavaScript 和標記包含在同一個地方被視爲一種壞習慣。但事實證實，將視圖和功能相結合能夠直接推理視圖。

爲了看看這意味着什麼，假設咱們有一個 React 組件，它呈現一個 h1 HTML 標記。JSX 容許咱們以一種很是相似 HTML 的方式聲明這個元素：

class HelloWorld extends React.Component {
  render() {
    return (
    	<h1 className='large'>Hello World</h1>
    )
  }
}
複製代碼

Hello World

HelloWorld 組件中的 render() 函數看起來好像返回的是 HTML, 但其實是 JSX。JSX 在運行時被轉換爲常規 JavaScript。轉換後，該組件以下所示：

class HelloWorld extends React.Component {
  render() {
    return (
    	React.createElement(
      	'h1',
        {className: 'large'},
        'Hello World'
      )
    );
  }
}
複製代碼

雖然 JSX 看起來像 HTML, 但實際上它只是 React.createElement() 聲明的更簡單寫法。當組件渲染時，它輸出一個 React 元素樹或該組件輸出的 HTML 元素的虛擬表示。而後， React 將根據這個 React 元素表示肯定對實際 DOM進行哪些更改。對於 HelloWorld 組件，React 寫入 DOM 的 HTML 將像以下所示：

<h1 class='large'>Hello World</h1>
複製代碼

在咱們第一個組件中使用的類擴展（class extends）語法是 ES6 語法。它容許咱們使用熟悉的面向對象風格來編寫對象。在 ES6 中，類語法將轉換爲：

var HelloWorld = function() {}
Object.extends(HelloWorld, React.Component)
HelloWorld.prototype.render = function(){}
複製代碼

由於 JSX 是 JavaScript，因此咱們不能使用 JavaScript保留字。這包括 class 和 for等詞 。

React 爲咱們提供了屬性 className。咱們在 HelloWorld 中使用它在 h1 標籤上設置 large 類。還有一些其餘屬性，例如標籤的 for 屬性，React 將它轉換爲 htmlFor。 當咱們使用它們時會看到這些。

若是咱們想編寫純 JavaScript 而不是依賴 JSX 編譯器，咱們能夠只編寫 React.createElement() 函數而不用擔憂抽象層。可是咱們喜歡 JSX。對於複雜組件，它更具可讀性。考慮如下 JSX：

<div>
  <img src="profile.jpg" alt="Profile photo" />
  <h1>Welcome back Ari</h1>
</div>
複製代碼

傳輸給瀏覽器的 JavaScript 以下所示：

React.createElement("div", null,
  React.createElement("img", {src: "profile.jpg", alt: "Profile photo"}),
  React.createElement("h1", null, "Welcome back Ari")
);
複製代碼

一樣，雖然能夠跳過 JSX 並直接編寫後者，可是 JSX 語法很是適合表示嵌套的 HTML 元素。

如今咱們已經瞭解了 JSX，能夠開始編寫咱們的第一個 React 組件了。當咱們進入咱們的第一個 React 應用程序時，加入咱們。

參考

這是國外關於 React 的一系列文章，爲了學習將其翻譯成中文。翻譯如有不正確的地方請指正。

原文連接： 30-days-of-react/day-2