React如何实现自己的事件机制?
React事件并没有绑定在真实的 Dom
节点上,而是通过事件代理,在最外层的 document
上对事件进行统一分发。
组件挂载、更新时:
- 通过
lastProps
、nextProps
判断是否新增、删除事件分别调用事件注册、卸载方法。 - 调用
EventPluginHub
的enqueuePutListener
进行事件存储 - 获取
document
对象。 - 根据事件名称(如
onClick
、onCaptureClick
)判断是进行冒泡还是捕获。 - 判断是否存在
addEventListener
方法,否则使用attachEvent
(兼容IE)。 - 给
document
注册原生事件回调为dispatchEvent
(统一的事件分发机制)。
事件初始化:
EventPluginHub
负责管理React
合成事件的callback
,它将callback
存储在listenerBank
中,另外还存储了负责合成事件的Plugin
。- 获取绑定事件的元素的唯一标识
key
。 - 将 callback根据事件类型,元素的唯一标识
key
存储在listenerBank
中。 listenerBank
的结构是:listenerBank[registrationName][key]
。
触发事件时:
- 触发
document
注册原生事件的回调dispatchEvent
- 获取到触发这个事件最深一级的元素
- 遍历这个元素的所有父元素,依次对每一级元素进行处理。
- 构造合成事件。
- 将每一级的合成事件存储在
eventQueue
事件队列中。 - 遍历
eventQueue
。 - 通过
isPropagationStopped
判断当前事件是否执行了阻止冒泡方法。 - 如果阻止了冒泡,停止遍历,否则通过
executeDispatch
执行合成事件。 - 释放处理完成的事件。
React在自己的合成事件中重写了
stopPropagation
方法,将isPropagationStopped
设置为true
,然后在遍历每一级事件的过程中根据此遍历判断是否继续执行。这就是 React自己实现的冒泡机制。
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » React如何实现自己的事件机制?
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » React如何实现自己的事件机制?