«

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

时间：2024-3-8 14:45     作者：韩俊     分类： Javascript

本篇内容介绍了“React中合成事件的原理是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

事件介绍

什么是事件

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

  • 事件对象

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

  • 事件触发

举个例子

在机场等待检票，听到广播后排队检票

  • 事件对象，也就是检票事件

  • 事件注册/监听，也就是我们在机场等待的时候

  • 事件触发，广播响起开始检票

  • 事件触发之后的回调，我们开始排队... 

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

React合成事件基础知识

什么是合成事件

不是浏览器本身触发的事件，自己创建和触发的事件。

在React中事件的写法和原生事件写法的区别？

  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写。

  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。 

// HTML中的写法
<button onclick="handleClick()">
  Activate Lasers
</button>
// React中的写法
<button onClick={handleClick}>
  Activate Lasers
</button>

为什么会有合成事件

  • 对事件进行归类，可以在事件产生的任务上包含不同的优先级

  • 提供合成事件对象，抹平浏览器的兼容性差异

合成事件机制简述

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

  • “顶层注册”，其实是在root元素上绑定一个统一的事件处理函数

  • “事件收集”, 事件触发时（实际上是root上的事件处理函数被执行），构造合成事件对象，按照冒泡或捕获的路径去组件中收集真正的事件处理函数

  • “统一触发”，在收集过程之后，对收集的事件逐一执行，并共享同一个合成事件对象

React合成事件实现原理

事件注册

时机：在 

fiber

节点进入

render

阶段的

complete

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


function setInitialDOMProperties(
  tag: string,
  domElement: Element,
  rootContainerElement: Element | Document,
  nextProps: Object,
  isCustomComponentTag: boolean,
): void {
  for (const propKey in nextProps) {
    if (!nextProps.hasOwnProperty(propKey)) {
      ...
    } else if (registrationNameDependencies.hasOwnProperty(propKey)) {
        // 如果propKey属于事件类型，则进行事件绑定
        ensureListeningTo(rootContainerElement, propKey, domElement);
      }
    }
  }
}
// registrationNameDependencies为合成事件名和真实事件的映射，格式如下：
{
  onChange: ['change', 'click', 'focusin', 'focusout', 'input', 'keydown', 'keyup', 'selectionchange']
  onChangeCapture: ['change', 'click', 'focusin', 'focusout', 'input', 'keydown', 'keyup', 'selectionchange']
  onClick: ['click']
}

调用 

ensureListeningTo

进行事件绑定


然后调用DOMPluginEventSystem.js中的 

addTrappedEventListener

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

createEventListenerWrapperWithPriority

创建出优先级不同的时间监听包装器


总的来说，会有三种事件监听包装器：

  • dispatchDiscreteEvent: 处理离散事件

  • dispatchUserBlockingUpdate：处理用户阻塞事件

  • dispatchEvent：处理连续事件

事件触发-事件监听器做了什么

负责以不同的优先级权重来触发真正的事件流程

在 

createEventListenerWrapperWithPriority

中，根据

eventPriority

事件优先级不同调用事件

dispatchDiscreteEvent

、

dispatchUserBlockingUpdate

、

dispatchUserBlockingUpdate

、

dispatchEvent

进行事件绑定


export function createEventListenerWrapperWithPriority(
  targetContainer: EventTarget,
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
): Function {
  const eventPriority = getEventPriorityForPluginSystem(domEventName);
  let listenerWrapper;
  switch (eventPriority) {
    case DiscreteEvent:
      listenerWrapper = dispatchDiscreteEvent;
      break;
    case UserBlockingEvent:
      listenerWrapper = dispatchUserBlockingUpdate;
      break;
    case ContinuousEvent:
    default:
      listenerWrapper = dispatchEvent;
      break;
  }
  return listenerWrapper.bind(
    null,
    domEventName,
    eventSystemFlags,
    targetContainer,
  );
}

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

dispatchEventsForPlugins

函数


合成事件，放入dispatchQueue中

而dispatchQueue由两部分组成

  • 合成事件对象

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

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

dispatchQueue

中取出事件对象

events

和具体执行路径

listeners

，然后遍历执行


function dispatchEventsForPlugins(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  nativeEvent: AnyNativeEvent,
  targetInst: null | Fiber,
  targetContainer: EventTarget,
): void {
  const nativeEventTarget = getEventTarget(nativeEvent);
  const dispatchQueue: DispatchQueue = [];
  // 通过不同事件类型插件进行事件对象合成，将合成事件放入事件队列中：dispatchQueue中
  extractEvents(
    dispatchQueue,
    domEventName,
    targetInst,
    nativeEvent,
    nativeEventTarget,
    eventSystemFlags,
    targetContainer,
  );
  // 执行dispatchQueue中具体事件执行路径下的事件
  processDispatchQueue(dispatchQueue, eventSystemFlags);
}
// 通过extractEvents合成的dispatchQueue的格式如下
[
  {
    // event是合成事件对象
    event, 
    // 具体的事件执行路径，currentTarget、listener等信息
    listeners: [
      {
        currentTarget: div.counter,
        instance: FiberNode {tag: 5, key: null, elementType: 'div', type: 'div', stateNode: div.counter, …},
        listener: e => {…}
      }，
      {
        currentTarget: div.counter-parent,
        instance: FiberNode {tag: 5, key: null, elementType: 'div', type: 'div', stateNode: div.counter, …},
        listener: e => {…}
      }
    ] 
  }
]

React中模拟冒泡和捕获

原理：收集的事件放在 

dispatchQueue

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


function processDispatchQueueItemsInOrder(
  event: ReactSyntheticEvent,
  dispatchListeners: Array<DispatchListener>,
  inCapturePhase: boolean,
): void {
  let previousInstance;
 
  if (inCapturePhase) {
    // 事件捕获倒序循环
    for (let i = dispatchListeners.length - 1; i >= 0; i--) {
      const {instance, currentTarget, listener} = dispatchListeners[i];
      if (instance !== previousInstance && event.isPropagationStopped()) {
        return;
      }
      // 执行事件，传入event对象，和currentTarget
      executeDispatch(event, listener, currentTarget);
      previousInstance = instance;
    }
  } else {
    // 事件冒泡正序循环
    for (let i = 0; i < dispatchListeners.length; i++) {
      const {instance, currentTarget, listener} = dispatchListeners[i];
      // 如果事件对象阻止了冒泡，则return掉循环过程
      if (instance !== previousInstance && event.isPropagationStopped()) {
        return;
      }
      executeDispatch(event, listener, currentTarget);
      previousInstance = instance;
    }
  }
}

标签: javascript html css

热门推荐

1 JQuery ZTree使用方法详解
2 vue2怎么实现传送门效果
3 Javascript学习笔记之函数篇（五） : &#65279;构造函数
4 7个jQuery最佳实践
5 JavaScript实现关键字高亮功能
6 JavaScript 继承详解（二）
7 在JavaScript中实现智能物联网和智慧家庭的应用场景
8 基于Jquery代码实现手风琴菜单
9 Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输
10 Js怎么根据文件夹目录获取Json数据输出demo

日历

标签

hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

搜索

最新文章

热门文章