2018-10-23react事件系统

1.合成事件的绑定方式

react事件的绑定方式在写法上与原生的html事件监听器属性很相似,并且含义和触发场景也都完全一致。

2.合成事件的实现机制

在react的底层,对合成事件主要做了两件事:事件委派和自动绑定

    1).事件委派

事件委派并不会把事件处理函数直接绑定到真实的节点上,而是把所有事件绑定到结构的最外层,使用一个统一的事件监听器。

    2)自动绑定

在react组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前组件

绑定方法:

<1>,bind方法,这个方法可以帮助我们绑定事件处理器内的this,并可以向事件处理器中传递参数

<2>,构造器内声明。在组件的构造器内完成了this的绑定。这种绑定方式的好处在于仅需要一次绑定,而不需要每次调用事件监听器时去执行绑定。

<3>,箭头函数

箭头函数不仅是函数的"语法糖",它还自动绑定了定义此函数作用域的this,因此我们不需要再对它使用bind方法,


在react中使用DOM原生事件时,一定要在组件卸载时手动删除,否则很可能出现内存泄漏的问题。而使用合成事件系统时则不需要,因为react内部已经帮你妥善处理好了。

4.

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,009评论 3 119
  • 最近来后台找梦厂玩的小伙伴都有一个烦恼。那就是不知道中午吃什么,尤其是辛苦的上班族们,外卖坑爹,自带不便,下馆子又...
    吃喝梦工厂阅读 4,851评论 10 60
  • 根据《小虫虫的异想生活》改编。 在一个美丽的花园里,有一只小蜜蜂,她的名字叫阿美。她住在一个很小很小的房子里,房...
    燕倚东风一缕寒阅读 1,284评论 0 0
  • 【6+不问结果】数理思维营打卡D2 1、先用规格玩了一会小火车轨道,一人摆松子,一人摆小馒头,造相遇。相遇之后吃掉...
    阿房故事会阅读 127评论 0 0
  • 一 微信推出小程序了,年初的微信公开课上张小龙就说了这个想法,现在被坐实,只是换了一个名字。内测号只有200个,想...
    点点寒彬阅读 523评论 0 0