在React中啟用了javaScript的語(yǔ)法擴(kuò)展，也就是所謂的JSX，JSX可以讓我們?cè)趈avaScript中書寫如同HTML一樣的代碼：

class AddTodo extends Component {
  render() {
    return (
      <div>
        <input type='text' ref='input' />
        <Test/>
        <button onClick={(e) => this.handleClick(e)}>
          Add
        </button>
      </div>
    )
  }
}

這是一個(gè)React組件，render包含的就是一段JSX的代碼。
跟HTML很像，像親兄弟一樣，但它們并不完全一樣，在JSX中都可以使用HTML的標(biāo)簽，但反過來(lái)就不行了。

在JSX中的元素，除了HTML標(biāo)簽之外，還可以是任何的React組件，在上面的代碼我們可以看到，代碼中有一個(gè)<Test/>組件，被直接放在了JSX的代碼中，就像直接使用HTML標(biāo)簽一樣，而HTML則只能寫入HTML標(biāo)簽。

那么React如何來(lái)確認(rèn)一個(gè)元素是React組件，還是HTML元素呢？

React判斷一個(gè)元素是HTML元素還是React組件的原則就是看第一個(gè)字母是否大寫。

在JSX中可以通過onClick給元素添加事件函數(shù)，如上代碼中<button>中的元素所示，事件的添加的方式與在HTML中寫在行間的onclick很像，但它們之間也是有區(qū)別的。

• 在HTML行間添加onclick的事件函數(shù)是在全局環(huán)境下執(zhí)行的，會(huì)污染全局環(huán)境，很容易產(chǎn)生不可預(yù)料的后果
  給過多的DOM元素添加onclick事件可能會(huì)影響網(wǎng)頁(yè)性能
• 對(duì)于使用了onclick事件的DOM元素，如果要?jiǎng)討B(tài)的從DOM樹中刪除，需要把對(duì)應(yīng)的事件注銷，如果忘了注銷可能會(huì)造成內(nèi)存泄露
• 在JSX中則不存在上述的問題，JSX中的onClick掛載的每一個(gè)方法都可以控制在組件內(nèi)部，不會(huì)污染全局變量，在JSX中使用onClick，并不是直接產(chǎn)生直接使用onclickde的HTML，而是使用了事件委托，無(wú)論出現(xiàn)了多少給onclick，其實(shí)都只在DOM樹上添加了一個(gè)事件函數(shù)，掛在最頂層的DOM節(jié)點(diǎn)上，事件委托的性能顯然是要優(yōu)于HTML的onclick的，且React可以控制組件的生命周期，在組件卸載時(shí)可以清除相關(guān)的事件函數(shù)，內(nèi)存泄露也不再是一個(gè)問題。