一、JSX語法干了啥？
???首先同個一個例子引入JSX語法。對于一段html代碼如：
<div class="red">
<button class="btn btn-info"></button>
</div>
在javascript中怎么描述上述的代碼呢？
{
type:'div',
props:{
className:'red',
children:{
type:'button'，
props:{
className:['btn','btn-info']
}
}
}
}
描述一段html代碼，在javascript中需要使用這么繁雜的結(jié)構(gòu)。這種代碼不利于優(yōu)化，而且不利于維護(hù)。我們希望在javascript中也能夠書html代碼。因此，JSX語法由此而生。
JSX中代碼的實現(xiàn)：
const MessageBtn = () =>(
<div className="red">
<button className="btn btn-info"></button>
</div>
)
上述代碼是不是更加容易維護(hù)，實際上JSX在編譯完成后，同樣將html代碼解析成了javascript版本的代碼。只不過這份工作有能夠解析 JSX的解析器幫助我們完成了。上述代碼解析之后的源碼為：
var MessageBtn=function(){
return React.createElement(
'div',
{className:'red'},
React.createElement(
'button',
{className:'btn btn-info'},
null
)
)
}
由以上代碼可以看出，你同樣能夠用React.createElement來創(chuàng)建元素，而不用JSX語法。
二、JSX語法簡介
? ?1、JSX采用的類似XML語法的ECMAScript拓展，因此，標(biāo)簽可以任意嵌套，注意：定義標(biāo)簽時，只允許被一個標(biāo)簽包裹，標(biāo)簽一定要閉合，在使用JSX編寫時候，這兩種錯誤都會及時提示出來。對于第一種錯誤的原理請想一想轉(zhuǎn)換之后的源碼揣摩下。
? ?2、元素類型：JSX規(guī)定，以大寫字母開頭的單詞會被解析成組件，小寫的解析為dom元素
注釋： 在html中的注釋注釋，由于JSX實際上也是javascript，因此，JSX中使用{/* */}來進(jìn)行注釋，請千萬注意一定要用{}擴(kuò)起來，對于判斷IE版本的條件注釋，請使用javascript腳本判斷來替代。
? ?2、元素屬性：由于html中的class和for都是javascript中的關(guān)鍵字，因此JSX進(jìn)行了轉(zhuǎn)換，使用className替代class，受用htmlFor替代for
? ?3、布爾屬性：JSX中默認(rèn)的布爾類型的值都是true，例如<checkbox checked> 表示該 選框被選中，如果不想選中，可以這樣<checkbox checked={false}>或者不寫checked屬性
? ?4、自定義html屬性：JSX不支持自定義屬性，React也不會渲染自定義屬性，例如<div d="ssss"></div>渲染的結(jié)果為<div></div>
當(dāng)你需要使用自定義屬性的時候，應(yīng)該使用html中的自定義屬性規(guī)范，即使用data-前綴。
? ?5、JSX中使用javascript表達(dá)式：JSX中使用javascript表達(dá)式用{}替代“”即可，例如：
const person =<Person name={isLisi ? 'lisi' : 'zhangsan'} />;
? ?6、html轉(zhuǎn)義：為了防止XSS攻擊，React會將字符實體進(jìn)行轉(zhuǎn)義。您可以使用以下幾種方式進(jìn)行解決。
? ? ? ?a、直接使用utf-8的字符
? ? ? ?b、使用對應(yīng)Unicode編碼
? ? ? ?c、用數(shù)組包裝下<div>{['cc','<span>©</span>','2015xxx']}</div>
? ? ? ?d、直接使用原生的HTML
? ? ? ?e、React提供了dangerouslySetInnderhtml 方法來避免轉(zhuǎn)義。（不到萬不得已不要使用）
