事件初始化入口
在ReactDOM。js裡有引入
import
‘。/ReactDOMClientInjection’
;
,在這裡引入的時候執行了三個方法,也就是下面流程裡需要講到的。
事件初始化流程方法
事件初始化
方法1:
EventPluginHubInjection
。
injectEventPluginOrder
(
DOMEventPluginOrder
);
這個方法其實就是給evenPluginOrder賦值,它是一個長度為
6
的陣列
eventPluginOrder
方法2: setComponentTree,其實就是給getFiberCurrentPRopsFromNode, getInstanceFromNode, getNodeFromInstance賦予對應的方法
setComponentTree
方法3:
EventPluginHubInjection
。
injectEventPluginsByName
,這裡是給
5
種plugin物件分別進行註冊,為什麼強調5,是因為它其實和方法1的eventPluginOrder對應,eventPluginOrder多一個ResponderEventPlugin。
injectEventPluginsByName
在injectEventPluginsByName裡幹了2件事,一是註冊namesToPlugins,而是呼叫方法
recomputePluginOrdering
();
namesToPlugins
這裡就是將5個eventPlugin註冊到namesToPlugins裡,具體裡面是啥,以SimpleEventPlugin為例,如下所示是3個物件,具體見React原始碼
SimpleEventPlugin
recomputePluginOrdering方法主要執行了函式
publishEventForPlugin
recomputePluginOrdering
publishEventForPlugin方法主要是註冊eventNameDispatchConfigs和執行publishRegistrationName
publishEventForPlugin
eventNameDispatchConfigs
eventNameDispatchConfigs主要如上面所示,這裡只是遍歷了部分事件,其它事件型別參考上面的click所示
publishRegistrationName
publishRegistrationName的方法如上所示,主要是註冊了registrationNameModules, registrationNameDependencies,possibleRegistrationNames, 具體結構如下所示,其中展示的都是部分事件的結構
registrationNameModules
registrationNameDependencies
possibleRegistrationNames
事件初始化,主要是將namesToPlugins、possibleRegistrationNames、registrationNameDependencies、publishRegistrationName、eventNameDispatchConfigs、eventPluginOrder等變數全域性初始化,在之後的事件註冊和執行時會用到