谈谈React事件机制和未来(react-events)

export type EventTypes = {[key: string]: DispatchConfig};

// 插件接口
export type PluginModule<NativeEvent> = {
  eventTypes: EventTypes,          // 声明插件支持的事件类型
  extractEvents: (                 // 对事件进行处理，并返回合成事件对象
    topLevelType: TopLevelType,
    targetInst: null | Fiber,
    nativeEvent: NativeEvent,
    nativeEventTarget: EventTarget,
  ) => ?ReactSyntheticEvent,
  tapMoveThreshold?: number,
};

export type DispatchConfig = {
  dependencies: Array<TopLevelType>, // 依赖的原生事件，表示关联这些事件的触发. ‘简单事件’一般只有一个，复杂事件如onChange会监听多个, 如下图?
  phasedRegistrationNames?: {    // 两阶段props事件注册名称, React会根据这些名称在组件实例中查找对应的props事件处理器
    bubbled: string,             // 冒泡阶段, 如onClick
    captured: string,            // 捕获阶段，如onClickCapture
  },
  registrationName?: string      // props事件注册名称, 比如onMouseEnter这些不支持冒泡的事件类型，只会定义  registrationName，不会定义phasedRegistrationNames
  eventPriority: EventPriority,  // 事件的优先级，上文已经介绍过了
};

EventPluginHubInjection.injectEventPluginsByName({
  SimpleEventPlugin: SimpleEventPlugin,
  EnterLeaveEventPlugin: EnterLeaveEventPlugin,
  ChangeEventPlugin: ChangeEventPlugin,
  SelectEventPlugin: SelectEventPlugin,
  BeforeInputEventPlugin: BeforeInputEventPlugin,
});

export function listenTo(
  registrationName: string,           // 注册名称，如onClick
  mountAt: Document | Element | Node, // 组件树容器，一般是Document
): void {
  const listeningSet = getListeningSetForElement(mountAt);             // 已订阅事件表
  const dependencies = registrationNameDependencies[registrationName]; // 事件依赖

  for (let i = 0; i < dependencies.length; i++) {
    const dependency = dependencies[i];
    if (!listeningSet.has(dependency)) {                               // 未订阅
      switch (dependency) {
        // ... 特殊的事件监听处理
        default:
          const isMediaEvent = mediaEventTypes.indexOf(dependency) !== -1;
          if (!isMediaEvent) {
            trapBubbledEvent(dependency, mountAt);                     // 设置事件处理器
          }
          break;
      }
      listeningSet.add(dependency);                                    // 更新已订阅表
    }
  }
}

function trapEventForPluginEventSystem(
  element: Document | Element | Node,   // 绑定到元素，一般是Document
  topLevelType: DOMTopLevelEventType,   // 事件名称
  capture: boolean,
): void {
  let listener;
  switch (getEventPriority(topLevelType)) {
    // 不同优先级的事件类型，有不同的事件处理器进行分发, 下文会详细介绍
    case DiscreteEvent:                      // ⚛️离散事件
      listener = dispatchDiscreteEvent.bind(
        null,
        topLevelType,
        PLUGIN_EVENT_SYSTEM,
      );
      break;
    case UserBlockingEvent:                 // ⚛️用户阻塞事件
      listener = dispatchUserBlockingUpdate.bind(
        null,
        topLevelType,
        PLUGIN_EVENT_SYSTEM,
      );
      break;
    case ContinuousEvent:                   // ⚛️可连续事件
    default:
      listener = dispatchEvent.bind(null, topLevelType, PLUGIN_EVENT_SYSTEM);
      break;
  }

  const rawEventName = getRawEventName(topLevelType);
  if (capture) {                            // 绑定事件处理器到元素
    addEventCaptureListener(element, rawEventName, listener);
  } else {
    addEventBubbleListener(element, rawEventName, listener);
  }
}

// 离散事件
// discrentUpdates 在UserBlocking优先级中执行
function dispatchDiscreteEvent(topLevelType, eventSystemFlags, nativeEvent) {
  flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);
  discreteUpdates(dispatchEvent, topLevelType, eventSystemFlags, nativeEvent);
}

// 阻塞事件
function dispatchUserBlockingUpdate(
  topLevelType,
  eventSystemFlags,
  nativeEvent,
) {
  // 如果开启了enableUserBlockingEvents, 则在UserBlocking优先级中调度，
  // 开启enableUserBlockingEvents可以防止饥饿问题，因为阻塞事件中有scroll、mouseMove这类频繁触发的事件
  // 否则同步执行
  if (enableUserBlockingEvents) {
    runWithPriority(
      UserBlockingPriority,
      dispatchEvent.bind(null, topLevelType, eventSystemFlags, nativeEvent),
    );
  } else {
    dispatchEvent(topLevelType, eventSystemFlags, nativeEvent);
  }
}

// 可连续事件则直接同步调用dispatchEvent

export function dispatchEvent(topLevelType: DOMTopLevelEventType, eventSystemFlags: EventSystemFlags, nativeEvent: AnyNativeEvent): void {
  // 获取事件触发的目标DOM
  const nativeEventTarget = getEventTarget(nativeEvent);
  // 获取离该DOM最近的组件实例(只能是DOM元素组件)
  let targetInst = getClosestInstanceFromNode(nativeEventTarget);
  // ....
  dispatchEventForPluginEventSystem(topLevelType, eventSystemFlags, nativeEvent, targetInst);
}

export function runExtractedPluginEventsInBatch(
  topLevelType: TopLevelType,
  targetInst: null | Fiber,
  nativeEvent: AnyNativeEvent,
  nativeEventTarget: EventTarget,
) {
  // 遍历插件列表, 调用插件的extractEvents，生成SyntheticEvent列表
  const events = extractPluginEvents(
    topLevelType,
    targetInst,
    nativeEvent,
    nativeEventTarget,
  );

  // 事件处理器执行, 见后文批量执行
  runEventsInBatch(events);
}

const SimpleEventPlugin: PluginModule<MouseEvent> & {
  getEventPriority: (topLevelType: TopLevelType) => EventPriority,
} = {
  eventTypes: eventTypes,
  // 抽取事件对象
  extractEvents: function(
    topLevelType: TopLevelType,
    targetInst: null | Fiber,
    nativeEvent: MouseEvent,
    nativeEventTarget: EventTarget,
  ): null | ReactSyntheticEvent {
    // 事件配置
    const dispatchConfig = topLevelEventsToDispatchConfig[topLevelType];

    // 1️⃣ 根据事件类型获取SyntheticEvent子类事件构造器
    let EventConstructor;
    switch (topLevelType) {
      // ...
      case DOMTopLevelEventTypes.TOP_KEY_DOWN:
      case DOMTopLevelEventTypes.TOP_KEY_UP:
        EventConstructor = SyntheticKeyboardEvent;
        break;
      case DOMTopLevelEventTypes.TOP_BLUR:
      case DOMTopLevelEventTypes.TOP_FOCUS:
        EventConstructor = SyntheticFocusEvent;
        break;
      // ... 省略
      case DOMTopLevelEventTypes.TOP_GOT_POINTER_CAPTURE:
      // ...
      case DOMTopLevelEventTypes.TOP_POINTER_UP:
        EventConstructor = SyntheticPointerEvent;
        break;
      default:
        EventConstructor = SyntheticEvent;
        break;
    }

    // 2️⃣ 构造事件对象, 从对象池中获取
    const event = EventConstructor.getPooled(
      dispatchConfig,
      targetInst,
      nativeEvent,
      nativeEventTarget,
    );

    // 3️⃣ 根据DOM事件传播的顺序获取用户事件处理器
    accumulateTwoPhaseDispatches(event);
    return event;
  },
};

function accumulateTwoPhaseDispatchesSingle(event) {
  // 以_targetInst为基点, 按照DOM事件传播的顺序遍历组件树
  traverseTwoPhase(event._targetInst, accumulateDirectionalDispatches, event);
}

export function traverseTwoPhase(inst, fn, arg) {
  const path = [];
  while (inst) {           // 从inst开始，向上级回溯
    path.push(inst);
    inst = getParent(inst);
  }

  let i;
  // 捕获阶段，先从最顶层的父组件开始, 向下级传播
  for (i = path.length; i-- > 0; ) {
    fn(path[i], 'captured', arg);
  }

  // 冒泡阶段，从inst，即事件触发点开始, 向上级传播
  for (i = 0; i < path.length; i++) {
    fn(path[i], 'bubbled', arg);
  }
}

function accumulateDirectionalDispatches(inst, phase, event) {
  // 检查是否存在事件处理器
  const listener = listenerAtPhase(inst, event, phase);
  // 所有处理器都放入到_dispatchListeners队列中，后续批量执行这个队列
  if (listener) {
    event._dispatchListeners = accumulateInto(
      event._dispatchListeners,
      listener,
    );
    event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
  }
}

export function runEventsInBatch(
  events: Array<ReactSyntheticEvent> | ReactSyntheticEvent | null,
) {
  // ...
  forEachAccumulated(processingEventQueue, executeDispatchesAndRelease);
}

// ?

const executeDispatchesAndRelease = function(event: ReactSyntheticEvent) {
  if (event) {
    // 按顺序执行_dispatchListeners
    // ?
    executeDispatchesInOrder(event);

    // 如果没有调用persist()方法则直接回收
    if (!event.isPersistent()) {
      event.constructor.release(event);
    }
  }
};

export function executeDispatchesInOrder(event) {
  // 遍历dispatchListeners
  for (let i = 0; i < dispatchListeners.length; i++) {
    // 通过调用 stopPropagation 方法可以禁止执行下一个事件处理器
    if (event.isPropagationStopped()) {
      break;
    }
    // 执行事件处理器
    executeDispatch(event, dispatchListeners[i], dispatchInstances[i]);
  }
}

import Gesture from 'rc-gesture';

ReactDOM.render(
  <Gesture
    onTap={handleTap}
    onSwipe={onSwipe}
    onPinch={handlePinch}
  >
    <div>container</div>
  </Gesture>,
container);

import { PressResponder, usePressListener } from 'react-events/press';

const Button = (props) => (
  const listener = usePressListener({  // ⚛️通过hooks创建Responder
    onPressStart,
    onPress,
    onPressEnd,
  })

  return (
    <div listeners={listener}>
      {subtrees}
    </div>
  );
);

/**
 * 定义Responder的实现
 */
const keyboardResponderImpl = {
  /**
   * 1️⃣定义Responder需要监听的子树的DOM事件，对于Keyboard来说是['keydown', 'keyup';]
   */
  targetEventTypes,
  /**
   * 2️⃣监听子树触发的事件
   */
  onEvent(
    event: ReactDOMResponderEvent,     // 包含了当前触发事件的相关信息，如原生事件对象，事件触发的节点，事件类型等等
    context: ReactDOMResponderContext, // Responder的上下文，给Responder提供了一些方法来驱动事件分发
    props: KeyboardResponderProps,     // 传递给Responder的props
  ): void {
    const {responderTarget, type} = event;

    if (props.disabled) {
      return;
    }

    if (type === 'keydown') {
      dispatchKeyboardEvent(
        'onKeyDown',
        event,
        context,
        'keydown',
        ((responderTarget: any): Element | Document),
      );
    } else if (type === 'keyup') {
      dispatchKeyboardEvent(
        'onKeyUp',
        event,
        context,
        'keyup',
        ((responderTarget: any): Element | Document),
      );
    }
  },
};

function dispatchKeyboardEvent(
  eventPropName: string,
  event: ReactDOMResponderEvent,
  context: ReactDOMResponderContext,
  type: KeyboardEventType,
  target: Element | Document,
): void {
  // ⚛️创建合成事件对象，在这个函数中会规范化事件的key属性
  const syntheticEvent = createKeyboardEvent(event, context, type, target);
  // ⚛️通过Responder上下文分发事件
  context.dispatchEvent(eventPropName, syntheticEvent, DiscreteEvent);
}

// ⚛️createResponder把keyboardResponderImpl转换为组件形式
export const KeyboardResponder = React.unstable_createResponder(
  'Keyboard',
  keyboardResponderImpl,
);

// ⚛️创建hooks形式
export function useKeyboardListener(props: KeyboardListenerProps): void {
  React.unstable_useListener(KeyboardResponder, props);
}