当前位置： 首页 > article >正文

React16源码: React中event事件监听绑定的源码实现

article 2025/1/19 11:05:28

event事件监听


1 ）概述

  • 在 react-dom 代码初始化的时候，去注入了平台相关的事件插件
  • 接下去在react的更新过程绑定了事件的操作，在执行到 completeWork 的时候
  • 对于 HostComponent 会一开始就先去执行了 finalizeInitialChildren 这个方法
  • 位置在 packages/react-reconciler/src/ReactFiberCompleteWork.js#L642

2 ）源码

定位到 packages/react-dom/src/client/ReactDOMHostConfig.js#L212

找到 finalizeInitialChildren

export function finalizeInitialChildren(
  domElement: Instance,
  type: string,
  props: Props,
  rootContainerInstance: Container,
  hostContext: HostContext,
): boolean {
  setInitialProperties(domElement, type, props, rootContainerInstance);
  return shouldAutoFocusHostComponent(type, props);
}

定位到 packages/react-dom/src/client/ReactDOMComponent.js#L447

找到 setInitialProperties

export function setInitialProperties(
  domElement: Element,
  tag: string,
  rawProps: Object,
  rootContainerElement: Element | Document,
): void {
  const isCustomComponentTag = isCustomComponent(tag, rawProps);
  if (__DEV__) {
    validatePropertiesInDevelopment(tag, rawProps);
    if (
      isCustomComponentTag &&
      !didWarnShadyDOM &&
      (domElement: any).shadyRoot
    ) {
      warning(
        false,
        '%s is using shady DOM. Using shady DOM with React can ' +
          'cause things to break subtly.',
        getCurrentFiberOwnerNameInDevOrNull() || 'A component',
      );
      didWarnShadyDOM = true;
    }
  }

  // TODO: Make sure that we check isMounted before firing any of these events.
  let props: Object;
  switch (tag) {
    case 'iframe':
    case 'object':
      trapBubbledEvent(TOP_LOAD, domElement);
      props = rawProps;
      break;
    case 'video':
    case 'audio':
      // Create listener for each media event
      for (let i = 0; i < mediaEventTypes.length; i++) {
        trapBubbledEvent(mediaEventTypes[i], domElement);
      }
      props = rawProps;
      break;
    case 'source':
      trapBubbledEvent(TOP_ERROR, domElement);
      props = rawProps;
      break;
    case 'img':
    case 'image':
    case 'link':
      trapBubbledEvent(TOP_ERROR, domElement);
      trapBubbledEvent(TOP_LOAD, domElement);
      props = rawProps;
      break;
    case 'form':
      trapBubbledEvent(TOP_RESET, domElement);
      trapBubbledEvent(TOP_SUBMIT, domElement);
      props = rawProps;
      break;
    case 'details':
      trapBubbledEvent(TOP_TOGGLE, domElement);
      props = rawProps;
      break;
    case 'input':
      ReactDOMInput.initWrapperState(domElement, rawProps);
      props = ReactDOMInput.getHostProps(domElement, rawProps);
      trapBubbledEvent(TOP_INVALID, domElement);
      // For controlled components we always need to ensure we're listening
      // to onChange. Even if there is no listener.
      ensureListeningTo(rootContainerElement, 'onChange');
      break;
    case 'option':
      ReactDOMOption.validateProps(domElement, rawProps);
      props = ReactDOMOption.getHostProps(domElement, rawProps);
      break;
    case 'select':
      ReactDOMSelect.initWrapperState(domElement, rawProps);
      props = ReactDOMSelect.getHostProps(domElement, rawProps);
      trapBubbledEvent(TOP_INVALID, domElement);
      // For controlled components we always need to ensure we're listening
      // to onChange. Even if there is no listener.
      ensureListeningTo(rootContainerElement, 'onChange');
      break;
    case 'textarea':
      ReactDOMTextarea.initWrapperState(domElement, rawProps);
      props = ReactDOMTextarea.getHostProps(domElement, rawProps);
      trapBubbledEvent(TOP_INVALID, domElement);
      // For controlled components we always need to ensure we're listening
      // to onChange. Even if there is no listener.
      ensureListeningTo(rootContainerElement, 'onChange');
      break;
    default:
      props = rawProps;
  }

  assertValidProps(tag, props);

  setInitialDOMProperties(
    tag,
    domElement,
    rootContainerElement,
    props,
    isCustomComponentTag,
  );

  switch (tag) {
    case 'input':
      // TODO: Make sure we check if this is still unmounted or do any clean
      // up necessary since we never stop tracking anymore.
      inputValueTracking.track((domElement: any));
      ReactDOMInput.postMountWrapper(domElement, rawProps, false);
      break;
    case 'textarea':
      // TODO: Make sure we check if this is still unmounted or do any clean
      // up necessary since we never stop tracking anymore.
      inputValueTracking.track((domElement: any));
      ReactDOMTextarea.postMountWrapper(domElement, rawProps);
      break;
    case 'option':
      ReactDOMOption.postMountWrapper(domElement, rawProps);
      break;
    case 'select':
      ReactDOMSelect.postMountWrapper(domElement, rawProps);
      break;
    default:
      if (typeof props.onClick === 'function') {
        // TODO: This cast may not be sound for SVG, MathML or custom elements.
        trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));
      }
      break;
  }
}
  • 对于 iframe, object, video, audio, source 这些多媒体节点的初始化绑定
  • 是通过 trapBubbledEvent 来实现的
  • 后续执行到 setInitialDOMProperties, 在这个方法内部
    function setInitialDOMProperties(
  tag: string,
  domElement: Element,
  rootContainerElement: Element | Document,
  nextProps: Object,
  isCustomComponentTag: boolean,
): void {
  for (const propKey in nextProps) {
    if (!nextProps.hasOwnProperty(propKey)) {
      continue;
    }
    const nextProp = nextProps[propKey];
    if (propKey === STYLE) {
      // ... 跳过很多代码
    } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
      // ... 跳过很多代码
    } else if (propKey === AUTOFOCUS) {
      // We polyfill it separately on the client during commit.
      // We could have excluded it in the property list instead of
      // adding a special case here, but then it wouldn't be emitted
      // on server rendering (but we *do* want to emit it in SSR).
      // 注意这里, propKey 是 dom 节点内的 props的配置，如果这个配置在 registrationNameModules 这里
      // registrationNameModules 是通过每一个插件里面每一个 eventTypes 里面
      // 它对应的有 phasedRegistrationNames 的情况下，比如说 onChange, onChangeCapture, 它都是作为它的一个key而存在的
      // 也就是说我们如果在这个 props 上面写了 onChange onClick 这些事件相关的props的话
      // 就会符合这个条件的判断，符合这个条件判断之后, 它会调用一个方法叫做 ensureListeningTo
    } else if (registrationNameModules.hasOwnProperty(propKey)) {
      if (nextProp != null) {
        if (__DEV__ && typeof nextProp !== 'function') {
          warnForInvalidEventListener(propKey, nextProp);
        }
        ensureListeningTo(rootContainerElement, propKey); // rootContainerElement 是 fiberRoot 对应的 container 
      }
    } else if (nextProp != null) {
     // ... 跳过很多代码
    }
  }
}
    • 进入 ensureListeningTo
      function ensureListeningTo(rootContainerElement, registrationName) {
  const isDocumentOrFragment =
    rootContainerElement.nodeType === DOCUMENT_NODE ||
    rootContainerElement.nodeType === DOCUMENT_FRAGMENT_NODE;
  // 如果它是一个document或者fragment，那么它就等于 rootContainerElement
  // 如果它不是，它就等于它的 rootContainerElement.ownerDocument
  // 这个是用来最终要去把事件绑定在哪个地方的
  // 可以确定的是在 react 当中大部分可冒泡的事件都是通过事件代理的形式来进行一个绑定的
  // 也就是说，不是每一个节点都会绑定自己的事件
  // 因为每个节点绑定自己的事件，肯定是性能比较低下的一个操作，而且有可能会导致内存溢出这种情况
  const doc = isDocumentOrFragment
    ? rootContainerElement
    : rootContainerElement.ownerDocument;
  // 调用这个方法
  listenTo(registrationName, doc);
}
      • 进入 listenTo
        // packages/react-dom/src/events/ReactBrowserEventEmitter.js#L126
export function listenTo(
  registrationName: string,
  mountAt: Document | Element,
) {
  // 注意这里
  const isListening = getListeningForDocument(mountAt);
  const dependencies = registrationNameDependencies[registrationName];

  // 遍历依赖
  for (let i = 0; i < dependencies.length; i++) {
    const dependency = dependencies[i];
    // 没有这些依赖，则对 dependency 进行事件监听处理
    if (!(isListening.hasOwnProperty(dependency) && isListening[dependency])) {
      switch (dependency) {
        case TOP_SCROLL:
          // 这个方法监听的是 捕获阶段的事件
          trapCapturedEvent(TOP_SCROLL, mountAt);
          break;
        case TOP_FOCUS:
        case TOP_BLUR:
          trapCapturedEvent(TOP_FOCUS, mountAt);
          trapCapturedEvent(TOP_BLUR, mountAt);
          // We set the flag for a single dependency later in this function,
          // but this ensures we mark both as attached rather than just one.
          isListening[TOP_BLUR] = true;
          isListening[TOP_FOCUS] = true;
          break;
        case TOP_CANCEL:
        case TOP_CLOSE:
          if (isEventSupported(getRawEventName(dependency))) {
            trapCapturedEvent(dependency, mountAt);
          }
          break;
        case TOP_INVALID:
        case TOP_SUBMIT:
        case TOP_RESET:
          // We listen to them on the target DOM elements.
          // Some of them bubble so we don't want them to fire twice.
          break;
        // 对于其他大部分的事件处理 用冒泡处理
        default:
          // By default, listen on the top level to all non-media events.
          // Media events don't bubble so adding the listener wouldn't do anything.
          const isMediaEvent = mediaEventTypes.indexOf(dependency) !== -1; 
          // 注意这里排除了 mediaEventTypes，因为一开始就已经对一些 媒体事件处理了
          if (!isMediaEvent) {
            trapBubbledEvent(dependency, mountAt); // 这是对常规事件的处理 冒泡
          }
          break;
      }
      isListening[dependency] = true;
    }
  }
}

        • 进入 getListeningForDocument

          const alreadyListeningTo = {};
let reactTopListenersCounter = 0;
// 这个属性就是用来挂载 container 节点上面去记录这个节点监听了哪些事件的
// 用这种方式判断是因为 可能不存在这个属性，如果没有，则需要初始化属性
const topListenersIDKey = '_reactListenersID' + ('' + Math.random()).slice(2);
function getListeningForDocument(mountAt: any) {
  // In IE8, `mountAt` is a host object and doesn't have `hasOwnProperty`
  // directly.
  if (!Object.prototype.hasOwnProperty.call(mountAt, topListenersIDKey)) {
    mountAt[topListenersIDKey] = reactTopListenersCounter++; // 这里初始化属性
    alreadyListeningTo[mountAt[topListenersIDKey]] = {};
  }
  // 那如果已经有了，我们就返回这个对象, 用来记录这个dom节点它是否监听了哪些事件的
  return alreadyListeningTo[mountAt[topListenersIDKey]];
}

        • 对于 mediaEventTypes 和媒体相关的事件

          // packages/react-dom/src/events/DOMTopLevelEventTypes.js#L155
export const mediaEventTypes = [
  TOP_ABORT,
  TOP_CAN_PLAY,
  TOP_CAN_PLAY_THROUGH,
  TOP_DURATION_CHANGE,
  TOP_EMPTIED,
  TOP_ENCRYPTED,
  TOP_ENDED,
  TOP_ERROR,
  TOP_LOADED_DATA,
  TOP_LOADED_METADATA,
  TOP_LOAD_START,
  TOP_PAUSE,
  TOP_PLAY,
  TOP_PLAYING,
  TOP_PROGRESS,
  TOP_RATE_CHANGE,
  TOP_SEEKED,
  TOP_SEEKING,
  TOP_STALLED,
  TOP_SUSPEND,
  TOP_TIME_UPDATE,
  TOP_VOLUME_CHANGE,
  TOP_WAITING,
];

        • 进入 trapCapturedEvent

          export function trapCapturedEvent(
  topLevelType: DOMTopLevelEventType,
  element: Document | Element,
) {
  if (!element) {
    return null;
  }
  // 注意这里，根据是否是 Interactive 类型的事件，调用的不同的回调，最终赋值给 dispatch
  const dispatch = isInteractiveTopLevelEventType(topLevelType)
    ? dispatchInteractiveEvent
    : dispatchEvent;

  addEventCaptureListener(
    element,
    getRawEventName(topLevelType),
    // Check if interactive and wrap in interactiveUpdates
    dispatch.bind(null, topLevelType),
  );
}
          • 进入 isInteractiveTopLevelEventType
            const SimpleEventPlugin: PluginModule<MouseEvent> & {
  isInteractiveTopLevelEventType: (topLevelType: TopLevelType) => boolean,
} = {
  eventTypes: eventTypes,
  // 注意这里的 topLevelEventsToDispatchConfig 一开始是一个空的对象
  // 在调用 addEventTypeNameToConfig 时候加入的
  // 这个方法是检测 
  isInteractiveTopLevelEventType(topLevelType: TopLevelType): boolean {
    const config = topLevelEventsToDispatchConfig[topLevelType];
    return config !== undefined && config.isInteractive === true;
  },
  // ... 跳过其他
}
            • 进入 addEventTypeNameToConfig
              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; // 这里进行注入
}
              • 关于这里的 isInteractive 标识的来源
                interactiveEventTypeNames.forEach(eventTuple => {
  addEventTypeNameToConfig(eventTuple, true);
});
nonInteractiveEventTypeNames.forEach(eventTuple => {
  addEventTypeNameToConfig(eventTuple, false);
});
                • 其中 interactiveEventTypeNames
                  • 参考 packages/react-dom/src/events/SimpleEventPlugin.js#L59
                • 其中 nonInteractiveEventTypeNames
                  • 参考 packages/react-dom/src/events/SimpleEventPlugin.js#L95
                • 上面两个数组对应 dom 原生的事件, 它们的区别是什么呢
                  • 这些事件去调用了设置的事件回调之后，里面如果有 setState
                  • 那么创建了update去计算的 expirationTime 会有 interactive 和 nonInteractive 的区分
                  • 它们的区别在 expirationTime，interactive的会比较的小
                  • 也就是说它的优先级会比较的高，它需要优先被执行
                  • 因为它是一个用户交互相关的事件，希望是用户比如说点了一个按钮之后
                  • 立马可以得到反馈, 因为它需要被优先执行的
          • 进入 addEventCaptureListener
            // 两者区别是第三个参数，bubble 是 false, capture 是 true
export function addEventBubbleListener(
  element: Document | Element,
  eventType: string,
  listener: Function,
): void {
  element.addEventListener(eventType, listener, false); 
}

// 注意这里
export function addEventCaptureListener(
  element: Document | Element,
  eventType: string,
  listener: Function,
): void {
  element.addEventListener(eventType, listener, true); // 主要是绑定 dom 原生事件
}

        • 同样对于 trapBubbledEvent 也同上类似，这里不再赘述


http://www.kler.cn/a/229004.html

相关文章：

  • NodeJS | 搭建本地/公网服务器 live-server 的使用与安装
  • 从 0 开始实现一个 SpringBoot + Vue 项目
  • GPT-5 传言：一场正在幕后发生的 AI 变革
  • 彻底理解JVM类加载机制
  • unity学习18：unity里的 Debug.Log相关
  • 算法面试准备 - 手撕系列第七期 - MLP(利用FashionMNIST数据集)
  • undefined symbol: _ZN5boost15program_options22error_with_option
  • 类银河恶魔城学习记录1-6 Flip基本设置源代码 P33
  • 网络原理TCP/IP（5）
  • ensp实验合集（二）
  • 创建自己的Hexo博客
  • 第8章 多线程
  • Postgresql体系结构
  • 【PTA函数题】6-2 约瑟夫环之循环链表
  • Hack The Box-Challenges-Misc-M0rsarchive
  • 【数据结构与算法】(7)基础数据结构之双端队列的链表实现、环形数组实现示例讲解
  • echarts使用之柱状图（一）
  • LeetCode--代码详解 2.两数相加
  • linux+rv1126/imx6ull：opencv静态库交叉编译（手把手百分百成功）
  • 每周AI新闻（2024年第5周）ChatGPT等多应用登陆 Vision Pro | 字节Coze国内版上线等
  • 小程序中picker多列选择器
  • Git工作中常用命令
  • 【Shell的运行原理以及Linux当中的权限问题】
  • Web后端：CSRF攻击及应对方法
  • Profinet转CANopen主站网关与堡盟编码器通讯案例
  • Spring Boot 依赖管理：spring-boot-dependencies vs spring-boot-starter-parent