1.合成事件的绑定方式
react事件的绑定方式在写法上与原生的html事件监听器属性很相似,并且含义和触发场景也都完全一致。
2.合成事件的实现机制
在react的底层,对合成事件主要做了两件事:事件委派和自动绑定
1).事件委派
事件委派并不会把事件处理函数直接绑定到真实的节点上,而是把所有事件绑定到结构的最外层,使用一个统一的事件监听器。
2)自动绑定
在react组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前组件
绑定方法:
<1>,bind方法,这个方法可以帮助我们绑定事件处理器内的this,并可以向事件处理器中传递参数
<2>,构造器内声明。在组件的构造器内完成了this的绑定。这种绑定方式的好处在于仅需要一次绑定,而不需要每次调用事件监听器时去执行绑定。
<3>,箭头函数
箭头函数不仅是函数的"语法糖",它还自动绑定了定义此函数作用域的this,因此我们不需要再对它使用bind方法,
在react中使用DOM原生事件时,一定要在组件卸载时手动删除,否则很可能出现内存泄漏的问题。而使用合成事件系统时则不需要,因为react内部已经帮你妥善处理好了。
4.
网友评论