【全棧React】第2天: 什麼是 JSX?

全棧講師_金雲龍發表於2017-08-02
全棧ReactJS

本文轉載自：眾成翻譯
譯者：iOSDevLog
連結：http://www.zcfy.cc/article/3797
原文：https://www.fullstackreact.com/30-days-of-react/day-2/

現在我們知道React是什麼，讓我們來看看這個系列的其餘部分將會出現的幾個術語和概念。

在我們前面的文章中，我們看了一下React，並在高階別上討論了它的工作原理。 在本文中，我們將介紹React生態系統的一部分：ES6和JSX。

JSX/ES5/ES6 什麼鬼東西??!

在網際網路上的任何粗略的搜尋尋找React材料，毫無疑問，你已經遇到了術語JSX，ES5和ES6。這些難懂的首字母縮略詞可能會很快混亂。

ES5（ES 代表ECMAScript）基本上是“常規JavaScript”。第5次更新JavaScript，ES5在2009年完成。它已被所有主要瀏覽器支援多年。因此，如果你在最近寫過或看過任何JavaScript，很可能是ES5。

ES6是一個新版本的JavaScript，新增了一些不錯的語法和功能新增。它在2015年完成。ES6 幾乎完全支援 所有主要的瀏覽器。但這將是一段時間，直到較舊版本的Web瀏覽器逐步停止使用。例如，Internet Explorer 11不支援ES6，但是具有大約12％的瀏覽器市場份額。

為了獲得ES6的好處今天，我們必須做一些事情，使它工作在儘可能多的瀏覽器，我們可以：

  1. 我們必須 轉換 我們的程式碼，以便更廣泛的瀏覽器瞭解我們的JavaScript。這意味著將ES6 JavaScript轉換為ES5 JavaScript。
  2. We have to include a shim or polyfill that provides additional functionality added in ES6 that a browser may or may not have.
  3. 我們必須包括一個墊片或polyfill，提供在ES6中新增的瀏覽器可能具有或可能沒有的附加功能。

我們將在本系列的稍後部分看到我們如何做到這一點。

我們將在本系列中編寫的大多數程式碼都可以輕鬆地轉換為ES5。在我們使用ES6的情況下，我們將首先介紹功能，然後通過它。

我們將看到，所有的React元件都有一個render函式，它指定了React元件的HTML輸出。JavaScript eXtension，或更常見的JSX，是一個React擴充套件，允許我們編寫看起來像 HTML的JavaScript 。

儘管在以前的範例中，將JavaScript和標記包含在同一個地方被認為是一種不好的習慣，但是結果是將檢視與功能相結合使得對檢視的推理變得非常簡單。

看看這是什麼意思，想象一下，我們有一個React元件來呈現一個h1 HTML標籤。JSX允許我們以非常類似於HTML的方式宣告這個元素：

class Header extends React.Component {
  render() {
    return (
      <h1 className=`large`>Hello World</h1>
    );
  }
}

這個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中，class 語法可能翻譯為：

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

因為JSX是JavaScript，我們不能使用JavaScript保留字。這包括class和像for。

React提供了我們的屬性className。我們使用它在HelloWorld來設定我們的h1標籤上的large 類。還有一些其他屬性，如標籤上的屬性for為轉換htmlFor ，因為for 也是保留字。當我們開始使用它們時，我們將看看這些。

如果我們想要編寫純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應用程式。

相關文章