React合成事件的原理是什么

這篇文章主要講解了“React合成事件的原理是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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;
    }
  }
}

感謝各位的閱讀，以上就是“React合成事件的原理是什么”的內容了，經過本文的學習后，相信大家對React合成事件的原理是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！