一、React的事件處理

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

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

例如：DOM的命名：onclick

React的命名：onClick

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

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

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

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

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

React需要顯式調(diào)用e.preventDefault來阻止

2、React中事件處理函數(shù)的定義

（1）使用ES6的箭頭數(shù)

①在render函數(shù)中使用箭頭函數(shù)：

Ⅰ、優(yōu)點：不用在構(gòu)造函數(shù)中綁定this

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

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

Ⅰ、優(yōu)點：不用在構(gòu)造函數(shù)中綁定this,在render函數(shù)中調(diào)用簡單

（2）在構(gòu)造函數(shù)中進行綁定：將事件處理函數(shù)作為類的成員函數(shù)

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

①、優(yōu)點：在render函數(shù)調(diào)用時不需要重新創(chuàng)建事件處理函數(shù)

②、缺點：當事件處理很多時，構(gòu)造函數(shù)就顯的很繁瑣

（3）在render函數(shù)中綁定this

①、優(yōu)點：在調(diào)用事件處理函數(shù)時,傳參比較方便

②、缺點：每次調(diào)用render函數(shù)時都重新綁定,導(dǎo)致性能下降

（4）React中事件處理函數(shù)

幾種方式的比較

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

（5）注意事項

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

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

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

3、事件處理中的參數(shù)傳遞

（1）直接傳遞參數(shù)

①在構(gòu)造函數(shù)中給事件處理函數(shù)綁定this，調(diào)用事件處理函數(shù)時直接傳參

注意：在箭頭函數(shù)中調(diào)用事件處理函數(shù)時不需要綁定this

②在render函數(shù)中調(diào)用事件處理函數(shù)時進行this的綁定

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

4、事件流

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

    
    
    
    
    
    
    


    

    


//輸出child，parent，ancestor