Reactイベントメカニズムソースコード分析

関数createRootImpl(
  コンテナ: コンテナ、
  タグ: ルートタグ、
  オプション: void | RootOptions,
）{
  // ...
  定数ルートコンテナ要素 =
        container.nodeType === COMMENT_NODE ? container.parentNode : コンテナ;
  // サポートされているすべてのイベントをリッスンします listenToAllSupportedEvents(rootContainerElement);
  // ...
}

エクスポート関数 listenToAllSupportedEvents(rootContainerElement: EventTarget) {
  allNativeEvents.forEach(domEventName => {
    // 委任を必要としないイベントを除外する if (!nonDelegatedEvents.has(domEventName)) {
      // バブル listenToNativeEvent(
        domイベント名、
        間違い、
        ((rootContainerElement: 任意): 要素),
        ヌル、
      );
    }
    // listenToNativeEvent をキャプチャする(
      domイベント名、
      真実、
      ((rootContainerElement: 任意): 要素),
      ヌル、
    );
  });
}

エクスポート関数 listenToNativeEvent(
  DOMイベント名: DOMイベント名、
  isCapturePhaseListener: ブール値、
  ルートコンテナ要素: イベントターゲット、
  targetElement: 要素 | null、
  イベントシステムフラグ?: イベントシステムフラグ = 0、
）： 空所 {
  ターゲットを rootContainerElement とします。
	// ...
  // 現在の要素がリッスンするイベントを識別するために、DOM 要素にセットを格納します。const listenerSet = getEventListenerSet(target);
  // イベント識別キー、文字列連結処理 const listenerSetKey = getListenerSetKey(
    domイベント名、
    キャプチャフェーズリスナー、
  );

  リスナーセットにリスナーセットキーがある場合
    // キャプチャとしてマーク if (isCapturePhaseListener) {
      イベントシステムフラグ |= IS_CAPTURE_PHASE;
    }
    // イベントをバインド addTrappedEventListener(
      ターゲット、
      domイベント名、
      イベントシステムフラグ、
      キャプチャフェーズリスナー、
    );
    // セットに追加
    リスナーセット。リスナーセットキーを追加します。
  }
}

関数 addTrappedEventListener(
  ターゲットコンテナ: イベントターゲット、
  DOMイベント名: DOMイベント名、
  イベントシステムフラグ: イベントシステムフラグ、
  isCapturePhaseListener: ブール値、
  isDeferredListenerForLegacyFBSupport?: ブール値、
）{
  // 優先度に応じて対応するリスナーを取得します
  リスナー = createEventListenerWrapperWithPriority(
    ターゲットコンテナ、
    domイベント名、
    イベントシステムフラグ、
  );

  if (isCapturePhaseListener) {
    イベントキャプチャリスナーを追加します(ターゲットコンテナ、domEventName、リスナー)。
  } それ以外 {
    ターゲットコンテナ、domEventName、リスナーにEventBubbleListenerを追加します。
  }
}

エクスポートconst nonDelegatedEvents: Set<DOMEventName> = new Set([
  'キャンセル'、
  '近い'、
  '無効'、
  '負荷'、
  'スクロール'、
  'トグル'、
  ...メディアイベントタイプ、
]);
エクスポートconst mediaEventTypes: Array<DOMEventName> = [
  'アボート'、
  「プレイできる」、
  'プレイスルー可能'、
  '期間変更'、
  「空になった」
  「暗号化」、
  「終了」、
  'エラー'、
  'ロードされたデータ'、
  'ロードされたメタデータ'、
  'ロードスタート'、
  '一時停止'、
  '遊ぶ'、
  「遊ぶ」、
  '進捗'、
  'レート変更'、
  「求めた」、
  「求めている」、
  「行き詰まった」、
  'つるす'、
  'timeupdate'、
  'ボリューム変更'、
  '待っている'、
];

エクスポート関数setInitialProperties(
  domElement: 要素、
  タグ: 文字列、
  rawProps: オブジェクト、
  rootContainerElement: 要素 | ドキュメント、
）： 空所 {
  プロパティを設定します: オブジェクト;
  スイッチ (タグ) {
    // ...
    ケース「ビデオ」:
    ケース 'オーディオ':
      (i = 0 とします; i < mediaEventTypes.length; i++) {
        DOM要素のmediaEventTypes[i]をlistenToNonDelegatedEventとして取得します。
      }
      プロパティ = 生のプロパティ;
      壊す;
    デフォルト：
      プロパティ = 生のプロパティ;
  }
  // スタイルなどの DOM 属性を設定します...
  初期DOMプロパティを設定する(
    タグ、
    dom要素、
    ルートコンテナ要素、
    小道具、
    isCustomComponentTag、
  );
}

エクスポート関数 listenToNonDelegatedEvent(
  DOMイベント名: DOMイベント名、
  targetElement: 要素、
）： 空所 {
  定数isCapturePhaseListener = false;
  リスナーセットは、ターゲット要素のイベントリスナーセットを取得します。
  定数リスナーSetKey = getListenerSetKey(
    domイベント名、
    キャプチャフェーズリスナー、
  );
  リスナーセットにリスナーセットキーがある場合
    トラップイベントリスナーを追加します(
      ターゲット要素、
      domイベント名、
      IS_NON_DELEGATED、
      キャプチャフェーズリスナー、
    );
    リスナーセット。リスナーセットキーを追加します。
  }
}

関数createEventListenerWrapperWithPriority(をエクスポートする
  ターゲットコンテナ: イベントターゲット、
  DOMイベント名: DOMイベント名、
  イベントシステムフラグ: イベントシステムフラグ、
）： 関数 {
  // 組み込みマップからイベントの優先度を取得します。const eventPriority = getEventPriorityForPluginSystem(domEventName);
  リスナーラッパーを作成します。
  // 優先度に応じて異なるリスナーを返す
  スイッチ (イベント優先度) {
    離散イベントの場合:
      リスナーラッパー = dispatchDiscreteEvent;
      壊す;
    UserBlockingEventの場合:
      リスナーラッパー = ディスパッチユーザーブロック更新;
      壊す;
    連続イベントの場合:
    デフォルト：
      リスナーラッパー = ディスパッチイベント;
      壊す;
  }
  listenerWrapper.bind() を返します。
    ヌル、
    domイベント名、
    イベントシステムフラグ、
    ターゲットコンテナ、
  );
}

関数fn(
  domイベント名、
  イベントシステムフラグ、
  容器、
  ネイティブイベント、
）{
  //...
}

エクスポート関数dispatchEvent(
  DOMイベント名: DOMイベント名、
  イベントシステムフラグ: イベントシステムフラグ、
  ターゲットコンテナ: イベントターゲット、
  ネイティブイベント: 任意のネイティブイベント、
）： 空所 {
  // ...
  // イベントをトリガーする attemptToDispatchEvent(
    domイベント名、
    イベントシステムフラグ、
    ターゲットコンテナ、
    ネイティブイベント、
  );
  // ...
}

関数dispatchEventsForPlugins(
  DOMイベント名: DOMイベント名、
  イベントシステムフラグ: イベントシステムフラグ、
  ネイティブイベント: 任意のネイティブイベント、
  targetInst: null | ファイバー、
  ターゲットコンテナ: イベントターゲット、
）： 空所 {
  ネイティブイベントターゲットを取得します。
  定数ディスパッチキュー: ディスパッチキュー = [];
  // バブリングをシミュレートするためのリスナーを収集する extractEvents(
    ディスパッチキュー、
    domイベント名、
    ターゲットInst、
    ネイティブイベント、
    ネイティブイベントターゲット、
    イベントシステムフラグ、
    ターゲットコンテナ、
  );
  //実行キュー processDispatchQueue(dispatchQueue, eventSystemFlags);
}

関数extractEvents(
  ディスパッチキュー: ディスパッチキュー、
  DOMイベント名: DOMイベント名、
  targetInst: null | ファイバー、
  ネイティブイベント: 任意のネイティブイベント、
  ネイティブイベントターゲット: null | イベントターゲット、
  イベントシステムフラグ: イベントシステムフラグ、
  ターゲットコンテナ: イベントターゲット、
）： 空所 {
  const reactName = topLevelEventsToReactNames.get(domEventName);
  SyntheticEventCtor を SyntheticEvent とします。
  reactEventType: string = domEventName; とします。
	// 異なるイベントに応じて異なる合成イベントを作成する switch (domEventName) {
    ケース 'キー押下':
    ケース 'keydown':
    ケース 'keyup':
      SyntheticEventCtor = SyntheticKeyboardEvent;
      壊す;
    'クリック'の場合:
    // ...
    'マウスオーバー'の場合:
      SyntheticEventCtor = SyntheticMouseEvent;
      壊す;
    ケース「ドラッグ」:
    // ...
    ケース「ドロップ」:
      SyntheticEventCtor = SyntheticDragEvent;
      壊す;
    // ...
    デフォルト：
      壊す;
  }
  // ...
  // 各レベルでリスナーを収集する
  const リスナー = シングルフェーズリスナーを蓄積する(
    ターゲットInst、
    反応名、
    ネイティブイベントタイプ、
    キャプチャフェーズ中、
    累積ターゲットのみ、
  );
  リスナーの長さが0より大きい場合
    // 合成イベントを作成する const event = new SyntheticEventCtor(
      反応名、
      反応イベントタイプ、
      ヌル、
      ネイティブイベント、
      ネイティブイベントターゲット、
    );
    ディスパッチキューをプッシュします({イベント、リスナー});
  }
}

エクスポート関数accumulateSinglePhaseListeners(
  targetFiber: ファイバー | null、
  reactName: 文字列 | null、
  ネイティブイベントタイプ: 文字列、
  inCapturePhase: ブール値、
  累積ターゲットのみ: ブール値、
): 配列<DispatchListener> {
  const captureName = reactName !== null ? reactName + 'Capture' : null;
  const reactEventName = inCapturePhase ? captureName: reactName;
  const リスナー: Array<DispatchListener> = [];

  インスタンスを targetFiber にします。
  lastHostComponent を null にします。

  // イベントをトリガーするファイバーノードをトラバースしてDOMとリスナーを収集します
  while (インスタンス !== null) {
    const {stateNode, タグ} = インスタンス;
    // HostComponents のみにリスナーがあります (つまり <div>)
    if (タグ === HostComponent && stateNode !== null) {
      最後のホストコンポーネント = stateNode;

      （reactEventName !== null）の場合{
        // ファイバー ノードの props から受信イベント リスナー関数を取得します。const listener = getListener(instance, reactEventName);
        if (リスナー != null) {
          リスナー.push({
            実例、
            リスナー、
            現在のターゲット: lastHostComponent、
          });
        }
      }
    }
    ターゲットのみを累積する場合
      壊す;
    }
    // 上へ進むinstance = instance.return;
  }
  リスナーを返します。
}

エクスポート関数 processDispatchQueue(
  ディスパッチキュー: ディスパッチキュー、
  イベントシステムフラグ: イベントシステムフラグ、
）： 空所 {
  const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
  (i = 0 とします; i < ディスパッチキューの長さ; i++) {
    const {イベント、リスナー} = dispatchQueue[i];
    processDispatchQueueItemsInOrder(イベント、リスナー、inCapturePhase);
  }
}

関数 processDispatchQueueItemsInOrder(
  イベント: ReactSyntheticEvent、
  ディスパッチリスナー: 配列<ディスパッチリスナー>,
  inCapturePhase: ブール値、
）： 空所 {
  前のインスタンスを作成します。
  // キャプチャ if (inCapturePhase) {
    (let i = dispatchListeners.length - 1; i >= 0; i--) {
      const {インスタンス、現在のターゲット、リスナー} = dispatchListeners[i];
      if (インスタンス !== previousInstance && event.isPropagationStopped()) {
        戻る;
      }
      executeDispatch(イベント、リスナー、現在のターゲット);
      前のインスタンス = インスタンス;
    }
  } それ以外 {
  // バブル for (let i = 0; i < dispatchListeners.length; i++) {
      const {インスタンス、現在のターゲット、リスナー} = dispatchListeners[i];
      if (インスタンス !== previousInstance && event.isPropagationStopped()) {
        戻る;
      }
      executeDispatch(イベント、リスナー、現在のターゲット);
      前のインスタンス = インスタンス;
    }
  }
}

関数executeDispatch(
  イベント: ReactSyntheticEvent、
  リスナー: 関数、
  現在のターゲット: イベントターゲット、
）： 空所 {
  const type = event.type || '不明なイベント';
  イベントの現在のターゲット = 現在のターゲット;
  リスナー(イベント);
  イベント.currentTarget = null;
}

<div ネイティブ onClick={(e)=>{e.stopPropagation()}}>
  <div onClick={()=>{console.log("合成イベント")}}>合成イベント</div>
</div>