说说react中onClick绑定后的工作原理?

React使用合成事件来解决浏览器兼容性问题,提供跨平台的事件处理。它将事件注册在document上,通过组件的唯一标识存储回调函数,优化事件处理并允许干预事件分发。这种方式使得在不同浏览器中绑定如onClick等事件变得统一且高效。
摘要由CSDN通过智能技术生成
  1. 首先react有自己的事件系统,也是遵循w3c的,这个事件系统的名称叫做合成事件,而其自定义事件系统的动机主要包含一下几个方面

    • 抹平不同浏览器之间的兼容性差异。最主要的动机。
    • 件合成既可以处理兼容性问题
    • 提供一个抽象的跨平台事件机制
    • 可以做更多优化
    • 可以干预事件的分发
  2. 当给组件(元素)绑定
    onClick事件之后

  3. react会对事件先进行注册,将事件统一注册到document上

  4. 根据组件唯一的标识key来对事件函数进行存储

  5. 统一的标识dispatchEvent回调函数

  6. 储存事件回调:
    react会将click这个事件统一存到一个对象中,回调函数的存储采用键值对的方式存储在对象中,key是组件的唯一标识id,value对应的就是事件的回调函数,通过组件的key就能会调到相应的函数了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值