使用JSX的注意事項

react中JSX是一種JavaScript + xml語法，用來建立虛擬DOM和聲明組件。他能夠更好的讓咱們讀、寫模板或組件。

JSX語法瀏覽器是不識別的，須要經過babel 來進行轉換成瀏覽器識別的代碼

JSX將虛擬DOM轉換爲真實DOM原理：

一、會基於babel-react-preset語法包，把 jsx變爲React.createElement這種模式

二、經過createElement這個方法的執行生成一個對象（虛擬DOM對象）

{ key:null, ref:null, props:{}, type:'div' ... }

三、基於react-dom中render方法，把建立的JSX對象放到指定的容器中

//ReactDOM.render([JSX對象]，[容器]，[回調])

JSX的優點：

一、JSX執行更快
二、更安全，編譯時能及時發現錯誤
三、JSX 編寫模板更加簡單快速

JSX的注意事項：

一、使用JSX時要引入React庫

二、jsx語法中只能有一個頂級標籤（元素）

三、使用組件時，首字母必須大寫

四、樣式中 class, 寫成 className

五、全部元素標籤必須閉合（尤爲單標籤）

六、jsx表達式不能使用if else（可使用三元運算符）

七、在JSX中一般經過{} 的方式插入值，但設置style屬性須要{{ }}

八、註釋方式

ReactDOM.render( <div> {/*JSX 中的註釋方式*/} </div>,
    document.getElementById('root') )

九、表單設置value默認值 要使用兩種方式解決

//一、給表單元素加事件onChange（受控組件）

<input value="1" onChange={(ev)=>{}}/>

//二、定義默認值使用 defaultValue（非受控組件）

<input value="1" defaultValue="1">

表單元素若是設置一個默認值（基於state中狀態）

十、JSX中的花括號{}

1) 能夠聽任意js代碼 //與vue區別，vue{{}} react {}
2) {}會默認展開數組 好比[1,2,3,4] 打印出的 是 1234
3) 註釋 {/**/} 在花括號裏面註釋 4) {}還能夠聲明函數，但不能直接調用 5) 輸出數據時候，賦值給某個元素屬性 //好比 value={a}
6） 設置style也用{}，裏面可放對象 //好比style={{width:'200px','height:100px'}}