選單

React事件初始化

事件初始化入口

在ReactDOM。js裡有引入

import

‘。/ReactDOMClientInjection’

,在這裡引入的時候執行了三個方法,也就是下面流程裡需要講到的。

事件初始化流程方法

React事件初始化

事件初始化

方法1:

EventPluginHubInjection

injectEventPluginOrder

DOMEventPluginOrder

);

這個方法其實就是給evenPluginOrder賦值,它是一個長度為

6

的陣列

React事件初始化

eventPluginOrder

方法2: setComponentTree,其實就是給getFiberCurrentPRopsFromNode, getInstanceFromNode, getNodeFromInstance賦予對應的方法

React事件初始化

setComponentTree

方法3:

EventPluginHubInjection

injectEventPluginsByName

,這裡是給

5

種plugin物件分別進行註冊,為什麼強調5,是因為它其實和方法1的eventPluginOrder對應,eventPluginOrder多一個ResponderEventPlugin。

React事件初始化

injectEventPluginsByName

在injectEventPluginsByName裡幹了2件事,一是註冊namesToPlugins,而是呼叫方法

recomputePluginOrdering

();

React事件初始化

namesToPlugins

這裡就是將5個eventPlugin註冊到namesToPlugins裡,具體裡面是啥,以SimpleEventPlugin為例,如下所示是3個物件,具體見React原始碼

React事件初始化

SimpleEventPlugin

recomputePluginOrdering方法主要執行了函式

publishEventForPlugin

React事件初始化

recomputePluginOrdering

publishEventForPlugin方法主要是註冊eventNameDispatchConfigs和執行publishRegistrationName

React事件初始化

publishEventForPlugin

React事件初始化

eventNameDispatchConfigs

eventNameDispatchConfigs主要如上面所示,這裡只是遍歷了部分事件,其它事件型別參考上面的click所示

React事件初始化

publishRegistrationName

publishRegistrationName的方法如上所示,主要是註冊了registrationNameModules, registrationNameDependencies,possibleRegistrationNames, 具體結構如下所示,其中展示的都是部分事件的結構

React事件初始化

registrationNameModules

React事件初始化

registrationNameDependencies

React事件初始化

possibleRegistrationNames

事件初始化,主要是將namesToPlugins、possibleRegistrationNames、registrationNameDependencies、publishRegistrationName、eventNameDispatchConfigs、eventPluginOrder等變數全域性初始化,在之後的事件註冊和執行時會用到