在React中啟用了javaScript的語法擴展韭赘，也就是所謂的JSX归形，JSX可以讓我們在javaScript中書寫如同HTML一樣的代碼：
class AddTodo extends Component {
render() {
return (
<div>
<input type='text' ref='input' />
<Test/>
<button onClick={(e) => this.handleClick(e)}>
Add
</button>
</div>
)
}
}
這是一個React組件邮府，render包含的就是一段JSX的代碼单默。
跟HTML很像抛猖，像親兄弟一樣魏颓，但它們并不完全一樣岭辣，在JSX中都可以使用HTML的標(biāo)簽，但反過來就不行了甸饱。
在JSX中的元素沦童，除了HTML標(biāo)簽之外仑濒，還可以是任何的React組件，在上面的代碼我們可以看到偷遗，代碼中有一個<Test/>組件墩瞳，被直接放在了JSX的代碼中悲幅，就像直接使用HTML標(biāo)簽一樣熬甚，而HTML則只能寫入HTML標(biāo)簽。
那么React如何來確認(rèn)一個元素是React組件鹿霸，還是HTML元素呢泵喘？
React判斷一個元素是HTML元素還是React組件的原則就是看第一個字母是否大寫泪电。
在JSX中可以通過onClick給元素添加事件函數(shù)，如上代碼中<button>中的元素所示涣旨，事件的添加的方式與在HTML中寫在行間的onclick很像歪架，但它們之間也是有區(qū)別的。
- 在HTML行間添加onclick的事件函數(shù)是在全局環(huán)境下執(zhí)行的霹陡，會污染全局環(huán)境和蚪，很容易產(chǎn)生不可預(yù)料的后果
給過多的DOM元素添加onclick事件可能會影響網(wǎng)頁性能- 對于使用了onclick事件的DOM元素，如果要動態(tài)的從DOM樹中刪除烹棉，需要把對應(yīng)的事件注銷攒霹，如果忘了注銷可能會造成內(nèi)存泄露
- 在JSX中則不存在上述的問題，JSX中的onClick掛載的每一個方法都可以控制在組件內(nèi)部浆洗，不會污染全局變量催束，在JSX中使用onClick，并不是直接產(chǎn)生直接使用onclickde的HTML伏社，而是使用了事件委托抠刺，無論出現(xiàn)了多少給onclick，其實都只在DOM樹上添加了一個事件函數(shù)摘昌，掛在最頂層的DOM節(jié)點上速妖，事件委托的性能顯然是要優(yōu)于HTML的onclick的，且React可以控制組件的生命周期聪黎，在組件卸載時可以清除相關(guān)的事件函數(shù)罕容，內(nèi)存泄露也不再是一個問題。
