2.1　JSX

2.1.1　JSX簡介

JSX是一種用于描述UI的JavaScript擴展語法，React使用這種語法描述組件的UI。

長期以來，UI和數據分離一直是前端領域的一個重要關注點。為了解決這個問題，前端領域發明了模板，將UI的定義放入模板文件，將數據的邏輯維護在JS代碼中，然后通過模板引擎，根據數據和模板文件渲染出最終的HTML文件或代碼片段。大部分前端框架都實現了自己的模板，要使用這些模板，必須學習它們各自的模板語法，而且對于復雜的UI，模板語法也很難對其進行清晰的描述。

React致力于通過組件的概念將頁面進行拆分并實現組件復用。React認為，一個組件應該是具備UI描述和UI數據的完整體，不應該將它們分開處理，于是發明了JSX，作為UI描述和UI數據之間的橋梁。這樣，在組件內部可以使用類似HTML的標簽描述組件的UI，讓UI結構直觀清晰，同時因為JSX本質上仍然是JavaScript，所以可以使用更多的JS語法，構建更加復雜的UI結構。

2.1.2　JSX語法

1．基本語法

JSX的基本語法和XML語法相同，都是使用成對的標簽構成一個樹狀結構的數據，例如：

2．標簽類型

在JSX語法中，使用的標簽類型有兩種：DOM類型的標簽（div、span等）和React組件類型的標簽（在2.2節詳細介紹組件的概念）。當使用DOM類型的標簽時，標簽的首字母必須小寫；當使用React組件類型的標簽時，組件名稱的首字母必須大寫。React正是通過首字母的大小寫判斷渲染的是一個DOM類型的標簽還是一個React組件類型的標簽。例如：

3．JavaScript表達式

JSX可以使用JavaScript表達式，因為JSX本質上仍然是JavaScript。在JSX中使用JavaScript表達式需要將表達式用大括號“{}”包起來。表達式在JSX中的使用場景主要有兩個：通過表達式給標簽屬性賦值和通過表達式定義子組件。例如：

注意，JSX中只能使用JavaScript表達式，而不能使用多行JavaScript語句。例如，下面的寫法都是錯誤的：

不過，JSX中可以使用三目運算符或邏輯與（&&）運算符代替if語句的作用。例如：

4．標簽屬性

當JSX標簽是DOM類型的標簽時，對應DOM標簽支持的屬性JSX也支持，例如id、class、style、onclick等。但是，部分屬性的名稱會有所改變，主要的變化有：class要寫成className，事件屬性名采用駝峰格式，例如onclick要寫成onClick。原因是，class是JavaScript的關鍵字，所以改成className；React對DOM標簽支持的事件重新做了封裝，封裝時采用了更常用的駝峰命名法命名事件。例如：

當JSX標簽是React組件類型時，可以任意自定義標簽的屬性名。例如：

5．注釋

JSX中的注釋需要用大括號“{}”將/**/包裹起來。例如：

2.1.3　JSX不是必需的

JSX語法對使用React來說并不是必需的，實際上，JSX語法只是React.createElement(component, props, ...children)的語法糖，所有的JSX語法最終都會被轉換成對這個方法的調用。例如：

雖然JSX只是一個語法糖，但使用它創建界面元素更加清晰簡潔，在項目使用中應該首選JSX語法。