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 以及保持隨時更新，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/178078.html
標籤：JavaScript
上一篇：vue,element串列大資料卡頓問題,vue串列渲染慢，element表格渲染慢，表格渲染慢（卡），表格全選卡
下一篇：ES6物件簡潔語法