[JavaScript知识库]React 合成事件的事件系统

React 合成事件的事件系统

主要包括 3 个步骤

1. 事件注册
2. 事件存储
3. 事件执行

在事件注册中
React 首先在组件创建和更新的时候，获取到对应的绑定的事件，然后将所有获取的事件注册到到 document 这个对象上,(即 document.addEventListener(‘事件名’, callback, false)，其中 callback 以 ReactEventListener.dispatchEvent.bind()形式绑定)。并通过事务队列 transaction 的方式，将注册的事件存储起来。

在事件存储中
主要有 EventPluginHub 这个对象来负责，他主要通过内部 putListener 的方法将每个事件以[事件名][对应的标识id]来存储，例如[‘click’][id]。

在事件执行中
首先在第一步注册在 document 上的注册事件的 callback 会执行并进行事件分发，内部通过 handleTopLevelImpl 方法遍历当前组件上的所有的父组件，并一次执行所有的回调方法。在此过程中通过 EventPluginHub 的 extractEvents 方法，将所有的事件进行合成，比如 focus 构造成合成事 SyntheticFocusEvent 等，然后将所有的合成事件放到队列 eventQueue 中，进行遍历处理。内部通过 executeDispatchesAndReleaseTopLevel 方法处理每个元素，此过程内部会将原生 event 对象传回，并执行对应注册的方法。