React中的合成事件是什么原理

大白天

事件介绍


什么是事件

事件是在编程时系统内发生的动作或者发生的事情，而开发者可以某种方式对事件做出回应，而这里有几个先决条件

• 事件对象
  
• 给事件对象注册事件，当事件被触发后需要做什么
  
• 事件触发
  

举个例子
在机场等待检票，听到广播后排队检票

• 事件对象，也就是检票事件
  
• 事件注册/监听，也就是我们在机场等待的时候
  
• 事件触发，广播响起开始检票
  
• 事件触发之后的回调，我们开始排队...
  

1. // 检票事件
   
2. var event = new Event('check-ticket');
   
3. // 事件注册，并编写回调
   
4. elem.addEventListener('check-ticket', function (e) {
   
5.   // 开始排队
   
6.   LiningUp()
   
7. });
   
8. // 事件触发，广播开始检票
   
9. elem.dispatchEvent(event);

复制代码

React合成事件基础知识


什么是合成事件

不是浏览器本身触发的事件，自己创建和触发的事件。
在React中事件的写法和原生事件写法的区别？

• React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
  
• 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
  

1. // HTML中的写法
   
2. <button onclick="handleClick()">
   
3.   Activate Lasers
   
4. </button>
   
5. // React中的写法
   
6. <button onClick={handleClick}>
   
7.   Activate Lasers
   
8. </button>

复制代码

为什么会有合成事件

• 对事件进行归类，可以在事件产生的任务上包含不同的优先级
  
• 提供合成事件对象，抹平浏览器的兼容性差异
  

合成事件机制简述

提供了一种“顶层注册，事件收集，统一触发”的事件机制

• “顶层注册”，其实是在root元素上绑定一个统一的事件处理函数
  
• “事件收集”, 事件触发时（实际上是root上的事件处理函数被执行），构造合成事件对象，按照冒泡或捕获的路径去组件中收集真正的事件处理函数
  
• “统一触发”，在收集过程之后，对收集的事件逐一执行，并共享同一个合成事件对象
  

React合成事件实现原理


事件注册

时机：在

1. fiber

复制代码

节点进入

1. render

复制代码

阶段的

1. complete

复制代码

阶段时，名为onClick的props会被识别为事件进行处理

1. function setInitialDOMProperties(
   
2.   tag: string,
   
3.   domElement: Element,
   
4.   rootContainerElement: Element | Document,
   
5.   nextProps: Object,
   
6.   isCustomComponentTag: boolean,
   
7. ): void {
   
8.   for (const propKey in nextProps) {
   
9.     if (!nextProps.hasOwnProperty(propKey)) {
   
10.       ...
    
11.     } else if (registrationNameDependencies.hasOwnProperty(propKey)) {
    
12.         // 如果propKey属于事件类型，则进行事件绑定
    
13.         ensureListeningTo(rootContainerElement, propKey, domElement);
    
14.       }
    
15.     }
    
16.   }
    
17. }
    
18. // registrationNameDependencies为合成事件名和真实事件的映射，格式如下：
    
19. {
    
20.   onChange: ['change', 'click', 'focusin', 'focusout', 'input', 'keydown', 'keyup', 'selectionchange']
    
21.   onChangeCapture: ['change', 'click', 'focusin', 'focusout', 'input', 'keydown', 'keyup', 'selectionchange']
    
22.   onClick: ['click']
    
23. }

复制代码

调用

1. ensureListeningTo

复制代码

进行事件绑定
然后调用DOMPluginEventSystem.js中的

1. addTrappedEventListener

复制代码

进行事件注册，而监听器listener是React通过

1. createEventListenerWrapperWithPriority

复制代码

创建出优先级不同的时间监听包装器
总的来说，会有三种事件监听包装器：

• dispatchDiscreteEvent: 处理离散事件
  
• dispatchUserBlockingUpdate：处理用户阻塞事件
  
• dispatchEvent：处理连续事件
  

事件触发-事件监听器做了什么
负责以不同的优先级权重来触发真正的事件流程
在

1. createEventListenerWrapperWithPriority

复制代码

中，根据

1. eventPriority

复制代码

事件优先级不同调用事件

1. dispatchDiscreteEvent

复制代码

、

1. dispatchUserBlockingUpdate

复制代码

、

1. dispatchUserBlockingUpdate

复制代码

、

1. dispatchEvent

复制代码

进行事件绑定

1. export function createEventListenerWrapperWithPriority(
   
2.   targetContainer: EventTarget,
   
3.   domEventName: DOMEventName,
   
4.   eventSystemFlags: EventSystemFlags,
   
5. ): Function {
   
6.   const eventPriority = getEventPriorityForPluginSystem(domEventName);
   
7.   let listenerWrapper;
   
8.   switch (eventPriority) {
   
9.     case DiscreteEvent:
   
10.       listenerWrapper = dispatchDiscreteEvent;
    
11.       break;
    
12.     case UserBlockingEvent:
    
13.       listenerWrapper = dispatchUserBlockingUpdate;
    
14.       break;
    
15.     case ContinuousEvent:
    
16.     default:
    
17.       listenerWrapper = dispatchEvent;
    
18.       break;
    
19.   }
    
20.   return listenerWrapper.bind(
    
21.     null,
    
22.     domEventName,
    
23.     eventSystemFlags,
    
24.     targetContainer,
    
25.   );
    
26. }

复制代码

在每一个事件绑定函数中，会调用

1. dispatchEventsForPlugins

复制代码

函数
合成事件，放入dispatchQueue中
而dispatchQueue由两部分组成

• 合成事件对象
  
• 多个listeners(可以共用一个合成事件对象)
  

执行事件执行路径下的事件，从

1. dispatchQueue

复制代码

中取出事件对象

1. events

复制代码

和具体执行路径

1. listeners

复制代码

，然后遍历执行

1. function dispatchEventsForPlugins(
   
2.   domEventName: DOMEventName,
   
3.   eventSystemFlags: EventSystemFlags,
   
4.   nativeEvent: AnyNativeEvent,
   
5.   targetInst: null | Fiber,
   
6.   targetContainer: EventTarget,
   
7. ): void {
   
8.   const nativeEventTarget = getEventTarget(nativeEvent);
   
9.   const dispatchQueue: DispatchQueue = [];
   
10.   // 通过不同事件类型插件进行事件对象合成，将合成事件放入事件队列中：dispatchQueue中
    
11.   extractEvents(
    
12.     dispatchQueue,
    
13.     domEventName,
    
14.     targetInst,
    
15.     nativeEvent,
    
16.     nativeEventTarget,
    
17.     eventSystemFlags,
    
18.     targetContainer,
    
19.   );
    
20.   // 执行dispatchQueue中具体事件执行路径下的事件
    
21.   processDispatchQueue(dispatchQueue, eventSystemFlags);
    
22. }

复制代码

1. // 通过extractEvents合成的dispatchQueue的格式如下
   
2. [
   
3.   {
   
4.     // event是合成事件对象
   
5.     event,
   
6.     // 具体的事件执行路径，currentTarget、listener等信息
   
7.     listeners: [
   
8.       {
   
9.         currentTarget: div.counter,
   
10.         instance: FiberNode {tag: 5, key: null, elementType: 'div', type: 'div', stateNode: div.counter, …},
    
11.         listener: e => {…}
    
12.       }，
    
13.       {
    
14.         currentTarget: div.counter-parent,
    
15.         instance: FiberNode {tag: 5, key: null, elementType: 'div', type: 'div', stateNode: div.counter, …},
    
16.         listener: e => {…}
    
17.       }
    
18.     ]
    
19.   }
    
20. ]

复制代码

React中模拟冒泡和捕获

原理：收集的事件放在

1. dispatchQueue

复制代码

数组中，而冒泡和捕获的区别在于执行时机和顺序，那么我们只需要对数组按照不同顺序循环执行即可

1. function processDispatchQueueItemsInOrder(
   
2.   event: ReactSyntheticEvent,
   
3.   dispatchListeners: Array<DispatchListener>,
   
4.   inCapturePhase: boolean,
   
5. ): void {
   
6.   let previousInstance;
   
7. 
   
8.   if (inCapturePhase) {
   
9.     // 事件捕获倒序循环
   
10.     for (let i = dispatchListeners.length - 1; i >= 0; i--) {
    
11.       const {instance, currentTarget, listener} = dispatchListeners[i];
    
12.       if (instance !== previousInstance && event.isPropagationStopped()) {
    
13.         return;
    
14.       }
    
15.       // 执行事件，传入event对象，和currentTarget
    
16.       executeDispatch(event, listener, currentTarget);
    
17.       previousInstance = instance;
    
18.     }
    
19.   } else {
    
20.     // 事件冒泡正序循环
    
21.     for (let i = 0; i < dispatchListeners.length; i++) {
    
22.       const {instance, currentTarget, listener} = dispatchListeners[i];
    
23.       // 如果事件对象阻止了冒泡，则return掉循环过程
    
24.       if (instance !== previousInstance && event.isPropagationStopped()) {
    
25.         return;
    
26.       }
    
27.       executeDispatch(event, listener, currentTarget);
    
28.       previousInstance = instance;
    
29.     }
    
30.   }
    
31. }

复制代码

到此这篇关于React中的合成事件是什么原理的文章就介绍到这了,更多相关React合成事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/276232.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！