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

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197394.html

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 自己实现的冒泡机制。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/