React如何实现自己的事件机制?

React 事件并没有绑定在真实的 Dom节点上,而是通过事件代理,在最外层的 document上对事件进行统一分发。

React 如何实现自己的事件机制?

组件挂载、更新时:

  • 通过 lastPropsnextProps判断是否新增、删除事件分别调用事件注册、卸载方法。
  • 调用 EventPluginHubenqueuePutListener进行事件存储
  • 获取 document对象。
  • 根据事件名称(如 onClickonCaptureClick)判断是进行冒泡还是捕获。
  • 判断是否存在 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 自己实现的冒泡机制。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » React如何实现自己的事件机制?

发表回复