React事件系统
React 为了跨平台,采用动态注入的方式让不同的平台对事件核心模块进行插件注入。 在ReactDOM的入口文件,里面有这么一句代码:import './ReactDOMClientInjection'; 这就是注入的开始,这个 js 的代码如下:
typescript
import {injection as EventPluginHubInjection} from 'events/EventPluginHub';
import {setComponentTree} from 'events/EventPluginUtils';
import {
getFiberCurrentPropsFromNode,
getInstanceFromNode,
getNodeFromInstance,
} from './ReactDOMComponentTree';
import BeforeInputEventPlugin from '../events/BeforeInputEventPlugin';
import ChangeEventPlugin from '../events/ChangeEventPlugin';
import DOMEventPluginOrder from '../events/DOMEventPluginOrder';
import EnterLeaveEventPlugin from '../events/EnterLeaveEventPlugin';
import SelectEventPlugin from '../events/SelectEventPlugin';
import SimpleEventPlugin from '../events/SimpleEventPlugin';
EventPluginHubInjection.injectEventPluginOrder(DOMEventPluginOrder);
setComponentTree(
getFiberCurrentPropsFromNode,
getInstanceFromNode,
getNodeFromInstance,
);
EventPluginHubInjection.injectEventPluginsByName({
SimpleEventPlugin: SimpleEventPlugin,
EnterLeaveEventPlugin: EnterLeaveEventPlugin,
ChangeEventPlugin: ChangeEventPlugin,
SelectEventPlugin: SelectEventPlugin,
BeforeInputEventPlugin: BeforeInputEventPlugin,
});通过这两个方法向事件系统注入了平台相关的事件代码,同时确定事件的调用顺序。
- injectEventPluginOrder
- injectEventPluginsByName
插件注入后,主要是为了生成一下几个全局的变量,为后续事件的绑定和触发做铺垫
typescript
/**
* Ordered list of injected plugins.
*/
export const plugins = [];
/**
* Mapping from event name to dispatch config
*/
export const eventNameDispatchConfigs = {};
/**
* Mapping from registration name to plugin module
*/
export const registrationNameModules = {};
/**
* Mapping from registration name to event name
*/
export const registrationNameDependencies = {};