1.2.2 JSX是進步還是倒退

在React出現之初，很多人對React這樣的設計非常反感，因為React把類似HTML的標記語言和JavaScript混在一起了，但是，隨著時間的推移，業界逐漸認可了這種方式，因為大家都發現，以前用HTML來代表內容，用CSS代表樣式，用JavaScript來定義交互行為，這三種語言分在三種不同的文件里面，實際上是把不同技術分開管理了，而不是邏輯上的“分而治之”。

根據做同一件事的代碼應該有高耦合性的設計原則，既然我們要實現一個ClickCounter，那為什么不把實現這個功能的所有代碼集中在一個文件里呢？

這點對于初學者可能有點難以接受，但是相信當你讀完此書后，觀點會隨之改變。

那么，在JSX中使用onClick添加事件處理函數，是否代表網頁應用開發兜了一個大圈，最終回到了起點了呢？

不是這樣，JSX的onClick事件處理方式和HTML的onclick有很大不同。

即使現在，我們還是要說在HTML中直接使用onclick很不專業，原因如下：

□ onclick添加的事件處理函數是在全局環境下執行的，這污染了全局環境，很容易產生意料不到的后果；

□ 給很多DOM元素添加onclick事件，可能會影響網頁的性能，畢竟，網頁需要的事件處理函數越多，性能就會越低；

□ 對于使用onclick的DOM元素，如果要動態地從DOM樹中刪掉的話，需要把對應的時間處理器注銷，假如忘了注銷，就可能造成內存泄露，這樣的bug很難被發現。

上面說的這些問題，在JSX中都不存在。

首先，onClick掛載的每個函數，都可以控制在組件范圍內，不會污染全局空間。

我們在JSX中看到一個組件使用了onClick，但并沒有產生直接使用onclick（注意是onclick不是onClick）的HTML，而是使用了事件委托(event delegation)的方式處理點擊事件，無論有多少個onClick出現，其實最后都只在DOM樹上添加了一個事件處理函數，掛在最頂層的DOM節點上。所有的點擊事件都被這個事件處理函數捕獲，然后根據具體組件分配給特定函數，使用事件委托的性能當然要比為每個onClick都掛載一個事件處理函數要高。

因為React控制了組件的生命周期，在unmount的時候自然能夠清除相關的所有事件處理函數，內存泄露也不再是一個問題。

除了在組件中定義交互行為，我們還可以在React組件中定義樣式，我們可以修改ClickCounter.js中的render函數，代碼如下：

render() {
  const counterStyle = {
    margin: '16px'
  }
  return (
    <div style={counterStyle}>
      <button onClick={this.onClickButton}>Click Me</button>
      <div>
      Click Count: <span id=”clickCount”>{this.state.count}</span>
      </div>
    </div>
  );
}

我們在JavaScript代碼中定義一個counterStyle對象，然后在JSX中賦值給頂層div的style屬性，可以看到網頁中這個部分的margin真的變大了。

你看，React的組件可以把JavaScript、HTML和CSS的功能在一個文件中，實現真正的組件封裝。