React的事件处理你了解吗_React

一、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