• 【React源码】(十六)React 合成事件

    React 合成事件

    概览

    从v17.0.0开始, React 不会再将事件处理添加到 document 上, 而是将事件处理添加到渲染 React 树的根 DOM 容器中.

    引入官方提供的图片:

    图中清晰的展示了v17.0.0的改动, 无论是在document还是根 DOM 容器上监听事件, 都可以归为事件委托(代理)(mdn).

    注意: react的事件体系, 不是全部都通过事件委托来实现的. 有一些特殊情况, 是直接绑定到对应 DOM 元素上的(如:scroll, load), 它们都通过listenToNonDelegatedEvent函数进行绑定.

    上述特殊事件最大的不同是监听的 DOM 元素不同, 除此之外, 其他地方的实现与正常事件大体一致.

    本节讨论的是可以被根 DOM 容器代理的正常事件.

    事件绑定

    在前文React 应用的启动过程中介绍了React在启动时会创建全局对象, 其中在创建fiberRoot对象时, 调用createRootImpl:

     

    1. function createRootImpl(
    3. container: Container,
    5. tag: RootTag,
    7. options: void | RootOptions,
    9. ) {
    10.  
    11. // ... 省略无关代码
    12.  
    13. if (enableEagerRootListeners) {
    14.  
    15. const rootContainerElement =
    16.  
    17. container.nodeType === COMMENT_NODE ? container.parentNode : container;
    18.  
    19. listenToAllSupportedEvents(rootContainerElement);
    20.  
    21. }
    22.  
    23. // ... 省略无关代码
    24.  
    25. }
     

    listenToAllSupportedEvents函数, 实际上完成了事件代理:
     

     

    1. // ... 省略无关代码
    2.  
    3. export function listenToAllSupportedEvents(rootContainerElement: EventTarget) {
    4.  
    5. if (enableEagerRootListeners) {
    6.  
    7. // 1. 节流优化, 保证全局注册只被调用一次
    8.  
    9. if ((rootContainerElement: any)[listeningMarker]) {
    10.  
    11. return;
    12.  
    13. }
    14.  
    15. (rootContainerElement: any)[listeningMarker] = true;
    16.  
    17. // 2. 遍历allNativeEvents 监听冒泡和捕获阶段的事件
    18.  
    19. allNativeEvents.forEach(domEventName => {
    20.  
    21. if (!nonDelegatedEvents.has(domEventName)) {
    22.  
    23. listenToNativeEvent(
    24.  
    25. domEventName,
    26.  
    27. false, // 冒泡阶段监听
    28.  
    29. ((rootContainerElement: any): Element),
    30.  
    31. null,
    32.  
    33. );
    34.  
    35. }
    36.  
    37. listenToNativeEvent(
    38.  
    39. domEventName,
    40.  
    41. true, // 捕获阶段监听
    42.  
    43. ((rootContainerElement: any): Element),
    44.  
    45. null,
    46.  
    47. );
    48.  
    49. });
    50.  
    51. }
    52.  
    53. }
     

    核心逻辑:
     

    1. 节流优化, 保证全局注册只被调用一次.
    2. 遍历allNativeEvents, 调用listenToNativeEvent监听冒泡和捕获阶段的事件. 
  
      • allNativeEvents包括了大量的原生事件名称, 它是在DOMPluginEventSystem.js中被初始化
     

    listenToNativeEvent:
     

     

    1. // ... 省略无关代码
    2.  
    3. export function listenToNativeEvent(
    5. domEventName: DOMEventName,
    7. isCapturePhaseListener: boolean,
    9. rootContainerElement: EventTarget,
    11. targetElement: Element | null,
    13. eventSystemFlags?: EventSystemFlags = 0,
    15. ): void {
    16.  
    17. let target = rootContainerElement;
    18.  
    19. const listenerSet = getEventListenerSet(target);
    20.  
    21. const listenerSetKey = getListenerSetKey(
    22.  
    23. domEventName,
    24.  
    25. isCapturePhaseListener,
    26.  
    27. );
    28.  
    29. // 利用set数据结构, 保证相同的事件类型只会被注册一次.
    30.  
    31. if (!listenerSet.has(listenerSetKey)) {
    32.  
    33. if (isCapturePhaseListener) {
    34.  
    35. eventSystemFlags |= IS_CAPTURE_PHASE;
    36.  
    37. }
    38.  
    39. // 注册事件监听
    40.  
    41. addTrappedEventListener(
    42.  
    43. target,
    44.  
    45. domEventName,
    46.  
    47. eventSystemFlags,
    48.  
    49. isCapturePhaseListener,
    50.  
    51. );
    52.  
    53. listenerSet.add(listenerSetKey);
    54.  
    55. }
    56.  
    57. }
     

    addTrappedEventListener:
     

     

    1. // ... 省略无关代码
    2.  
    3. function addTrappedEventListener(
    5. targetContainer: EventTarget,
    7. domEventName: DOMEventName,
    9. eventSystemFlags: EventSystemFlags,
    11. isCapturePhaseListener: boolean,
    13. isDeferredListenerForLegacyFBSupport?: boolean,
    15. ) {
    16.  
    17. // 1. 构造listener
    18.  
    19. let listener = createEventListenerWrapperWithPriority(
    20.  
    21. targetContainer,
    22.  
    23. domEventName,
    24.  
    25. eventSystemFlags,
    26.  
    27. );
    28.  
    29. let unsubscribeListener;
    30.  
    31. // 2. 注册事件监听
    32.  
    33. if (isCapturePhaseListener) {
    34.  
    35. unsubscribeListener = addEventCaptureListener(
    36.  
    37. targetContainer,
    38.  
    39. domEventName,
    40.  
    41. listener,
    42.  
    43. );
    44.  
    45. } else {
    46.  
    47. unsubscribeListener = addEventBubbleListener(
    48.  
    49. targetContainer,
    50.  
    51. domEventName,
    52.  
    53. listener,
    54.  
    55. );
    56.  
    57. }
    58.  
    59. }
    60.  
    61. // 注册原生事件 冒泡
    62.  
    63. export function addEventBubbleListener(
    65. target: EventTarget,
    67. eventType: string,
    69. listener: Function,
    71. ): Function {
    72.  
    73. target.addEventListener(eventType, listener, false);
    74.  
    75. return listener;
    76.  
    77. }
    78.  
    79. // 注册原生事件 捕获
    80.  
    81. export function addEventCaptureListener(
    83. target: EventTarget,
    85. eventType: string,
    87. listener: Function,
    89. ): Function {
    90.  
    91. target.addEventListener(eventType, listener, true);
    92.  
    93. return listener;
    94.  
    95. }
     

    从listenToAllSupportedEvents开始, 调用链路比较长, 最后调用addEventBubbleListener和addEventCaptureListener监听了原生事件.
     

    原生 listener
     

    在注册原生事件的过程中, 需要重点关注一下监听函数, 即listener函数. 它实现了把原生事件派发到react体系之内, 非常关键.
     

     
 
    比如点击 DOM 触发原生事件, 原生事件最后会被派发到react内部的onClick函数. listener函数就是这个由外至内的关键环节.
     

     

    listener是通过createEventListenerWrapperWithPriority函数产生:
     

     

    1. export function createEventListenerWrapperWithPriority(
    3. targetContainer: EventTarget,
    5. domEventName: DOMEventName,
    7. eventSystemFlags: EventSystemFlags,
    9. ): Function {
    10.  
    11. // 1. 根据优先级设置 listenerWrapper
    12.  
    13. const eventPriority = getEventPriorityForPluginSystem(domEventName);
    14.  
    15. let listenerWrapper;
    16.  
    17. switch (eventPriority) {
    18.  
    19. case DiscreteEvent:
    20.  
    21. listenerWrapper = dispatchDiscreteEvent;
    22.  
    23. break;
    24.  
    25. case UserBlockingEvent:
    26.  
    27. listenerWrapper = dispatchUserBlockingUpdate;
    28.  
    29. break;
    30.  
    31. case ContinuousEvent:
    32.  
    33. default:
    34.  
    35. listenerWrapper = dispatchEvent;
    36.  
    37. break;
    38.  
    39. }
    40.  
    41. // 2. 返回 listenerWrapper
    42.  
    43. return listenerWrapper.bind(
    44.  
    45. null,
    46.  
    47. domEventName,
    48.  
    49. eventSystemFlags,
    50.  
    51. targetContainer,
    52.  
    53. );
    54.  
    55. }
     

    可以看到, 不同的domEventName调用getEventPriorityForPluginSystem后返回不同的优先级, 最终会有 3 种情况:
     

    1. DiscreteEvent: 优先级最高, 包括click, keyDown, input等事件, 源码 
  
    2. UserBlockingEvent: 优先级适中, 包括drag, scroll等事件, 源码 
  
    3. ContinuousEvent: 优先级最低,包括animation, load等事件, 源码 
  
     

    这 3 种listener实际上都是对dispatchEvent的包装:
     

     

    1. // ...省略无关代码
    2.  
    3. export function dispatchEvent(
    5. domEventName: DOMEventName,
    7. eventSystemFlags: EventSystemFlags,
    9. targetContainer: EventTarget,
    11. nativeEvent: AnyNativeEvent,
    13. ): void {
    14.  
    15. if (!_enabled) {
    16.  
    17. return;
    18.  
    19. }
    20.  
    21. const blockedOn = attemptToDispatchEvent(
    22.  
    23. domEventName,
    24.  
    25. eventSystemFlags,
    26.  
    27. targetContainer,
    28.  
    29. nativeEvent,
    30.  
    31. );
    32.  
    33. }
     

    事件触发
     

    当原生事件触发之后, 首先会进入到dispatchEvent这个回调函数. 而dispatchEvent函数是react事件体系中最关键的函数, 其调用链路较长, 核心步骤如图所示:
     

     

    重点关注其中 3 个核心环节:
     

    1. attemptToDispatchEvent
    2. SimpleEventPlugin.extractEvents
    3. processDispatchQueue
     

    关联 fiber
     

    attemptToDispatchEvent把原生事件和fiber树关联起来.
     

     

    1. export function attemptToDispatchEvent(
    3. domEventName: DOMEventName,
    5. eventSystemFlags: EventSystemFlags,
    7. targetContainer: EventTarget,
    9. nativeEvent: AnyNativeEvent,
    11. ): null | Container | SuspenseInstance {
    12.  
    13. // ...省略无关代码
    14.  
    15. // 1. 定位原生DOM节点
    16.  
    17. const nativeEventTarget = getEventTarget(nativeEvent);
    18.  
    19. // 2. 获取与DOM节点对应的fiber节点
    20.  
    21. let targetInst = getClosestInstanceFromNode(nativeEventTarget);
    22.  
    23. // 3. 通过插件系统, 派发事件
    24.  
    25. dispatchEventForPluginEventSystem(
    26.  
    27. domEventName,
    28.  
    29. eventSystemFlags,
    30.  
    31. nativeEvent,
    32.  
    33. targetInst,
    34.  
    35. targetContainer,
    36.  
    37. );
    38.  
    39. return null;
    40.  
    41. }
     

    核心逻辑:
     

    1. 定位原生 DOM 节点: 调用getEventTarget
    2. 获取与 DOM 节点对应的 fiber 节点: 调用getClosestInstanceFromNode
    3. 通过插件系统, 派发事件: 调用 dispatchEventForPluginEventSystem
     

    收集 fiber 上的 listener
     

    dispatchEvent函数的调用链路中, 通过不同的插件, 处理不同的事件. 其中最常见的事件都会由SimpleEventPlugin.extractEvents进行处理:
     

     

    1. function extractEvents(
    3. dispatchQueue: DispatchQueue,
    5. domEventName: DOMEventName,
    7. targetInst: null | Fiber,
    9. nativeEvent: AnyNativeEvent,
    11. nativeEventTarget: null | EventTarget,
    13. eventSystemFlags: EventSystemFlags,
    15. targetContainer: EventTarget,
    17. ): void {
    18.  
    19. const reactName = topLevelEventsToReactNames.get(domEventName);
    20.  
    21. if (reactName === undefined) {
    22.  
    23. return;
    24.  
    25. }
    26.  
    27. let SyntheticEventCtor = SyntheticEvent;
    28.  
    29. let reactEventType: string = domEventName;
    30.  
    31. const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
    32.  
    33. const accumulateTargetOnly = !inCapturePhase && domEventName === 'scroll';
    34.  
    35. // 1. 收集所有监听该事件的函数.
    36.  
    37. const listeners = accumulateSinglePhaseListeners(
    38.  
    39. targetInst,
    40.  
    41. reactName,
    42.  
    43. nativeEvent.type,
    44.  
    45. inCapturePhase,
    46.  
    47. accumulateTargetOnly,
    48.  
    49. );
    50.  
    51. if (listeners.length > 0) {
    52.  
    53. // 2. 构造合成事件, 添加到派发队列
    54.  
    55. const event = new SyntheticEventCtor(
    56.  
    57. reactName,
    58.  
    59. reactEventType,
    60.  
    61. null,
    62.  
    63. nativeEvent,
    64.  
    65. nativeEventTarget,
    66.  
    67. );
    68.  
    69. dispatchQueue.push({ event, listeners });
    70.  
    71. }
    72.  
    73. }
     

    核心逻辑:
     

    1.  
      收集所有listener回调
       
  
      •  
        这里的是fiber.memoizedProps.onClick/onClickCapture等绑定在fiber节点上的回调函数
         
      •  
        具体逻辑在accumulateSinglePhaseListeners:
         
         
        1. export function accumulateSinglePhaseListeners(
        3. targetFiber: Fiber | null,
        5. reactName: string | null,
        7. nativeEventType: string,
        9. inCapturePhase: boolean,
        11. accumulateTargetOnly: boolean,
        13. ): Array<DispatchListener> {
        14.  
        15. const captureName = reactName !== null ? reactName + 'Capture' : null;
        16.  
        17. const reactEventName = inCapturePhase ? captureName : reactName;
        18.  
        19. const listeners: Array<DispatchListener> = [];
        20.  
        21. let instance = targetFiber;
        22.  
        23. let lastHostComponent = null;
        24.  
        25. // 从targetFiber开始, 向上遍历, 直到 root 为止
        26.  
        27. while (instance !== null) {
        28.  
        29. const { stateNode, tag } = instance;
        30.  
        31. // 当节点类型是HostComponent时(如: div, span, button等类型)
        32.  
        33. if (tag === HostComponent && stateNode !== null) {
        34.  
        35. lastHostComponent = stateNode;
        36.  
        37. if (reactEventName !== null) {
        38.  
        39. // 获取标准的监听函数 (如onClick , onClickCapture等)
        40.  
        41. const listener = getListener(instance, reactEventName);
        42.  
        43. if (listener != null) {
        44.  
        45. listeners.push(
        46.  
        47. createDispatchListener(instance, listener, lastHostComponent),
        48.  
        49. );
        50.  
        51. }
        52.  
        53. }
        54.  
        55. }
        56.  
        57. // 如果只收集目标节点, 则不用向上遍历, 直接退出
        58.  
        59. if (accumulateTargetOnly) {
        60.  
        61. break;
        62.  
        63. }
        64.  
        65. instance = instance.return;
        66.  
        67. }
        68.  
        69. return listeners;
        70.  
        71. }
         
         
    2.  
      构造合成事件(SyntheticEvent), 添加到派发队列(dispatchQueue)
       
     

    构造合成事件
     

    SyntheticEvent, 是react内部创建的一个对象, 是原生事件的跨浏览器包装器, 拥有和浏览器原生事件相同的接口(stopPropagation,preventDefault), 抹平不同浏览器 api 的差异, 兼容性好.
     

    具体的构造过程并不复杂, 可以直接查看源码.
     

    此处我们需要知道, 在Plugin.extractEvents过程中, 遍历fiber树找到listener之后, 就会创建SyntheticEvent, 加入到dispatchQueue中, 等待派发.
     

    执行派发
     

    extractEvents完成之后, 逻辑来到processDispatchQueue, 终于要真正执行派发了.
     

     

    1. export function processDispatchQueue(
    3. dispatchQueue: DispatchQueue,
    5. eventSystemFlags: EventSystemFlags,
    7. ): void {
    8.  
    9. const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
    10.  
    11. for (let i = 0; i < dispatchQueue.length; i++) {
    12.  
    13. const { event, listeners } = dispatchQueue[i];
    14.  
    15. processDispatchQueueItemsInOrder(event, listeners, inCapturePhase);
    16.  
    17. }
    18.  
    19. // ...省略无关代码
    20.  
    21. }
    22.  
    23. function processDispatchQueueItemsInOrder(
    25. event: ReactSyntheticEvent,
    27. dispatchListeners: Array,
    29. inCapturePhase: boolean,
    31. ): void {
    32.  
    33. let previousInstance;
    34.  
    35. if (inCapturePhase) {
    36.  
    37. // 1. capture事件: 倒序遍历listeners
    38.  
    39. for (let i = dispatchListeners.length - 1; i >= 0; i--) {
    40.  
    41. const { instance, currentTarget, listener } = dispatchListeners[i];
    42.  
    43. if (instance !== previousInstance && event.isPropagationStopped()) {
    44.  
    45. return;
    46.  
    47. }
    48.  
    49. executeDispatch(event, listener, currentTarget);
    50.  
    51. previousInstance = instance;
    52.  
    53. }
    54.  
    55. } else {
    56.  
    57. // 2. bubble事件: 顺序遍历listeners
    58.  
    59. for (let i = 0; i < dispatchListeners.length; i++) {
    60.  
    61. const { instance, currentTarget, listener } = dispatchListeners[i];
    62.  
    63. if (instance !== previousInstance && event.isPropagationStopped()) {
    64.  
    65. return;
    66.  
    67. }
    68.  
    69. executeDispatch(event, listener, currentTarget);
    70.  
    71. previousInstance = instance;
    72.  
    73. }
    74.  
    75. }
    76.  
    77. }
     

    在processDispatchQueueItemsInOrder遍历dispatchListeners数组, 执行executeDispatch派发事件, 在fiber节点上绑定的listener函数被执行.
     

    在processDispatchQueueItemsInOrder函数中, 根据捕获(capture)或冒泡(bubble)的不同, 采取了不同的遍历方式:
     

    1. capture事件: 从上至下调用fiber树中绑定的回调函数, 所以倒序遍历dispatchListeners.
    2. bubble事件: 从下至上调用fiber树中绑定的回调函数, 所以顺序遍历dispatchListeners.
     

    总结
     

    从架构上来讲, SyntheticEvent打通了从外部原生事件到内部fiber树的交互渠道, 使得react能够感知到浏览器提供的原生事件, 进而做出不同的响应, 修改fiber树, 变更视图等.
     

    从实现上讲, 主要分为 3 步:
     

    1. 监听原生事件: 对齐DOM元素和fiber元素
    2. 收集listeners: 遍历fiber树, 收集所有监听本事件的listener函数.
    3. 派发合成事件: 构造合成事件, 遍历listeners进行派发.
     

     
 
     
  
     
  
     
   
     
    
     
    
     
     
     
     
     
    
     
   
     
  
     
 
     

    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
【漏洞复现】金和OA FileUploadMessage 文件读取                            
    
中后台管理系统如何更优雅的支持移动端                            
    
单体 or 微服务？你以为是架构权衡？其实是认知负载！                            
    
【深度学习】 Python 和 NumPy 系列教程（八）：Python类                            
    
JAVA并发编程——CAS与AQS源码详解                            
    
Prometheus服务发现之kubernetes_sd_config                            
    
【网络】总览（待更新）                            
    
为什么要使用双重校验锁来实现单例模式？                            
    
基于Electron24+Vite4+Vue3搭建桌面端应用                            
    
什么是类加载器，类加载器如何分类                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/weixin_44828588/article/details/126546223
                
    •