本文主要介紹一些關於 JSX 的知識,包括 JSX 是什麼,以及它的用途等,力求讓各位對 JSX 有一個簡單的了解

JSX 是什麼

JSX=JavaScript+XML,它看起來像是 HTML 和 JavaScript 的混合體,實際上它是一種 JavaScript 的語法擴展,用來在 React 中描述 UI 。

XML?HTML?

相信各位看到 XML 時都多多少少會想起這個名字相近的 HTML,實際上,XML 和 HTML 都是一種標記語言。但是 XML 不同於 HTML 的地方在於它擁有更嚴格的語法要求和它允許用戶自定義標籤。一般 XML 是描述數據用的,人們的關注點在於數據本身;而 HTML 更多的時候只需要顯示數據,這時人們比較關心數據的外觀而不是內容。

JSX 語法

來個最簡單直觀的例子

這個例子中 HTML 語言直接與 JavaScript 語言混用了,在實際的開發中,這可以有效的擴展 JavaScript 的語義。如果轉化成完全的 JavaScript,就應該這麼寫

簡單的說,JSX 看到 HTML 就按 HTML 來對待,看到 JavaScript 就按 JavaScript 來對待

JSX 的使用

JSX 的語法

JSX 本身就和 XML 語法類似,可以定義屬性以及子元素。唯一特殊的是可以用大括弧來加入 JavaScript 表達式,例如:

一般每個組件都定義了一組屬性(props,properties的簡寫)接收輸入參數,這些屬性通過 XML 標記的屬性來指定。大括弧中的語法就是純 JavaScript 表達式,返回值會賦予組件的對應屬性,因此可以使用任何 JavaScript 變數或者函數調用。

上述代碼經 JSX 編譯就會得到:

在 JSX 中使用事件

就像這樣

JSX 和原生 HTML 定義事件的唯一區別就是 JSX 採用駝峰寫法來描述事件名稱,大括弧中仍然是標準的 JavaScript 表達式,返回一個事件處理函數。在 JSX 中你不需要關心什麼時機去移除事件綁定,因為 React 會在對應的真實 DOM 節點移除時就自動解除了事件綁定。

在 JSX 中使用樣式

儘管在大部分場景下我們應該將樣式寫在獨立的 CSS 文件中,但是有時對於某個特定組件而言,其樣式相當簡單而且獨立,那麼也可以將其直接定義在 JSX 中。在 JSX 中使用樣式和真實的樣式也很類似,通過 style 屬性來定義,但和真實 DOM 不同的是,屬性值不能是字元串而必須為對象,例如:

裡面的大括弧只是標準的 JavaScript 對象表達式,外面的大括弧是 JSX 的語法。

在 JSX 中自定義組件

在 JSX 中,我們不僅可以使用 React 自帶 div ,  input… 這些虛擬 DOM 元素,還可以自定義組件。組件定義之後,也都可以利用XML語法去聲明,而能夠使用的 XML Tag 就是在當前 JavaScript 上下文的變數名,這一點非常好用,你不必再去考慮某個 Tag 是如何對應到相應的組件實現。

JSX 學習的技巧

1.不要將 JSX 看作是模板,而應視為需要被編譯的可替代的 JS 語法(語句)。也就是說,JSX 只是將類似 XML 的標記轉換為 JavaScript 。

2.Babel 工具是 React 團隊的主要選擇,用於將 ES *代碼和 JSX 語法轉換為 ES5 代碼。您可以通過 http://babeljs.io/ 了解更多關於Babel的信息,或閱讀Babel手冊

3.JSX 的優點有四點:

(1)技術含量較低的人仍然能夠理解和修改所需的部分。CSS 開發人員和設計人員會發現 JSX 比 JavaScript 更為熟悉。也就是說,使用 JSX 的 HTML 標記看起來像 HTML 標記,而不是 createElement() 函數的金字塔。

(2)您可以利用 HTML 中 JavaScript 的全部功能,避免學習或使用模板語言。JSX 不是模板解決方案。它是用於表示 UI 節點和組件的樹結構的聲明性語法。

(3)通過添加JSX轉換步驟,你會發現一些在HTML中你可能會忽略的錯誤。

(4)JSX 提倡內聯樣式的思想。這可能是一件好事。

4.謹防 JSX Gotchas

5.JSX 與 React 本身不同。JSX 不會試圖遵守任何 XML 或 HTML 規範。JSX 被設計為 ECMAScript 特性,並且與 XML / HTML 的相似性僅在表面上(即它看起來像 XML / HTML,因此您可以只寫一些熟悉的東西)。目前正在起草一份 JSX 規範,任何人都可以將其作為一個類似於 XML 的語法擴展到 ECMAScript,而不需要任何定義的語義。

6.在 JSX 中,<foo-bar />單獨是有效的,而<foo-bar>不是。