2.5　事件處理

在BBS應用中的點贊功能已經涉及React中的事件處理，本節將詳細介紹如何在React中處理事件。在React元素中綁定事件有兩點需要注意：

（1）在React中，事件的命名采用駝峰命名方式，而不是DOM元素中的小寫字母命名方式。例如，onclick要寫成onClick，onchange要寫成onChange等。

（2）處理事件的響應函數要以對象的形式賦值給事件屬性，而不是DOM中的字符串形式。例如，在DOM中綁定一個點擊事件這樣寫：

而在React元素中綁定一個點擊事件變成這種形式：

React中的事件是合成事件，并不是原生的DOM事件。React根據W3C規范定義了一套兼容各個瀏覽器的事件對象。在DOM事件中，可以通過處理函數返回false來阻止事件的默認行為，但在React事件中，必須顯式地調用事件對象的preventDefault方法來阻止事件的默認行為。除了這一點外，DOM事件和React事件在使用上并無差別。如果在某些場景下必須使用DOM提供的原生事件，可以通過React事件對象的nativeEvent屬性獲取。

其實，在React組件中處理事件最容易出錯的地方是事件處理函數中this的指向問題，因為ES 6 class并不會為方法自動綁定this到當前對象。React事件處理函數的寫法主要有三種方式，不同的寫法解決this指向問題的方式也不同。

1．使用箭頭函數

直接在React元素中采用箭頭函數定義事件的處理函數，例如：

因為箭頭函數中的this指向的是函數定義時的對象，所以可以保證this總是指向當前組件的實例對象。當事件處理邏輯比較復雜時，如果把所有的邏輯直接寫在onClick的大括號內，就會導致render函數變得臃腫，不容易直觀地看出組件的UI結構，代碼可讀性也不好。這時，可以把邏輯封裝成組件的一個方法，然后在箭頭函數中調用這個方法。代碼如下：

直接在render方法中為元素事件定義事件處理函數，最大的問題是，每次render調用時，都會重新創建一個新的事件處理函數，帶來額外的性能開銷，組件所處層級越低，這種開銷就越大，因為任何一個上層組件的變化都可能會觸發這個組件的render方法。當然，在大多數情況下，這點性能損失是可以不必在意的。

2．使用組件方法

直接將組件的方法賦值給元素的事件屬性，同時在類的構造函數中，將這個方法的this綁定到當前對象。例如：

這種方式的好處是每次render不會重新創建一個回調函數，沒有額外的性能損失。但在構造函數中，為事件處理函數綁定this，尤其是存在多個事件處理函數需要綁定時，這種模板式的代碼還是會顯得煩瑣。

有些開發者還習慣在為元素的事件屬性賦值時，同時為事件處理函數綁定this，例如：

使用bind會創建一個新的函數，因此這種寫法依然存在每次render都會創建一個新函數的問題。但在需要為處理函數傳遞額外參數時，這種寫法就有了用武之地。例如，下面的例子需要為handleClick傳入參數item：

3．屬性初始化語法（property initializer syntax）

使用ES 7的property initializers會自動為class中定義的方法綁定this。例如：

這種方式既不需要在構造函數中手動綁定this，也不需要擔心組件重復渲染導致的函數重復創建問題。但是，property initializers這個特性還處于試驗階段，默認是不支持的。不過，使用官方腳手架Create React App創建的項目默認是支持這個特性的。你也可以自行在項目中引入babel的transform-class-properties插件獲取這個特性支持。