We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
* Overview of React and the event system: * * +------------+ . * | DOM | . * +------------+ . * | . * v . * +------------+ . * | ReactEvent | . * | Listener | . * +------------+ . +-----------+ * | . +--------+|SimpleEvent| * | . | |Plugin | * +-----|------+ . v +-----------+ * | | | . +--------------+ +------------+ * | +-----------.--->|EventPluginHub| | Event | * | | . | | +-----------+ | Propagators| * | ReactEvent | . | | |TapEvent | |------------| * | Emitter | . | |<---+|Plugin | |other plugin| * | | . | | +-----------+ | utilities | * | +-----------.--->| | +------------+ * | | | . +--------------+ * +-----|------+ . ^ +-----------+ * | . | |Enter/Leave| * + . +-------+|Plugin | * +-------------+ . +-----------+ * | application | . * |-------------| . * | | . * | | . * +-------------+ . * . * React Core . General Purpose Event Plugin System */
//已注册插件的有序列表。 var plugins = []; // event name 到dispatch config的映射 var eventNameDispatchConfigs = {}; //registration name 到 event name的映射 var registrationNameDependencies = {}; //注册名对应的插件 registrationNameModules // 事件名对应的dispatchConfig eventNameDispatchConfigs //注册名对应的原生事件名 registrationNameDependencies
事件插件可以实现以下属性
这是用于安装和配置事件插件的统一接口
var injection = { injectEventPluginOrder: injectEventPluginOrder, //插件注入顺序 injectEventPluginsByName: injectEventPluginsByName //从名称到插件模块的映射。 }; injection.injectEventPluginOrder(DOMEventPluginOrder); injection.injectEventPluginsByName({ SimpleEventPlugin: SimpleEventPlugin, EnterLeaveEventPlugin: EnterLeaveEventPlugin, ChangeEventPlugin: ChangeEventPlugin, SelectEventPlugin: SelectEventPlugin, BeforeInputEventPlugin: BeforeInputEventPlugin });
事件注入顺序
[ "ResponderEventPlugin", "SimpleEventPlugin", "EnterLeaveEventPlugin", "ChangeEventPlugin", "SelectEventPlugin", "BeforeInputEventPlugin" ]
在安装事件的过程中,会按照预定顺序重新计算,将插件装入plugins对应的位置,在这个过程中, ,并遍历当前插件的eventTypes执行 publishEventForPlugin方法。
//一下三种映射关系 //事件名对应的dispatchConfig eventNameDispatchConfigs[eventName] = dispatchConfig; //注册名对应的插件 registrationNameModules[registrationName] = pluginModule; //注册名对应的原生事件名 registrationNameDependencies[registrationName] = pluginModule.eventTypes[eventName].dependencies;
{ dependencies: ["click"] isInteractive: true phasedRegistrationNames:{ bubbled: "onClick" captured: "onClickCapture" } }
pluginModule:{ eventTypes:{ click:{ dependencies: ["click"] isInteractive: true phasedRegistrationNames:{ bubbled: "onClick" captured: "onClickCapture" } } .... }, extractEvents:f,//方法 isInteractiveTopLevelEventType:f }
附图 各事件插件和eventTypes的数据结构
React 启动之后的事件初始化就到这里结束了。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
React 事件概览
React 事件机制特点
事件相关的全局变量
事件插件
事件插件可以实现以下属性
每个插件都要注入到EventsPluginHub
这是用于安装和配置事件插件的统一接口
事件注入顺序
在安装事件的过程中,会按照预定顺序重新计算,将插件装入plugins对应的位置,在这个过程中, ,并遍历当前插件的eventTypes执行
publishEventForPlugin方法。
publishEventForPlugin方法主要职责
dispatchConfig
pluginModule
附图 各事件插件和eventTypes的数据结构
React 启动之后的事件初始化就到这里结束了。
The text was updated successfully, but these errors were encountered: