React16源码: React中event事件系统初始化源码实现

event 事件系统初始化


1 ）概述

  • react事件系统比较的复杂，它是基于dom的事件系统
  • 在dom事件系统上面进行了一个深度的封装
  • 它里面的很多实现逻辑都是自由的一套
  • 在初始化 react-dom 的源码的时候，会为react的事件系统注入 reactdom 相关的一些插件
  • 因为react事件系统，它有一个独立的模块，这个模块是一个公用性质的模块
  • 就是说它是可以给 react-dom 用，也可以给 react-native 用
  • 不同平台它们的事件系统可能会不一样，这个时候就对于不同的平台
  • 它们要去使用同一个 event 模块的时候，使用注入的方式来注入一些跟平台相关的逻辑在里面
  • 在这个模块，也是有一部分核心的内容是全平台通用的，这部分内容是react抽象出来的
  • 我们关注平台插件注入的一个流程，以及它插入之后到底做了什么事情
    • 首先要确定一个插件注入的顺序
      • 因为在react当中它的插件执行是会按照顺序来的
      • 如果不按顺序来，可能会出现一定的问题
    • 然后要注入插件模块
    • 最后要计算 registationNameModules 等属性
  • 在之前 completeWork 的时候，初始化 dom 节点的时候
    • 要去绑定 props 对应的 dom 的 attributes 的时候
    • 就有遇到过这个 registationNameModules 属性

2 ）源码

定位到 packages/react-dom/src/client/ReactDOM.js#L20

import './ReactDOMClientInjection';

再次定位到 packages/react-dom/src/client/ReactDOMClientInjection.js

/*** Copyright (c) Facebook, Inc. and its affiliates.** This source code is licensed under the MIT license found in the* LICENSE file in the root directory of this source tree.*/import * as EventPluginHub from 'events/EventPluginHub';
import * as EventPluginUtils 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';/*** Inject modules for resolving DOM hierarchy and plugin ordering.*/
EventPluginHub.injection.injectEventPluginOrder(DOMEventPluginOrder);
EventPluginUtils.setComponentTree(getFiberCurrentPropsFromNode,getInstanceFromNode,getNodeFromInstance,
);/*** Some important event plugins included by default (without having to require* them).*/
EventPluginHub.injection.injectEventPluginsByName({SimpleEventPlugin: SimpleEventPlugin,EnterLeaveEventPlugin: EnterLeaveEventPlugin,ChangeEventPlugin: ChangeEventPlugin,SelectEventPlugin: SelectEventPlugin,BeforeInputEventPlugin: BeforeInputEventPlugin,
});

  • 看到它 import 了一大堆的东西，后续只是调用了3个方法

    • injectEventPluginOrder
    • setComponentTree 这个先跳过
    • injectEventPluginsByName

  • 看下 EventPluginHub.injection.injectEventPluginOrder(DOMEventPluginOrder);

    • 这个 DOMEventPluginOrder
      // packages/react-dom/src/events/DOMEventPluginOrder.js
const DOMEventPluginOrder = ['ResponderEventPlugin','SimpleEventPlugin','EnterLeaveEventPlugin','ChangeEventPlugin','SelectEventPlugin','BeforeInputEventPlugin',
];export default DOMEventPluginOrder;
      • 它单纯的 export 出来了一个数组
      • 这个数组可以看到有6项，每一项都以一个 Plugin 为结尾的
      • 这些 plugin 都是在 react-dom 这个环境当中要用到的 plugin
      • 这边只是用来定义这些 plugin 它的一个顺序

  • 后续 EventPluginHub.injection.injectEventPluginsByName 这个方法的参数

    • 发现这里少了一个 ResponderEventPlugin 先不管

  • 关注下 EventPluginHub 这个模块下的 injection

    /*** Methods for injecting dependencies.*/
export const injection = {/*** @param {array} InjectedEventPluginOrder* @public*/injectEventPluginOrder,/*** @param {object} injectedNamesToPlugins Map from names to plugin modules.*/injectEventPluginsByName,
};
    • 上述内部这两个方法来自 ./EventPluginRegistry.js 进入
      /*** Injects an ordering of plugins (by plugin name). This allows the ordering
* to be decoupled from injection of the actual plugins so that ordering is
* always deterministic regardless of packaging, on-the-fly injection, etc.
*
* @param {array} InjectedEventPluginOrder
* @internal
* @see {EventPluginHub.injection.injectEventPluginOrder}
*/
export function injectEventPluginOrder(injectedEventPluginOrder: EventPluginOrder,
): void {invariant(!eventPluginOrder,'EventPluginRegistry: Cannot inject event plugin ordering more than ' +'once. You are likely trying to load more than one copy of React.',);// Clone the ordering so it cannot be dynamically mutated.// 克隆一个可动态修改的数组eventPluginOrder = Array.prototype.slice.call(injectedEventPluginOrder);recomputePluginOrdering();
}/*** Injects plugins to be used by `EventPluginHub`. The plugin names must be
* in the ordering injected by `injectEventPluginOrder`.
*
* Plugins can be injected as part of page initialization or on-the-fly.
*
* @param {object} injectedNamesToPlugins Map from names to plugin modules.
* @internal
* @see {EventPluginHub.injection.injectEventPluginsByName}
*/
export function injectEventPluginsByName(injectedNamesToPlugins: NamesToPlugins,
): void {let isOrderingDirty = false;// 遍历对象上的 pluginNamefor (const pluginName in injectedNamesToPlugins) {// 非本身拥有，则跳过if (!injectedNamesToPlugins.hasOwnProperty(pluginName)) {continue;}const pluginModule = injectedNamesToPlugins[pluginName];if (!namesToPlugins.hasOwnProperty(pluginName) ||namesToPlugins[pluginName] !== pluginModule) {invariant(!namesToPlugins[pluginName],'EventPluginRegistry: Cannot inject two different event plugins ' +'using the same name, `%s`.',pluginName,);// 重新注入 modulenamesToPlugins[pluginName] = pluginModule;isOrderingDirty = true; // 设置这个 isOrderingDirty 状态}}if (isOrderingDirty) {recomputePluginOrdering(); // 调用这个方法}
}
      • 上述 namesToPlugins 本来就是一个 空的对象
      • 进入 recomputePluginOrdering
        /*** Recomputes the plugin list using the injected plugins and plugin ordering.
*
* @private
*/
function recomputePluginOrdering(): void {if (!eventPluginOrder) {// Wait until an `eventPluginOrder` is injected.return;}// 遍历在 injectEventPluginsByName 方法中处理好的 namesToPlugins 对象for (const pluginName in namesToPlugins) {const pluginModule = namesToPlugins[pluginName];const pluginIndex = eventPluginOrder.indexOf(pluginName); // 拿到注入顺序invariant(pluginIndex > -1,'EventPluginRegistry: Cannot inject event plugins that do not exist in ' +'the plugin ordering, `%s`.',pluginName,);// plugins 初始化的时候，是一个空的数组，存在则跳过if (plugins[pluginIndex]) {continue;}invariant(pluginModule.extractEvents,'EventPluginRegistry: Event plugins must implement an `extractEvents` ' +'method, but `%s` does not.',pluginName,);// 注意，这里的 index 是从 eventPluginOrder 的顺序插入的，而非有序插入，这里可能会造成数组中的某几项为 undefinedplugins[pluginIndex] = pluginModule;const publishedEvents = pluginModule.eventTypes; // click, change, focus 等类型for (const eventName in publishedEvents) {invariant(// 注意这里publishEventForPlugin(publishedEvents[eventName], // 注意这个数据结构pluginModule,eventName,),'EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.',eventName,pluginName,);}}
}
        • 关于 eventTypes
          const eventTypes = {// 这个 对应 dom 中的真实事件，比如 change 事件 document.addEventListener('change', () => {})// 这个 change 代表 event name 存在// 这个 value 对应上面的 dispatchConfigchange: {// 事件的阶段，有冒泡和捕获 两个阶段，对应react中 使用的事件 props 名称phasedRegistrationNames: {bubbled: 'onChange',captured: 'onChangeCapture', // 这个 props 不常用，用于在绑定捕获阶段的事件监听},// 监听 change 事件的同时，需要依赖绑定下面的事件dependencies: [TOP_BLUR,TOP_CHANGE,TOP_CLICK,TOP_FOCUS,TOP_INPUT,TOP_KEY_DOWN,TOP_KEY_UP,TOP_SELECTION_CHANGE,],},
};
          • eventTypes 这个对象里面还可以再加其他事件，以上是初始化时候挂载处理的 change 事件，参考下面
        • 对于 packages/react-dom/src/events/SimpleEventPlugin.js 里面监听了大部分的常用事件
          • 在这里面 会生成一个 type, 定位到 #L143 (143行)
            function addEventTypeNameToConfig([topEvent, event]: EventTuple,isInteractive: boolean,
) {const capitalizedEvent = event[0].toUpperCase() + event.slice(1);const onEvent = 'on' + capitalizedEvent;// 注意这里const type = {phasedRegistrationNames: {bubbled: onEvent,captured: onEvent + 'Capture',},dependencies: [topEvent],isInteractive,};eventTypes[event] = type;topLevelEventsToDispatchConfig[topEvent] = type;
}
        • 进入 publishEventForPlugin
          /*** Publishes an event so that it can be dispatched by the supplied plugin.
*
* @param {object} dispatchConfig Dispatch configuration for the event.
* @param {object} PluginModule Plugin publishing the event.
* @return {boolean} True if the event was successfully published.
* @private
*/
function publishEventForPlugin(dispatchConfig: DispatchConfig,pluginModule: PluginModule<AnyNativeEvent>,eventName: string,
): boolean {invariant(!eventNameDispatchConfigs.hasOwnProperty(eventName),'EventPluginHub: More than one plugin attempted to publish the same ' +'event name, `%s`.',eventName,);// 这里 eventNameDispatchConfigs 的结构// { change: ChangeEventPlugin.eventTypes.change }eventNameDispatchConfigs[eventName] = dispatchConfig;// 获取事件 内部的 phasedRegistrationNamesconst phasedRegistrationNames = dispatchConfig.phasedRegistrationNames;if (phasedRegistrationNames) {for (const phaseName in phasedRegistrationNames) {if (phasedRegistrationNames.hasOwnProperty(phaseName)) {const phasedRegistrationName = phasedRegistrationNames[phaseName];publishRegistrationName(phasedRegistrationName,pluginModule,eventName,);}}return true;} else if (dispatchConfig.registrationName) {publishRegistrationName(dispatchConfig.registrationName,pluginModule,eventName,);return true;}return false;
}
          • 进入 publishRegistrationName
            /*** Publishes a registration name that is used to identify dispatched events.
*
* @param {string} registrationName Registration name to add.
* @param {object} PluginModule Plugin publishing the event.
* @private
*/
function publishRegistrationName(registrationName: string,pluginModule: PluginModule<AnyNativeEvent>,eventName: string,
): void {invariant(!registrationNameModules[registrationName],'EventPluginHub: More than one plugin attempted to publish the same ' +'registration name, `%s`.',registrationName,);// onChange: ChangeEventPluginregistrationNameModules[registrationName] = pluginModule;// onChange: [TOP_BLUR ...]registrationNameDependencies[registrationName] =pluginModule.eventTypes[eventName].dependencies;if (__DEV__) {const lowerCasedName = registrationName.toLowerCase();possibleRegistrationNames[lowerCasedName] = registrationName;if (registrationName === 'onDoubleClick') {possibleRegistrationNames.ondblclick = registrationName;}}
}
        • 关于 const publishedEvents = pluginModule.eventTypes; 这里，可参考 packages/react-dom/src/events/ChangeEventPlugin.js#L258
          const ChangeEventPlugin = {eventTypes: eventTypes,_isInputEventSupported: isInputEventSupported, // 这个 _isInputEventSupported 是一个私有标志位// 这个 extractEvents 是生成事件，比如 onChange 事件对应的事件对象的extractEvents: function(topLevelType,targetInst,nativeEvent,nativeEventTarget,) {const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;let getTargetInstFunc, handleEventFunc;if (shouldUseChangeEvent(targetNode)) {getTargetInstFunc = getTargetInstForChangeEvent;} else if (isTextInputElement(targetNode)) {if (isInputEventSupported) {getTargetInstFunc = getTargetInstForInputOrChangeEvent;} else {getTargetInstFunc = getTargetInstForInputEventPolyfill;handleEventFunc = handleEventsForInputEventPolyfill;}} else if (shouldUseClickEvent(targetNode)) {getTargetInstFunc = getTargetInstForClickEvent;}if (getTargetInstFunc) {const inst = getTargetInstFunc(topLevelType, targetInst);if (inst) {const event = createAndAccumulateChangeEvent(inst,nativeEvent,nativeEventTarget,);return event;}}if (handleEventFunc) {handleEventFunc(topLevelType, targetNode, targetInst);}// When blurring, set the value attribute for number inputsif (topLevelType === TOP_BLUR) {handleControlledInputBlur(targetNode);}},
};

  • 通过以上操作，插入了所有的plugin之后，形成了这边的几个变量

    • let eventPluginOrder: EventPluginOrder = null; 数据结构如下
      ['ResponderEventPlugin', 'SimpleEventPlugin', 'EnterLeaveEventPlugin', 'ChangeEventPlugin', 'SelectEventPlugin', 'BeforeInputEventPlugin'
];
    • export const plugins = []; 数据结构如下
      [{eventTypes:{},extractEvents:function,otherProps},....
]
    • export const eventNameDispatchConfigs = {};
      {click:{dependencies:['click'],phasedRegistrationNames:{bubbled: "onClick"captured: "onClickCapture"},isInteractive: true}
}
    • const namesToPlugins: NamesToPlugins = {};
      {SimpleEventPlugin:{eventTypes:{},extractEvents:function,otherProps},// ...其他插件
}
    • export const registrationNameModules = {};
      {onClick:{eventTypes:{},extractEvents:function,otherProps},...
}
    • export const registrationNameDependencies = {};
      {onClick: ["click"],onChange: ["blur", "change", "click", "focus", "input", "keydown",keyup", "selectionchange],....
}

  • 把这几个变量维护好之后，后面可以很方便的进行一些事件绑定相关的操作

  • 对于事件注入这个模块，是初始化事件的前置任务

  • 重点关注最终拿到的几个完成注册之后的变量的数据格式

  • 以上就是把整个事件的插件它注入到react事件系统当中的过程

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/662136.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

HarmonyOS4.0系统性深入开发33相对布局（RelativeContainer）

HarmonyOS4.0系统性深入开发33相对布局（RelativeContainer）

相对布局&#xff08;RelativeContainer&#xff09; 概述 RelativeContainer为采用相对布局的容器&#xff0c;支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点&#xff0c;也支持指定父容器作为锚点&#xff0c;基于锚点做相对位置布局。下图是一个…
阅读更多...
【python基础】爬虫练习

【python基础】爬虫练习

不知道大家有没有通过豆瓣网寻找一些排名较高的电影&#xff0c;反正小编基本上是顺着排名一点点找电影看。 本文将详细介绍如何使用Python爬虫抓取豆瓣网电影评论用户的观影习惯数据&#xff0c;并进行简单的数据处理和分析。 目录 一、配置环境1.1、 安装Python1.2、 安装Re…
阅读更多...
『C++成长记』string使用指南

『C++成长记』string使用指南

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;C &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、string类介绍 二、string类的常用接口说明 &#x1f4d2;2.1string类对象的常…
阅读更多...
Sg7050ccn晶体振荡器spxo规格书

Sg7050ccn晶体振荡器spxo规格书

SG7050CCN是一款CMOS输出石英晶体振荡器&#xff0c;小体积尺寸7.0x5.0mm,四脚贴片&#xff0c;额定频率2.5MHz ~ 50MHz&#xff0c;电源电压4.5V至5.5V,工作温度范围B : -20 C to 70 C / G : -40 C to 85 C C&#xff0c;具有小体积轻薄型&#xff0c;低抖动&#xff0c;低功耗…
阅读更多...
基于STM32F103C8的宠物喂食系统设计

基于STM32F103C8的宠物喂食系统设计

在撰写一篇关于基于STM32F103C8的宠物喂食系统设计的论文时&#xff0c;您需要遵循一般的科技论文结构&#xff0c;并针对您的项目提供详细的信息。以下是一个概要性的指南&#xff0c;用于帮助您组织和撰写这篇论文&#xff1a; **标题&#xff1a;** 基于STM32F103C8的智能宠…
阅读更多...
Unity打包Android，jar文件无法解析的问题

Unity打包Android，jar文件无法解析的问题

Unity打包Android&#xff0c;jar无法解析的问题 介绍解决方案总结 介绍 最近在接入语音的SDK时&#xff0c;发现的这个问题. 当我默认导入这个插件的时候&#xff0c;插件内部的文件夹&#xff08;我下面话红框的文件夹&#xff09;名字原本为GCloudVoice&#xff0c;这时候我…
阅读更多...
vit细粒度图像分类（八）SIM-Trans学习笔记

vit细粒度图像分类（八）SIM-Trans学习笔记

1.摘要 细粒度视觉分类(FGVC)旨在从相似的从属类别中识别物体&#xff0c;这对人类准确的自动识别需求具有挑战性和实用性。大多数FGVC方法侧重于判别区域挖掘的注意机制研究&#xff0c;而忽略了它们之间的相互依赖关系和组成的整体对象结构&#xff0c;而这些对模型的判别信…
阅读更多...
解锁文档处理的全新维度：ONLYOFFICE 文档开发者版

解锁文档处理的全新维度：ONLYOFFICE 文档开发者版

前言 相信大家对于 ONLYOFFICE 这款办公软件可能已经有所耳闻&#xff0c;最近因工作需要&#xff0c;我在众多办公协作工具中选择了 ONLYOFFICE&#xff0c;原因主要是它开源经济实惠&#xff0c;可以部署在自己的服务器上并且能够轻松集成到我们的平台中。在数字化信息时代&…
阅读更多...
全志R128 SDK HAL 模块开发指南之 LPUART

全志R128 SDK HAL 模块开发指南之 LPUART

模块介绍 LPUART 驱动主要实现设备驱动的底层细节&#xff0c;并为上层提供一套标准的 API 接口以供使用。 模块配置 配置路径如下: Kernel Setup --->Drivers Setup --->SoC HAL Drivers --->LPUART Devices --->[*] enable lpuart driver源码结构 LPUART 模…
阅读更多...
torch与cuda\cudnn和torchvision的对应

torch与cuda\cudnn和torchvision的对应

以上图片来源于这篇博客 于是&#xff0c;我需要手动下载0.9.0torchvision 直接在网站https://pypi.tuna.tsinghua.edu.cn/simple/后面加上torchvision&#xff0c;就不用ctrlF搜torchvision了&#xff0c;即进入下面这个网站&#xff0c;找到对应版本的包下载安装即可 https…
阅读更多...
android 音频调试技巧

android 音频调试技巧

常用命令 查看当前声卡信息 cat proc/asound/cards bengal_515:/ # cat /proc/asound/cards0 [bengalidpsndcar]: bengal-idp-snd- - bengal-idp-snd-cardbengal-idp-snd-card1 [Loopback ]: Loopback - LoopbackLoopback 1查看PCM设备列表 cat proc/asound/pcm ben…
阅读更多...
Github设置clone慢的解决方案

Github设置clone慢的解决方案

Github设置代理clone依然慢的解决方案 1、前提&#xff1a; 注意&#xff1a; 必须要有科学上网&#xff01;必须要有科学上网&#xff01;必须要有科学上网&#xff01;重要的事情说三遍&#xff1b; 2、http/https方案&#xff08;git clone时使用http&#xff09;&#x…
阅读更多...
MirrorLayer可以正常触摸屏幕原理分析

MirrorLayer可以正常触摸屏幕原理分析

背景&#xff1a; 上次blog分享了给学员朋友们布置的作业&#xff0c;今天来进行简单的揭秘。 问题&#xff1a; 在多屏互动时候有一个屏幕的画面是一个MirrorLayer&#xff0c;另一个屏幕画面是真实的&#xff0c;即2个屏幕上有一个是MirrorLayer&#xff0c;这个时候疑问就…
阅读更多...
【C++基础入门】四、程序流程结构（水仙花数、乘法口诀、七和七的倍数、随机数猜数字）

【C++基础入门】四、程序流程结构（水仙花数、乘法口诀、七和七的倍数、随机数猜数字）

四、程序流程结构 C/C支持最基本的三种程序运行结构&#xff1a;顺序结构、选择结构、循环结构 顺序结构&#xff1a;程序按顺序执行&#xff0c;不发生跳转选择结构&#xff1a;依据条件是否满足&#xff0c;有选择的执行相应功能循环结构&#xff1a;依据条件是否满足&…
阅读更多...
【Django-ninja】使用schema

【Django-ninja】使用schema

在Django Ninja中&#xff0c;"schema"主要是指帮助描述和规范你的API的工具&#xff0c;以便系统能够自动生成文档并提供验证。通俗地说&#xff0c;它有两个主要作用&#xff1a; API文档生成器&#xff1a; Schema 让 Django Ninja 能够自动生成互动式的API文档。…
阅读更多...
windows下利用verdaccio私服让npm构建速度上来

windows下利用verdaccio私服让npm构建速度上来

一.verdaccio的准备 上一篇文章&#xff0c;我写了的&#xff0c;看这里。windows下使用verdaccio构建npm私服环境-CSDN博客 二.用nrm实现npm源管理 虽然英语不好&#xff0c;我猜这个工具的缩写的意思是npm resource manage&#xff0c;哈哈。 1.安装nrm 输入npm install…
阅读更多...
探索元宇宙：未来游戏的新纪元

探索元宇宙：未来游戏的新纪元

元宇宙游戏是一种融合了虚拟现实&#xff08;VR&#xff09;、增强现实&#xff08;AR&#xff09;、人工智能&#xff08;AI&#xff09;等技术的游戏形态&#xff0c;将现实世界与虚拟世界相结合&#xff0c;创造出一个更为真实、沉浸和交互性强的游戏体验。以下是元宇宙游戏…
阅读更多...
Virtual DOM的实现原理

Virtual DOM的实现原理

Virtual DOM的实现原理 课程目标 了解什么是虚拟DOM,以及虚拟DOM的作用Snabbdom的基本使用&#xff08;Vue内部的虚拟Dom是改造了开源库Snabbdom&#xff09;Snabbdom的源码解析 在面试的时候经常会问到虚拟DOM是怎么工作的&#xff0c;通过查看Snabbdom源码&#xff0c;可以…
阅读更多...
机器学习---半监督学习（基于分岐的方法）

机器学习---半监督学习（基于分岐的方法）

1. 基于分歧的方法 与生成式方法、半监督SVM、图半监督学习等基于单学习器利用未标记数据不同&#xff0c;基于分歧的方 法(disagreement--based methods)使用多学习器&#xff0c;而学习器之间的“分歧”(disagreement)对未标记 数据的利用至关重要。 1.2 协同训练 “协同…
阅读更多...
实验一 古典密码算法的设计与实现

实验一 古典密码算法的设计与实现

✅作者简介&#xff1a;CSDN内容合伙人、信息安全专业在校大学生&#x1f3c6; &#x1f525;系列专栏 &#xff1a;简单外包单 &#x1f4c3;新人博主 &#xff1a;欢迎点赞收藏关注&#xff0c;会回访&#xff01; &#x1f4ac;舞台再大&#xff0c;你不上台&#xff0c;永远…
阅读更多...
最新文章

Copyright @ 2022~2023