JSX簡介

“JSX”

JSX就是Javascript和XML結合的一種格式。是一個 JavaScript 的語法擴展。

React發明瞭JSX，利用HTML語法來創建虛擬DOM。當遇到<，JSX就當HTML解析，遇到{就當JavaScript解析。

JSX，是一個 JavaScript 的語法擴展。JSX 可以很好地描述 UI 應該呈現出它應有交互的本質形式。

JSX 僅僅只是 React.createElement(component, props, ...children) 函數的語法糖

JSX將XML語法直接加入JS中,通過代碼而非模板來高效的定義界面。之後JSX通過翻譯器轉換為純JS再由瀏覽器執行。在實際開發中，JSX在產品打包階段都已經編譯成純JavaScript，JSX的語法不會帶來任何性能影響。另外，由於JSX只是一種語法，因此JavaScript的關鍵字class, for等也不能出現在XML中，而要如例子中所示，使用className, htmlFor代替，這和原生DOM在JavaScript中的創建也是一致的。JSX只是創建虛擬DOM的一種語法格式而已,除了用JSX,我們也可以用JS代碼來創建虛擬DOM.

“JSX表示對象”

Babel 會把 JSX 轉譯成一個名為 React.createElement() 函數調用。

1 const element = (
2   <h1 className="greeting">
3     Hello, world!
4   </h1>
5 );

　等效

1 const element = React.createElement(
2   'h1',
3   {className: 'greeting'},
4   'Hello, world!'
5 );

React.createElement() 會預先執行一些檢查，以幫助你編寫無錯代碼，但實際上它創建了一個這樣的對象：

1 // 註意：這是簡化過的結構
2 const element = {
3   type: 'h1',
4   props: {
5     className: 'greeting',
6     children: 'Hello, world!'
7   }
8 };

這些對象被稱為 “React 元素”。它們描述了你希望在屏幕上看到的內容。React 通過讀取這些對象，然後使用它們來構建 DOM 以及保持隨時更新。