astak16 / react-study Goto Github PK

function recursivelyTraversePassiveUnmountEffects(parentFiber: Fiber): void {
  const deletions = parentFiber.deletions;
  if ((parentFiber.flags & ChildDeletion) !== NoFlags) {
    if (deletions !== null) {
      for (let i = 0; i < deletions.length; i++) {
        const childToDelete = deletions[i];
        nextEffect = childToDelete;
        commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
          childToDelete,
          parentFiber
        );
      }
    }
  }
}
function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
  deletedSubtreeRoot: Fiber,
  nearestMountedAncestor: Fiber | null
) {
  while (nextEffect !== null) {
    const fiber = nextEffect;
    // 执行 passive effects 返回的函数
    commitPassiveUnmountInsideDeletedTreeOnFiber(fiber, nearestMountedAncestor);

    const child = fiber.child;
    if (child !== null) {
      child.return = fiber;
      nextEffect = child;
    } else {
      commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
        deletedSubtreeRoot
      );
    }
  }
}

function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
  deletedSubtreeRoot
) {
  while (nextEffect !== null) {
    const fiber = nextEffect;
    const sibling = fiber.sibling;
    const returnFiber = fiber.return;

    if (fiber === deletedSubtreeRoot) {
      nextEffect = null;
      return;
    }

    if (sibling !== null) {
      sibling.return = returnFiber;
      nextEffect = sibling;
      return;
    }

    nextEffect = returnFiber;
  }
}

const A = () => {
  useEffect(() => {
    return () => {
      console.log("A unmount");
    };
  }, []);
  return <div>文本A</div>;
};
const B = () => {
  useEffect(() => {
    return () => {
      console.log("B unmount");
    };
  }, []);
  return <div>文本B</div>;
};

const App(){
  const [count, setCount] = useState(0)

  return <div>
    {count % 2 === 0 && <A />}
    {count % 2 === 0 && <B />}
    <div onClick={()=> setCount(count+1)}>+1</div>
  </div>
}

const App(){
  const [count, setCount] = useState(0)

  return <div>
    {count % 2 === 0 && <><A /><B /></>}
    <div onClick={()=> setCount(count+1)}>+1</div>
  </div>
}

child = fiber.child;
if (child !== null) {
  nextEffect = child;
}

child = fiber.child;
if (child !== null) {
  nextEffect = child;
} else {
  commitPassiveUnmountEffectsInsideOfDeletedTree_complete(deletedSubtreeRoot);
}

// rootContainerElement 是 <div id="root"></div>
listenToAllSupportedEvents(rootContainerElement);

// rootContainerElement 是 <div id="root"></div>
function listenToAllSupportedEvents(rootContainerElement) {
  // 保证事件只注册一次
  if (!rootContainerElement[listeningMarker]) {
    rootContainerElement[listeningMarker] = true;
    // 遍历 set 集合 allNativeEvents，监听冒泡和捕获阶段
    allNativeEvents.forEach((domEventName) => {
      // We handle selectionchange separately because it
      // doesn't bubble and needs to be on the document.
      // 单独处理 selectionchange
      if (domEventName !== "selectionchange") {
        // delegate 委托，不需要委托的事件，这些事件不会冒泡
        if (!nonDelegatedEvents.has(domEventName)) {
          /**
           * @param domEventName - 事件名，如 click
           * @param isCapturePhaseListener- 是否是捕获阶段 false，非 nonDelegatedEvents
           * @param target - <div id="root"><div>
           */
          listenToNativeEvent(domEventName, false, rootContainerElement);
        }
        /**
         * @param domEventName - 事件名，如 click
         * @param isCapturePhaseListener- 是否是捕获阶段 true，nonDelegatedEvents
         * @param target - <div id="root"><div>
         */
        listenToNativeEvent(domEventName, true, rootContainerElement);
      }
    });
    // 是否是 document 元素，ownerDocument 可以获取某个 dom 的 document 元素
    const ownerDocument =
      rootContainerElement.nodeType === DOCUMENT_NODE
        ? rootContainerElement
        : rootContainerElement.ownerDocument;
    if (ownerDocument !== null) {
      // The selectionchange event also needs deduplication
      // but it is attached to the document.
      if (!ownerDocument[listeningMarker]) {
        ownerDocument[listeningMarker] = true;
        listenToNativeEvent("selectionchange", false, ownerDocument);
      }
    }
  }
}

SimpleEventPlugin.registerEvents(); // click, cancel, input, keyUp => onClick, onCancel, onInput, onKeyup ...
EnterLeaveEventPlugin.registerEvents(); // mouseout, mouseover => onMouseEnter, onMouseLeave ...
ChangeEventPlugin.registerEvents(); // change, click, focusin, focusout, input, keydown, keyup, selectionchange => onChange
SelectEventPlugin.registerEvents(); // focusout, contextmenu, dragend, focusin, keydown, keyup, mousedown, mouseup, selectionchange => onSelect
BeforeInputEventPlugin.registerEvents(); // compositionend, keypress, textInput, paste => onBeforeInput ...

function registerTwoPhaseEvent(registrationName, dependencies) {
  // 冒泡 onClick
  registerDirectEvent(registrationName, dependencies);
  // 捕获 onCaptureClick
  registerDirectEvent(registrationName + "Capture", dependencies);
}

// registrationNameDependencies 保存 react 事件和其依赖的事件的映射
// {onClick: ["click"], onCapture: ["click"], onMouseEnter: ["mouseout", "mouseover"] ... }
const registrationNameDependencies = {};

// allNativeEvents 集合中就会有 click、cancel 等 81 种事件，["click", "cancel"...]
const allNativeEvents = new Set();

function registerDirectEvent(registrationName, dependencies) {
  registrationNameDependencies[registrationName] = dependencies;

  for (let i = 0; i < dependencies.length; i++) {
    allNativeEvents.add(dependencies[i]);
  }
}

/**
 * @param domEventName - 事件名，如 click
 * @param isCapturePhaseListener - 是否是捕获阶段，false 代表冒泡，true 代表捕获
 * @param target - <div id="root"></div>，如果是 selectionChange 事件，这个值是 document
 */
function listenToNativeEvent(domEventName, isCapturePhaseListener, target) {
  // 冒泡是 0，捕获是 4
  let eventSystemFlags = 0;
  if (isCapturePhaseListener) {
    eventSystemFlags |= IS_CAPTURE_PHASE;
  }
  /**
   * @param targetContainer - <div id="root"></div>，如果是 selectionChange 事件，这个值是 document
   * @param domEventName - 事件名，如 click
   * @param eventSystemFlags - 事件类型标志，冒泡是 0，捕获是 4
   * @param isCapturePhaseListener - 是否是捕获阶段，false 代表冒泡，true 代表捕获
   */
  addTrappedEventListener(
    target,
    domEventName,
    eventSystemFlags,
    isCapturePhaseListener
  );
}

/**
 * @param targetContainer - <div id="root"></div>，如果是 selectionChange 事件，这个值是 document
 * @param domEventName - 事件名，如 click
 * @param eventSystemFlags - 事件类型标志，冒泡是 0，捕获是 4
 * @param isCapturePhaseListener - 是否是捕获阶段
 */
function addTrappedEventListener(
  targetContainer,
  domEventName,
  eventSystemFlags,
  isCapturePhaseListener
) {
  /**
   * 构造事件监听器
   * @return 事件监听函数，这里的 listener 函数接收一个事件参数 e，内部叫做 nativeEvent，就是 x.addEventListener("click", e => {}) 中的 e
   * @param targetContainer - <div id="root"></div>，如果是 selectionChange 事件，这个值是 document
   * @param domEventName - 事件名，如 click
   * @param eventSystemFlags - 事件类型标志，冒泡是 0，捕获是 4
   */
  let listener = createEventListenerWrapperWithPriority(
    targetContainer,
    domEventName,
    eventSystemFlags
  );

  // touchstart touchmove wheel 需要将 passive 设置为 true
  let isPassiveListener = undefined;
  if (passiveBrowserEventsSupported) {
    if (
      domEventName === "touchstart" ||
      domEventName === "touchmove" ||
      domEventName === "wheel"
    ) {
      isPassiveListener = true;
    }
  }

  let unsubscribeListener;

  /**
   * 根据是否是捕获阶段，挂载不同的事件
   * @param targetContainer - <div id="root"></div>，如果是 selectionChange 事件，这个值是 document
   * @param domEventName - 事件名，如 click
   * @param listener
   */
  if (isCapturePhaseListener) {
    if (isPassiveListener !== undefined) {
      // 捕获事件，passive 为 true
      unsubscribeListener = addEventCaptureListenerWithPassiveFlag(
        targetContainer,
        domEventName,
        listener,
        isPassiveListener
      );
    } else {
      // 捕获事件，passive 为 false
      unsubscribeListener = addEventCaptureListener(
        targetContainer,
        domEventName,
        listener
      );
    }
  } else {
    if (isPassiveListener !== undefined) {
      // 冒泡事件，passive 为 true
      unsubscribeListener = addEventBubbleListenerWithPassiveFlag(
        targetContainer,
        domEventName,
        listener,
        isPassiveListener
      );
    } else {
      // 冒泡事件，passive 为 false
      unsubscribeListener = addEventBubbleListener(
        targetContainer,
        domEventName,
        listener
      );
    }
  }
}

/**
 * 根据优先级构造事件监听器
 * @return 事件监听函数，这里的 listener 函数接收一个事件参数 e，内部叫做 nativeEvent，就是 x.addEventListener("click", e => {}) 中的 e
 * @param targetContainer - <div id="root"></div>，如果是 selectionChange 事件，这个值是 document
 * @param domEventName - 事件名，如 click
 * @param eventSystemFlags - 事件类型标志，冒泡是 0，捕获是 4
 */
function createEventListenerWrapperWithPriority(
  targetContainer,
  domEventName,
  eventSystemFlags
) {
  // 获取事件优先级：离散型最高，连续型其次，接着默认事件
  const eventPriority = getEventPriority(domEventName);
  let listenerWrapper;
  switch (eventPriority) {
    // 离散事件
    case DiscreteEventPriority: // 0b0000000000000000000000000000010
      listenerWrapper = dispatchDiscreteEvent;
      break;
    // 连续事件
    case ContinuousEventPriority: // 0b0000000000000000000000000001000
      listenerWrapper = dispatchContinuousEvent;
      break;
    // 默认事件
    case DefaultEventPriority: // 0b0000000000000000000000000100000
    default:
      listenerWrapper = dispatchEvent;
      break;
  }
  /**
   * @param this - null
   * @param domEventName - 事件名，如 click
   * @param eventSystemFlags - 事件类型标志，冒泡是 0，捕获是 4
   * @param targetContainer - <div id="root"></div>，如果是 selectionChange 事件，这个值是 document
   * @description dispatchEvent 函数接收四个参数，其中三个参数：domEventName、eventSystemFlags、targetContainer 这里已经绑定
   * @description 还有一个 nativeEvent 参数是 DOM 事件参数，xx.addEventListener("click", e => {}) 这里的 e 就是 nativeEvent，由外部传进来
   */
  return listenerWrapper.bind(
    null,
    domEventName,
    eventSystemFlags,
    targetContainer
  );
}

/**
 * @param domEventName - 事件名称
 * @param eventSystemFlags - 事件类型标志，捕获阶段是 4，冒泡阶段是 0
 * @param targetContainer -  <div id="root"><div>
 * @param nativeEvent - 浏览器的 event
 */
function dispatchEvent(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  targetContainer: EventTarget,
  nativeEvent: AnyNativeEvent
): void {
  if (!_enabled) {
    return;
  }
  if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
    /**
     * @param domEventName - 事件名称
     * @param eventSystemFlags - 事件类型标志，捕获阶段是 4，冒泡阶段是 0
     * @param targetContainer -  <div id="root"><div>
     * @param nativeEvent - 浏览器的 event
     */
    dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay(
      domEventName,
      eventSystemFlags,
      targetContainer,
      nativeEvent
    );
  } else {
    dispatchEventOriginal(
      domEventName,
      eventSystemFlags,
      targetContainer,
      nativeEvent
    );
  }
}

/**
 * @param domEventName - 事件名称
 * @param eventSystemFlags - 事件类型标志，捕获阶段是 4，冒泡阶段是 0
 * @param targetContainer - <div id="root"><div>
 * @param nativeEvent - 浏览器的 event
 */
function dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  targetContainer: EventTarget,
  nativeEvent: AnyNativeEvent
) {
  // 从 nativeEvent 中获取到 e.target，然后找到对应的 fiber，将 fiber 赋值给 return_targetInst
  // 查找当前事件处理函数是否被阻塞了
  // 从当前组件开始，递归向上遍历组件树，找到阻塞的事件（这个组件是否有事件在执行），如果有返回这个 fiber，如果没有返回 null
  // createRoot 时，blockedOn 为 null
  let blockedOn = findInstanceBlockingEvent(
    domEventName,
    eventSystemFlags,
    targetContainer,
    nativeEvent
  );
  if (blockedOn === null) {
    /**
     * @param domEventName - 事件名称
     * @param eventSystemFlags - 事件类型标志，捕获阶段是 4，冒泡阶段是 0
     * @param nativeEvent - 浏览器的 event
     * @param targetInst - return_targetInst，nativeEvent 中的 e.target 所对应的 fiber
     * @param targetContainer - <div id="root"><div>
     */
    // 将原生事件转化为合成事件，并将合成事件传递给后续的事件处理

    dispatchEventForPluginEventSystem(
      domEventName,
      eventSystemFlags,
      nativeEvent,
      return_targetInst,
      targetContainer
    );
    // 将连续触发类型的事件重置为无事件
    clearIfContinuousEvent(domEventName, nativeEvent);
    return;
  }
}

// 查找当前事件是否被阻塞，从当前节点递归向上遍历节点，一直到根节点，找到阻塞事件（这个组件是否有事件在执行），如果有返回这个节点的 fiber，否者返回 null
export function findInstanceBlockingEvent(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  targetContainer: EventTarget,
  nativeEvent: AnyNativeEvent
): null | Container | SuspenseInstance {
  // TODO: Warn if _enabled is false.

  return_targetInst = null;

  // 获取原生事件的 target，当前节点(e.target)这种
  // 在 vite 创建的项目中，react logo 会有动画，这里的 nativeEvent 是 animationstart 事件
  // 同时 img 还有个 load 事件
  const nativeEventTarget = getEventTarget(nativeEvent);
  // 获取当前节点(e.target)对应的 fiber
  let targetInst = getClosestInstanceFromNode(nativeEventTarget);

  if (targetInst !== null) {
    /**
     * @param {Fiber} targetInst - 当前节点(e.target)对应的 fiber
     * @description 在 createRoot 时 nearestMounted 为 targetInst
     */
    const nearestMounted = getNearestMountedFiber(targetInst);
    if (nearestMounted === null) {
      // This tree has been unmounted already. Dispatch without a target.
      targetInst = null;
    } else {
      const tag = nearestMounted.tag;
      // 在 createRoot 时，下面的代码不会执行
      if (tag === SuspenseComponent) {
        const instance = getSuspenseInstanceFromFiber(nearestMounted);
        if (instance !== null) {
          // Queue the event to be replayed later. Abort dispatching since we
          // don't want this event dispatched twice through the event system.
          // TODO: If this is the first discrete event in the queue. Schedule an increased
          // priority for this boundary.
          return instance;
        }
        // This shouldn't happen, something went wrong but to avoid blocking
        // the whole system, dispatch the event without a target.
        // TODO: Warn.
        targetInst = null;
      } else if (tag === HostRoot) {
        const root: FiberRoot = nearestMounted.stateNode;
        if (isRootDehydrated(root)) {
          // If this happens during a replay something went wrong and it might block
          // the whole system.
          return getContainerFromFiber(nearestMounted);
        }
        targetInst = null;
      } else if (nearestMounted !== targetInst) {
        // If we get an event (ex: img onload) before committing that
        // component's mount, ignore it for now (that is, treat it as if it was an
        // event on a non-React tree). We might also consider queueing events and
        // dispatching them after the mount.
        targetInst = null;
      }
    }
  }
  return_targetInst = targetInst;
  // We're not blocked on anything.
  return null;
}

/**
 * 调度事件处理函数的核心函数
 * @param domEventName - 事件名称
 * @param eventSystemFlags - 事件类型标志，捕获阶段是 4，冒泡阶段是 0
 * @param nativeEvent - 浏览器的 event
 * @param targetInst - return_targetInst，nativeEvent 中的 e.target 所对应的 fiber
 * @param targetContainer -  <div id="root"><div>
 */
// 找到祖先实例，批量调用 dispatchEventsForPlugins(如果未开启批量，则开启批量调用)
export function dispatchEventForPluginEventSystem(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  nativeEvent: AnyNativeEvent,
  targetInst: null | Fiber,
  targetContainer: EventTarget
): void {
  let ancestorInst = targetInst;
  /**
   * @param domEventName - 事件名称
   * @param eventSystemFlags - 事件类型标志，捕获阶段是 4，冒泡阶段是 0
   * @param nativeEvent - 浏览器的 event
   * @param targetInst - ancestorInst，nativeEvent 中的 e.target 所对应的 fiber
   * @param targetContainer - createRoot 时 <div id="root"><div>
   */
  // 找到祖先实例后执行 dispatchEventsForPlugins(如果未开启批量，则开启批量调用)
  batchedUpdates(() =>
    dispatchEventsForPlugins(
      domEventName,
      eventSystemFlags,
      nativeEvent,
      ancestorInst,
      targetContainer
    )
  );
}

/**
 * @param domEventName - 事件名称
 * @param eventSystemFlags - 事件类型标志，捕获阶段是 4，冒泡阶段是 0
 * @param nativeEvent - 浏览器的 event
 * @param targetInst - ancestorInst，nativeEvent 中的 e.target 所对应的 fiber
 * @param targetContainer - createRoot 时 <div id="root"><div>
 */
function dispatchEventsForPlugins(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  nativeEvent: AnyNativeEvent,
  targetInst: null | Fiber,
  targetContainer: EventTarget
): void {
  // 获取原生事件的 target，e.target 这种
  const nativeEventTarget = getEventTarget(nativeEvent);
  // 事件类型是：DispatchEntry
  // 包含两个属性：event 和 listeners
  //  - event 是一个 SyntheticEvent 对象
  //    - isPersistent: () => boolean（是否是连续的）
  //    - isPropagationStopped: () => boolean
  //    - _dispatchInstances?: null | Array<Fiber | null> | Fiber
  //    - _dispatchListeners?: null | Array<Function> | Function
  //    - _targetInst: Fiber
  //    - nativeEvent: Event（原生事件）
  //    - target?: mixed
  //    - relatedTarget?: mixed
  //    - type: string
  //    - currentTarget: null | EventTarget
  //  - listeners 是一个数组
  //    - instance: null | Fiber
  //    - listener: Function（事件函数，比如 onClick）
  //    - currentTarget: EventTarget
  const dispatchQueue: DispatchQueue = [];

  /**
   * @param dispatchQueue - []
   * @param domEventName - 事件名称
   * @param eventSystemFlags - 事件类型标志，捕获阶段是 4，冒泡阶段是 0
   * @param nativeEvent - 浏览器的 event
   * @param nativeEventTarget - 原生事件对应的 target
   * @param targetInst - ancestorInst，nativeEvent 中的 e.target 所对应的 fiber
   * @param targetContainer - createRoot 时 <div id="root"><div>
   */
  // 从原生事件中提取合成事件，并放入 dispatchQueue 队列中
  //  - 遍历 target(事件目标节点) 到 targetContainer(根节点) 之间的所有节点
  //  - 检查它们是否有注册过相应类型的事件监听器
  //  - 如果有，创建一个 SyntheticEvent 对象，包含了 type、target、currentTarget、eventPhase、timestamp 等。
  extractEvents(
    dispatchQueue,
    domEventName,
    targetInst,
    nativeEvent,
    nativeEventTarget,
    eventSystemFlags,
    targetContainer
  );
  // 从 dispatchQueue 中取出合成事件，并根据事件类型和目标元素，找到对应的监听器并执行
  //  - 遍历 dispatchQueue 中的每个 SyntheticEvent 对象
  processDispatchQueue(dispatchQueue, eventSystemFlags);
}

/**
 * @param dispatchQueue - []
 * @param domEventName - 事件名称
 * @param eventSystemFlags - 事件类型标志，捕获阶段是 4，冒泡阶段是 0
 * @param nativeEvent - 浏览器的 event
 * @param nativeEventTarget - 原生事件对应的 target
 * @param targetInst - ancestorInst，nativeEvent 中的 e.target 所对应的 fiber
 * @param targetContainer - createRoot 时 <div id="root"><div>
 */
function extractEvents(
  dispatchQueue: DispatchQueue,
  domEventName: DOMEventName,
  targetInst: null | Fiber,
  nativeEvent: AnyNativeEvent,
  nativeEventTarget: null | EventTarget,
  eventSystemFlags: EventSystemFlags,
  targetContainer: EventTarget
) {
  SimpleEventPlugin.extractEvents(
    dispatchQueue,
    domEventName,
    targetInst,
    nativeEvent,
    nativeEventTarget,
    eventSystemFlags,
    targetContainer
  );
  const shouldProcessPolyfillPlugins =
    (eventSystemFlags & SHOULD_NOT_PROCESS_POLYFILL_EVENT_PLUGINS) === 0;
  // 冒泡阶段执行，捕获阶段不执行
  if (shouldProcessPolyfillPlugins) {
    EnterLeaveEventPlugin.extractEvents(
      dispatchQueue,
      domEventName,
      targetInst,
      nativeEvent,
      nativeEventTarget,
      eventSystemFlags,
      targetContainer
    );
    ChangeEventPlugin.extractEvents(
      dispatchQueue,
      domEventName,
      targetInst,
      nativeEvent,
      nativeEventTarget,
      eventSystemFlags,
      targetContainer
    );
    SelectEventPlugin.extractEvents(
      dispatchQueue,
      domEventName,
      targetInst,
      nativeEvent,
      nativeEventTarget,
      eventSystemFlags,
      targetContainer
    );
    BeforeInputEventPlugin.extractEvents(
      dispatchQueue,
      domEventName,
      targetInst,
      nativeEvent,
      nativeEventTarget,
      eventSystemFlags,
      targetContainer
    );
  }
}

/**
 * @param dispatchQueue - []
 * @param domEventName - 事件名称
 * @param eventSystemFlags - 事件类型标志，捕获阶段是 4，冒泡阶段是 0
 * @param nativeEvent - 浏览器的 event
 * @param nativeEventTarget - 原生事件对应的 target
 * @param targetInst - ancestorInst，nativeEvent 中的 e.target 所对应的 fiber
 * @param targetContainer - createRoot 时 <div id="root"><div>
 */
function extractEvents(
  dispatchQueue: DispatchQueue,
  domEventName: DOMEventName,
  targetInst: null | Fiber,
  nativeEvent: AnyNativeEvent,
  nativeEventTarget: null | EventTarget,
  eventSystemFlags: EventSystemFlags,
  targetContainer: EventTarget
): void {
  // click => onClick
  // domEventName: click
  // reactName: onClick
  const reactName = topLevelEventsToReactNames.get(domEventName);
  if (reactName === undefined) {
    return;
  }
  let SyntheticEventCtor = SyntheticEvent;
  let reactEventType: string = domEventName;
  // 根据事件名绑定相应的合成事件：
  //  - SyntheticKeyboardEvent
  //  - SyntheticFocusEvent
  //  - SyntheticMouseEvent
  //  - SyntheticDragEvent
  //  - SyntheticTouchEvent
  //  - SyntheticAnimationEvent
  //  - SyntheticTransitionEvent
  //  - SyntheticUIEvent
  //  - SyntheticWheelEvent
  //  - SyntheticClipboardEvent
  //  - SyntheticPointerEvent
  switch (domEventName) {
    case "keypress":
      // Firefox creates a keypress event for function keys too. This removes
      // the unwanted keypress events. Enter is however both printable and
      // non-printable. One would expect Tab to be as well (but it isn't).
      if (getEventCharCode(((nativeEvent: any): KeyboardEvent)) === 0) {
        return;
      }
    /* falls through */
    case "keydown":
    case "keyup":
      SyntheticEventCtor = SyntheticKeyboardEvent;
      break;
    case "focusin":
      reactEventType = "focus";
      SyntheticEventCtor = SyntheticFocusEvent;
      break;
    case "focusout":
      reactEventType = "blur";
      SyntheticEventCtor = SyntheticFocusEvent;
      break;
    case "beforeblur":
    case "afterblur":
      SyntheticEventCtor = SyntheticFocusEvent;
      break;
    case "click":
      // Firefox creates a click event on right mouse clicks. This removes the
      // unwanted click events.
      if (nativeEvent.button === 2) {
        return;
      }
    /* falls through */
    case "auxclick":
    case "dblclick":
    case "mousedown":
    case "mousemove":
    case "mouseup":
    // TODO: Disabled elements should not respond to mouse events
    /* falls through */
    case "mouseout":
    case "mouseover":
    case "contextmenu":
      SyntheticEventCtor = SyntheticMouseEvent;
      break;
    case "drag":
    case "dragend":
    case "dragenter":
    case "dragexit":
    case "dragleave":
    case "dragover":
    case "dragstart":
    case "drop":
      SyntheticEventCtor = SyntheticDragEvent;
      break;
    case "touchcancel":
    case "touchend":
    case "touchmove":
    case "touchstart":
      SyntheticEventCtor = SyntheticTouchEvent;
      break;
    case ANIMATION_END:
    case ANIMATION_ITERATION:
    case ANIMATION_START:
      SyntheticEventCtor = SyntheticAnimationEvent;
      break;
    case TRANSITION_END:
      SyntheticEventCtor = SyntheticTransitionEvent;
      break;
    case "scroll":
      SyntheticEventCtor = SyntheticUIEvent;
      break;
    case "wheel":
      SyntheticEventCtor = SyntheticWheelEvent;
      break;
    case "copy":
    case "cut":
    case "paste":
      SyntheticEventCtor = SyntheticClipboardEvent;
      break;
    case "gotpointercapture":
    case "lostpointercapture":
    case "pointercancel":
    case "pointerdown":
    case "pointermove":
    case "pointerout":
    case "pointerover":
    case "pointerup":
      SyntheticEventCtor = SyntheticPointerEvent;
      break;
    default:
      // Unknown event. This is used by createEventHandle.
      break;
  }

  const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;

  const accumulateTargetOnly =
    !inCapturePhase &&
    // TODO: ideally, we'd eventually add all events from
    // nonDelegatedEvents list in DOMPluginEventSystem.
    // Then we can remove this special list.
    // This is a breaking change that can wait until React 18.
    domEventName === "scroll";

  /**
   * @param targetFiber - targetInst，ancestorInst，nativeEvent 中的 e.target 所对应的 fiber
   * @param reactName - react 事件名，例如 onClick
   * @param nativeEventType - nativeEvent.type
   * @param inCapturePhase - 例如：load 在捕获和冒泡阶段都会触发
   * @param accumulateTargetOnly - 是不是 scroll
   * @param nativeEvent - 浏览器的 event
   */
  // 收集合成事件的监听器
  // 遍历目标节点到祖先节点，找到所有注册了该事件类型的监听器，将它们存储在一个数组中
  // 数组类型是 DispatchListener[]，它有这些属性：
  //  - instance: null | Fiber
  //  - listener: Function 例如：<div onClick={xxx} /> xxx 函数
  //  - currentTarget: EventTarget，例如如 button
  const listeners = accumulateSinglePhaseListeners(
    targetInst,
    reactName,
    nativeEvent.type,
    inCapturePhase,
    accumulateTargetOnly,
    nativeEvent
  );
  if (listeners.length > 0) {
    // Intentionally create event lazily.
    // 创建一个合成事件 SyntheticEvent，放到队列中
    const event: ReactSyntheticEvent = new SyntheticEventCtor(
      reactName,
      reactEventType,
      null,
      nativeEvent,
      nativeEventTarget
    );
    dispatchQueue.push({ event, listeners });
  }
}

/**
 * @param targetFiber - nativeEvent 中的 e.target 所对应的 fiber
 * @param reactName - react 事件名，例如 onClick
 * @param nativeEventType - nativeEvent.type
 * @param inCapturePhase - 例如：load 在捕获和冒泡阶段都会触发
 * @param accumulateTargetOnly - 是不是 scroll
 * @param nativeEvent - 浏览器的 event
 */
// 收集合成事件的监听器
// 遍历目标节点到祖先节点，找到所有注册了该事件类型的监听器，将它们存储在一个数组中
// 数组类型是 DispatchListener[]，它有这些属性：
//  - instance: null | Fiber
//  - listener: Function
//  - currentTarget: EventTarget
export function accumulateSinglePhaseListeners(
  targetFiber: Fiber | null,
  reactName: string | null,
  nativeEventType: string,
  inCapturePhase: boolean,
  accumulateTargetOnly: boolean,
  nativeEvent: AnyNativeEvent
): Array<DispatchListener> {
  // 捕获阶段的事件名：onClickCapture
  // 冒泡阶段的事件名：onClick
  const captureName = reactName !== null ? reactName + "Capture" : null;
  const reactEventName = inCapturePhase ? captureName : reactName;
  let listeners: Array<DispatchListener> = [];

  // 目标属性，
  let instance = targetFiber;
  let lastHostComponent = null;

  while (instance !== null) {
    // 用 vite 创建的项目
    // stateNode: img,            tag: 5
    // stateNode: a ,             tag: 5
    // stateNode: div,            tag: 5
    // stateNode: div.app,        tag: 5
    // stateNode: null,           tag: 5
    // stateNode: null,           tag: 8
    // stateNode: FiberRootNode,  tag: 3
    // tag 类型是 WorkTag，文件：packages/react-reconciler/src/ReactWorkTags.js
    // stateNode 与 fiber 相关的 dom
    const { stateNode, tag } = instance;
    // Handle listeners that are on HostComponents (i.e. <div>)
    if (
      (tag === HostComponent ||
        (enableFloat ? tag === HostHoistable : false) ||
        (enableHostSingletons ? tag === HostSingleton : false)) &&
      stateNode !== null
    ) {
      lastHostComponent = stateNode;

      // Standard React on* listeners, i.e. onClick or onClickCapture
      if (reactEventName !== null) {
        /**
         * @param inst - targetFiber，nativeEvent 中的 e.target 所对应的 fiber
         * @param registrationName - reactEventName: isCapture ? onClickCapture : onClick
         */
        const listener = getListener(instance, reactEventName);
        if (listener != null) {
          listeners.push(
            createDispatchListener(instance, listener, lastHostComponent)
          );
        }
      }
    }
    if (accumulateTargetOnly) {
      break;
    }
    instance = instance.return;
  }
  return listeners;
}

/**
 * @param  inst - targetFiber，nativeEvent 中的 e.target 所对应的 fiber
 * @param registrationName - isCapture ? onClickCapture : onClick
 */
export default function getListener(
  inst: Fiber,
  registrationName: string
): Function | null {
  const stateNode = inst.stateNode;
  if (stateNode === null) {
    // Work in progress (ex: onload events in incremental mode).
    return null;
  }
  const props = getFiberCurrentPropsFromNode(stateNode);
  if (props === null) {
    // Work in progress.
    return null;
  }
  // 从 props 中获取到事件
  // <div onClick={xxx} />
  const listener = props[registrationName];
  // 如果 inst.type 是 button，input, select, textarea
  // 并且 props.disabled 为 true
  // 则 onClick, ... 不会有监听器
  if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
    return null;
  }

  if (listener && typeof listener !== "function") {
    throw new Error(
      `Expected \`${registrationName}\` listener to be a function, instead got a value of \`${typeof listener}\` type.`
    );
  }

  return listener;
}

export function processDispatchQueue(
  dispatchQueue: DispatchQueue,
  eventSystemFlags: EventSystemFlags
): void {
  const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
  for (let i = 0; i < dispatchQueue.length; i++) {
    const { event, listeners } = dispatchQueue[i];
    processDispatchQueueItemsInOrder(event, listeners, inCapturePhase);
  }
  rethrowCaughtError();
}

// 捕获阶段是从 root 向下传播一直到 target
//  - [rootListener, ..., targetListener]
//  - 模拟捕获，就需要从最后一个节点开始执行回调函数
// 冒泡阶段是从 target 向上传播传播一直到 root
//  - [targetListener, ..., rootListener]
//  - 模拟冒泡，就需要从第一个节点开始执行回调函数
// 在每次执行回调函数之前，检查当前是否处于批量更新模式（batchedUpdates）
//  - 如果不是，则开启批量更新模式，并在所有回调函数执行完毕后再关闭批量更新模式。这样可以避免多次渲染组件，提高性能
/**
 *
 * @param event - 合成事件
 * @param dispatchListeners - DispatchListener[]
 *  DispatchListener:
 *    - instance: null | Fiber，对应的 fiber
 *    - listener: Function，事件函数
 *    - currentTarget: EventTarget，例如 button
 * @param inCapturePhase - 是否是捕获阶段
 */
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;
      }
      /**
       * @param event - 例如：button 对应的 fiber
       * @param listener - 例如：事件函数
       * @param currentTarget - 例如：button
       */
      executeDispatch(event, listener, currentTarget);
      previousInstance = instance;
    }
  } else {
    for (let i = 0; i < dispatchListeners.length; i++) {
      const { instance, currentTarget, listener } = dispatchListeners[i];
      if (instance !== previousInstance && event.isPropagationStopped()) {
        return;
      }
      executeDispatch(event, listener, currentTarget);
      previousInstance = instance;
    }
  }
}

function executeDispatch(
  event: ReactSyntheticEvent,
  listener: Function,
  currentTarget: EventTarget
): void {
  const type = event.type || "unknown-event";
  event.currentTarget = currentTarget;
  // 用于在执行回调函数时捕获第一个错误并记录它
  // 这个方法是在 React 的错误处理机制中使用的，它确保了在 React 组件中的回调函数中发生的错误不会导致整个应用程序崩溃
  // 如果在回调函数中发生错误，React 会记录错误并继续执行应用程序，而不是崩溃
  invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, event);
  event.currentTarget = null;
}

var currentTime = getCurrentTime();

var startTime;
if (typeof options === "object" && options !== null) {
  var delay = options.delay;
  if (typeof delay === "number" && delay > 0) {
    startTime = currentTime + delay;
  } else {
    startTime = currentTime;
  }
} else {
  startTime = currentTime;
}

var timeout;
switch (priorityLevel) {
  case ImmediatePriority:
    timeout = IMMEDIATE_PRIORITY_TIMEOUT;
    break;
  case UserBlockingPriority:
    timeout = USER_BLOCKING_PRIORITY_TIMEOUT;
    break;
  case IdlePriority:
    timeout = IDLE_PRIORITY_TIMEOUT;
    break;
  case LowPriority:
    timeout = LOW_PRIORITY_TIMEOUT;
    break;
  case NormalPriority:
  default:
    timeout = NORMAL_PRIORITY_TIMEOUT;
    break;
}

var expirationTime = startTime + timeout;

if (startTime > currentTime) {
  newTask.sortIndex = startTime;
  push(timerQueue, newTask);
  if (peek(taskQueue) === null && newTask === peek(timerQueue)) {
    if (isHostTimeoutScheduled) {
      cancelHostTimeout();
    } else {
      isHostTimeoutScheduled = true;
    }
    requestHostTimeout(handleTimeout, startTime - currentTime);
  }
} else {
  newTask.sortIndex = expirationTime;
  push(taskQueue, newTask);
  if (!isHostCallbackScheduled && !isPerformingWork) {
    isHostCallbackScheduled = true;
    requestHostCallback(flushWork);
  }
}

function push<T: Node>(heap: Heap<T>, node: T): void {
  const index = heap.length;
  heap.push(node);
  siftUp(heap, node, index);
}

function siftUp<T: Node>(heap: Heap<T>, node: T, i: number): void {
  let index = i;
  while (index > 0) {
    const parentIndex = (index - 1) >>> 1;
    const parent = heap[parentIndex];
    if (compare(parent, node) > 0) {
      heap[parentIndex] = node;
      heap[index] = parent;
      index = parentIndex;
    } else {
      return;
    }
  }
}

function pop<T: Node>(heap: Heap<T>): T | null {
  if (heap.length === 0) {
    return null;
  }
  const first = heap[0];
  const last = heap.pop();
  if (last !== first) {
    heap[0] = last;
    siftDown(heap, last, 0);
  }
  return first;
}

function siftDown<T: Node>(heap: Heap<T>, node: T, i: number): void {
  let index = i;
  const length = heap.length;
  const halfLength = length >>> 1;
  while (index < halfLength) {
    const leftIndex = (index + 1) * 2 - 1;
    const left = heap[leftIndex];
    const rightIndex = leftIndex + 1;
    const right = heap[rightIndex];

    if (compare(left, node) < 0) {
      if (rightIndex < length && compare(right, left) < 0) {
        heap[index] = right;
        heap[rightIndex] = node;
        index = rightIndex;
      } else {
        heap[index] = left;
        heap[leftIndex] = node;
        index = leftIndex;
      }
    } else if (rightIndex < length && compare(right, node) < 0) {
      heap[index] = right;
      heap[rightIndex] = node;
      index = rightIndex;
    } else {
      return;
    }
  }
}

function compare(a: Node, b: Node) {
  const diff = a.sortIndex - b.sortIndex;
  return diff !== 0 ? diff : a.id - b.id;
}

const requestHostTimeout = (callback, ms) => {
  setTimeout(() => {
    callback(getCurrentTime());
  }, ms);
};

function handleTimeout(currentTime: number) {
  isHostTimeoutScheduled = false;
  advanceTimers(currentTime);

  if (!isHostCallbackScheduled) {
    if (peek(taskQueue) !== null) {
      isHostCallbackScheduled = true;
      requestHostCallback(flushWork);
    } else {
      const firstTimer = peek(timerQueue);
      if (firstTimer !== null) {
        requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
      }
    }
  }
}

let scheduledHostCallback = null;
let schedulePerformWorkUntilDeadline;

const performWorkUntilDeadline = () => {
  if (scheduledHostCallback !== null) {
    const hasMoreWork = scheduledHostCallback();
    if (hasMoreWork) {
      schedulePerformWorkUntilDeadline();
    }
  }
};

const channel = new MessageChannel();
const port = channel.port2;
channel.port1.onmessage = performWorkUntilDeadline;
schedulePerformWorkUntilDeadline = () => {
  port.postMessage(null);
};

const requestHostCallback = (callback) => {
  scheduledHostCallback = callback;
  schedulePerformWorkUntilDeadline();
};

function flushWork(hasTimeRemaining: boolean, initialTime: number) {
  isHostCallbackScheduled = false;
  if (isHostTimeoutScheduled) {
    isHostTimeoutScheduled = false;
    cancelHostTimeout();
  }

  isPerformingWork = true;
  const previousPriorityLevel = currentPriorityLevel;
  try {
    return workLoop(hasTimeRemaining, initialTime);
  } finally {
    currentTask = null;
    currentPriorityLevel = previousPriorityLevel;
    isPerformingWork = false;
  }
}

function workLoop(hasTimeRemaining: boolean, initialTime: number) {
  let currentTime = initialTime;
  advanceTimers(currentTime);
  currentTask = peek(taskQueue);
  while (
    currentTask !== null &&
    !(enableSchedulerDebugging && isSchedulerPaused)
  ) {
    if (
      // ① 表示当前任务过期时间大于当前时间
      currentTask.expirationTime > currentTime &&
      // hasTimeRemaining 表示有没有剩余时间
      // shouldYidldToHost() 表示需要让出给主机
      (!hasTimeRemaining || shouldYieldToHost())
    ) {
      break;
    }
    // 任务没有过期并且还有剩余时间（或者不需要让出控制权）

    const callback = currentTask.callback;
    if (typeof callback === "function") {
      // 将当前任务的回调函数清空
      currentTask.callback = null;
      // 设置当前的优先级
      currentPriorityLevel = currentTask.priorityLevel;
      // 任务是否超时
      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
      // ② 执行当前任务回调函数传入是否超时，并返回一个函数
      const continuationCallback = callback(didUserCallbackTimeout);
      currentTime = getCurrentTime();
      // ③ 如果返回了一个函数，说明当前任务还没有完成，需要继续执行
      if (typeof continuationCallback === "function") {
        currentTask.callback = continuationCallback;
        advanceTimers(currentTime);
        return true;
      } else {
        // ④ 没返回函数，说明当前任务已经完成，从任务队列中移除
        if (currentTask === peek(taskQueue)) {
          pop(taskQueue);
        }
        advanceTimers(currentTime);
      }
    } else {
      // 如果任务没有回到函数，就从任务队列中移除
      pop(taskQueue);
    }
    currentTask = peek(taskQueue);
  }
}

function advanceTimers(currentTime: number) {
  let timer = peek(timerQueue);
  while (timer !== null) {
    if (timer.callback === null) {
      pop(timerQueue);
    } else if (timer.startTime <= currentTime) {
      pop(timerQueue);
      timer.sortIndex = timer.expirationTime;
      push(taskQueue, timer);
    } else {
      return;
    }
    timer = peek(timerQueue);
  }
}

function A() {
  useEffect(() => {
    return () => {
      console.log("执行销毁函数 A");
    };
  }, []);
  useEffect(() => {
    return () => {
      console.log("执行销毁函数 A1");
    };
  }, []);
  return <>文本A</>;
}

let effect = {
  destroy: () => {
    console.log("执行销毁函数 A"));
  },
  next: {
    destroy: () => {
      console.log("执行销毁函数 A1");
    },
    next: {
      destroy: () => {
        console.log("执行销毁函数 A");
      },
      next: { ... },
    },
  },
};

function commitHookEffectListUnmount(
  flags: HookFlags,
  finishedWork: Fiber,
  nearestMountedAncestor: Fiber | null
) {
  const updateQueue: FunctionComponentUpdateQueue | null =
    (finishedWork.updateQueue: any);
  const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  if (lastEffect !== null) {
    const firstEffect = lastEffect.next;
    let effect = firstEffect;
    do {
      if ((effect.tag & flags) === flags) {
        // Unmount
        const destroy = effect.destroy;
        effect.destroy = undefined;
        if (destroy !== undefined) {
          destroy();
        }
      }
      effect = effect.next;
    } while (effect !== firstEffect);
  }
}

function detachFiberAfterEffects(fiber) {
  const alternate = fiber.alternate;
  if (alternate !== null) {
    fiber.alternate = null;
    detachFiberAfterEffects(alternate);
  }
  fiber.child = null;
  fiber.deletions = null;
  fiber.sibling = null;

  if (fiber.tag === HostComponent) {
    const hostInstance = fiber.stateNode;
    if (hostInstance !== null) {
      delete hostInstance[internalInstanceKey];
      delete hostInstance[internalPropsKey];
      delete hostInstance[internalEventHandlersKey];
      delete hostInstance[internalEventHandlerListenersKey];
      delete hostInstance[internalEventHandlesSetKey];
    }
  }
  fiber.stateNode = null;
  fiber.return = null;
  fiber.dependencies = null;
  fiber.memoizedProps = null;
  fiber.memoizedState = null;
  fiber.pendingProps = null;
  fiber.stateNode = null;
  fiber.updateQueue = null;
}

function detachAlternateSiblings(parentFiber) {
  const previousFiber = parentFiber.alternate;
  if (previousFiber !== null) {
    let detachedChild = previousFiber.child;
    if (detachedChild !== null) {
      previousFiber.child = null;
      do {
        const detachedSibling = detachedChild.sibling;
        detachedChild.sibling = null;
        detachedChild = detachedSibling;
      } while (detachedChild !== null);
    }
  }
}

function commitPassiveUnmountOnFiber(finishedWork, type) {
  recursivelyTraversePassiveUnmountEffects(finishedWork);
  if (finishedWork.flags & Passive) {
    commitHookPassiveUnmountEffects(
      finishedWork,
      finishedWork.return,
      HookPassive | HookHasEffect
    );
  }
}

function commitPassiveUnmountOnFiber(finishedWork) {
  switch (finishedWork.tag) {
    case FunctionComponent: {
      // ① fiber 节点的子节点会走这里
      recursivelyTraversePassiveUnmountEffects(finishedWork);
      // ② fiber 节点本身
      if (finishedWork.flags & Passive) {
        commitHookPassiveUnmountEffects(
          finishedWork,
          finishedWork.return,
          HookPassive | HookHasEffect
        );
      }
      break;
    }
  }
}

SimpleEventPlugin.registerEvents();
EnterLeaveEventPlugin.registerEvents();
ChangeEventPlugin.registerEvents();
SelectEventPlugin.registerEvents();
BeforeInputEventPlugin.registerEvents();

const simpleEventPluginEvents = ["click", "mousedown", "mouseenter", ...];

// Interface 是 react 定义的各种合成事件
// nativeEvent 是原生事件
for (const propName in Interface) {
  if (!Interface.hasOwnProperty(propName)) {
    continue;
  }
  const normalize = Interface[propName];
  // normalize 如果存在，说明 propName 对应的属性在合成事件中是一个函数
  // react 这么设计的原因是为了消除不同浏览器之间的差异
  // 见[WheelEventInterface 事件]
  if (normalize) {
    this[propName] = normalize(nativeEvent);
  } else {
    this[propName] = nativeEvent[propName];
  }
}

listeners = [targetListener, ..., rootListener]

// 目标节点
let instance = targetFiber;
while (instance !== null) {
  // 用 vite 创建的项目
  // stateNode: img,            tag: 5
  // stateNode: a ,             tag: 5
  // stateNode: div,            tag: 5
  // stateNode: div.app,        tag: 5
  // stateNode: null,           tag: 5
  // stateNode: null,           tag: 8
  // stateNode: FiberRootNode,  tag: 3
  // tag 类型是 WorkTag，文件：packages/react-reconciler/src/ReactWorkTags.js
  // stateNode 与 fiber 相关的 dom
  const { stateNode, tag } = instance;

  // 省略若干代码 ...

  const listener = getListener(instance, reactEventName);
  if (listener != null) {
    listeners.push(
      createDispatchListener(instance, listener, lastHostComponent)
    );
  }

  // 省略若干代码 ...

  // 当前节点的父节点
  instance = instance.return;
}

listeners = [targetListener, ..., rootListener]

const App = () => {
  return (
    <div>
      <button>+1</button>
      <A count={0} />
    </div>
  );
};
const A = (props) => {
  useEffect(() => {
    console.log(props.count);
  }, [props.count]);
  return <div>{props.count}</div>;
};

commitPassiveUnmountOnFiber(root.current);

function commitPassiveUnmountOnFiber(finishedWork) {
  // 省略了处理不同的 WorkTag
  recursivelyTraversePassiveUnmountEffects(finishedWork);
}

function recursivelyTraversePassiveUnmountEffects(parentFiber) {
  // 省略了其他处理
  if (parentFiber.subtreeFlags & PassiveMask) {
    let child = parentFiber.child;
    while (child !== null) {
      commitPassiveUnmountOnFiber(child);
      child = child.sibling;
    }
  }
}