一、React的事件處理

1、與DOM事件處理的不同之處

（1）React事件的命名方式：小駝峰方式，DOM的命名方式是小寫

例如：DOM的命名：onclick

React的命名：onClick

（2）事件處理函數是以對象的方式賦值,而不是以字符串的方式賦值

例如：DOM以字符串方式：onclick = "handleClick()"

React以對象方式：onClick = { handleClick }

（3）阻止默認事件的方式不同

DOM通過返回false來阻止： 百度

React需要顯式調用e.preventDefault來阻止

2、React中事件處理函數的定義

（1）使用ES6的箭頭數

①在render函數中使用箭頭函數：

Ⅰ、優點：不用在構造函數中綁定this

Ⅱ、缺點：當函數的邏輯比較復雜時,render就顯得臃腫,無法直觀的看到組件的UI結構,代碼可讀性差

②使用class fields語法：將箭頭函數賦給類的屬性

Ⅰ、優點：不用在構造函數中綁定this,在render函數中調用簡單

（2）在構造函數中進行綁定：將事件處理函數作為類的成員函數

注意：在定義事件處理函數時,是無法識別this(即this是undefined的),必須在構造函數中綁定this

①、優點：在render函數調用時不需要重新創建事件處理函數

②、缺點：當事件處理很多時，構造函數就顯的很繁瑣

（3）在render函數中綁定this

①、優點：在調用事件處理函數時,傳參比較方便

②、缺點：每次調用render函數時都重新綁定,導致性能下降

（4）React中事件處理函數

幾種方式的比較

影響constructor函數中bind使用class fields語法render中使用箭頭函數render中使用bindrender時生成新函數否否是是性能無影響無影響有影響有影響可直接攜帶參數否否是是簡潔性不好好好好

（5）注意事項

①React事件的命名采用小駝峰式（camelCase），而不是純小寫。且事件名稱之后不能加（），否則會直接執行

②不能通過返回false的方式阻止默認行為，必須顯示的使用preventDefault

③必須謹慎對待JXS回調函數中的this，在JavaScript中，class（類）的方法默認不會綁定this。如果忘記綁定this.textChange并把它傳入onChange，當調用這個函數的時候，this的值為undefined。如果覺得使用bind麻煩，還可以使用箭頭函數。

3、事件處理中的參數傳遞

（1）直接傳遞參數

①在構造函數中給事件處理函數綁定this，調用事件處理函數時直接傳參

注意：在箭頭函數中調用事件處理函數時不需要綁定this

②在render函數中調用事件處理函數時進行this的綁定

（2）在定義UI控件時使用data自定義屬性，在事件處理函數中通過'e.target.dataset.屬性名'來獲取UI控件中的data屬性值

4、事件流

（1）React的事件流默認是冒泡

    
    
    
    
    
    
    


    

    


//輸出child，parent，ancestor