四月八日

export default class App extends React.Component {
  state = {
    show: false,
  };
  ref = React.createRef();
  componentDidMount() {
    const that = this;
    document.addEventListener("click", () => {
      that.setState({ show: false });
      console.log("document");
    });
    this.ref.current.addEventListener("click", () => {
      console.log("ref");
    });
  }
  render() {
    return (
      <div
        ref={this.ref}
        onClick={() => this.setState({ show: true }, console.log("dom"))}
      >
        点击 {this.state.show ? "show" : "null"}
      </div>
    );
  }
}

import React from "react";

export default class App extends React.Component {
  parentRef = React.createRef();
  childRef = React.createRef();
  componentDidMount() {
    this.parentRef.current.addEventListener(
      "click",
      () => {
        console.log("父元素原生事件捕获");
      },
      true
    );
    this.parentRef.current.addEventListener("click", () => {
      console.log("父元素原生事件冒泡");
    });
    this.childRef.current.addEventListener(
      "click",
      () => {
        console.log("子元素原生事件捕获");
      },
      true
    );
    this.childRef.current.addEventListener("click", () => {
      console.log("子元素原生事件冒泡");
    });
    document.addEventListener(
      "click",
      () => {
        console.log("document 捕获");
      },
      true
    );
    document.addEventListener("click", () => {
      console.log("document 冒泡");
    });
  }
  parentBubble = () => {
    console.log("父组件React事件冒泡");
  };
  parenteCapture = () => {
    console.log("父组件React事件捕获");
  };
  childBubble = () => {
    console.log("子组件React事件冒泡");
  };
  childeCapture = () => {
    console.log("子组件React事件捕获");
  };
  render() {
    return (
      <div
        ref={this.parentRef}
        onClick={this.parentBubble}
        onClickCapture={this.parenteCapture}
      >
        <p
          ref={this.childRef}
          onClick={this.childBubble}
          onClickCapture={this.childeCapture}
        >
          事件
        </p>
      </div>
    );
  }
}

document.addEventListener("click", dispatchEvent);
function dispatchEvent(event) {
  let paths = [];
  let current = event.target;
  while (current) {
    paths.push(current);
    current = current.parentNode;
  }
  for (let i = paths.length - 1; i >= 0; i--) {
    let handle = paths[i].onClickCapture;
    handle && handle();
  }
  for (let i = 0; i < paths.length; i++) {
    let handle = paths[i].onClick;
    handle && handle();
  }
}

function dispatchEvent(event, useCapture) {
  let paths = [];
  let current = event.target;
  while (current) {
    paths.push(current);
    current = current.parentNode;
  }
  if (useCapture) {
    for (let i = paths.length - 1; i >= 0; i--) {
      let handle = paths[i].onClickCapture;
      handle && handle();
    }
  } else {
    for (let i = 0; i < paths.length; i++) {
      let handle = paths[i].onClick;
      handle && handle();
    }
  }
}
root.addEventListener("click", (e) => dispatchEvent(e, true), true);
root.addEventListener("click", (e) => dispatchEvent(e, false));

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

var topLevelEventsToReactNames = new Map();
//                              click       onClick
function registerSimpleEvent(domEventName, reactName) {
  topLevelEventsToReactNames.set(domEventName, reactName);
  registerTwoPhaseEvent(reactName, [domEventName]);
}

function registerTwoPhaseEvent(registrationName, dependencies) {
  registerDirectEvent(registrationName, dependencies);
  registerDirectEvent(registrationName + "Capture", dependencies);
}

function registerDirectEvent(registrationName, dependencies) {
  // 合成事件和原生事件的对应关系 {onAbort:['abort']}
  registrationNameDependencies[registrationName] = dependencies;

  {
    var lowerCasedName = registrationName.toLowerCase();

    // 内部用于验证事件的对象,保存的是驼峰命名和非驼峰命名之间的关系  {onclick:onClick}
    possibleRegistrationNames[lowerCasedName] = registrationName;

    if (registrationName === "onDoubleClick") {
      possibleRegistrationNames.ondblclick = registrationName;
    }
  }
  //所有原生事件名称的 set 集合 set([click,cancel])
  for (var i = 0; i < dependencies.length; i++) {
    allNativeEvents.add(dependencies[i]);
  }
}

function listenToAllSupportedEvents(rootContainerElement) {
  allNativeEvents.forEach(function (domEventName) {
    // 特殊处理,这个方法只会在 document 上
    if (domEventName !== "selectionchange") {
      // 排除那些没有冒泡阶段的事件
      if (!nonDelegatedEvents.has(domEventName)) {
        listenToNativeEvent(domEventName, false, rootContainerElement);
      }
      listenToNativeEvent(domEventName, true, rootContainerElement);
    }
  });

  ownerDocument[listeningMarker] = true;
  listenToNativeEvent("selectionchange", false, ownerDocument);
}

function listenToNativeEvent(domEventName, isCapturePhaseListener, target) {
  var eventSystemFlags = 0;

  // 添加捕获阶段的标识
  if (isCapturePhaseListener) {
    eventSystemFlags |= IS_CAPTURE_PHASE;
  }

  addTrappedEventListener(
    target,
    domEventName,
    eventSystemFlags,
    isCapturePhaseListener
  );
}

function addTrappedEventListener(
  targetContainer,
  domEventName,
  eventSystemFlags,
  isCapturePhaseListener,
  isDeferredListenerForLegacyFBSupport
) {
  // 创建事件回调函数
  var listener = createEventListenerWrapperWithPriority(
    targetContainer,
    domEventName,
    eventSystemFlags
  );

  var isPassiveListener = undefined;
  // 是否支持 passive 参数
  // addEventListener 第三个参数可以写为一个对象 { capture: false, once: true,passive:true }
  // capture 表示冒泡阶段执行还是捕获阶段执行
  // once 标识绑定事件只会执行一次就被移除
  // passive 是否执行默认事件,有些默认事件和浏览器行为绑定比如移动端 touchstart 会触发浏览器滚动
  // 如果使用 event.preventDefault() 会调用函数后才会停止默认行为, 可以使用 passive:false 直接阻止默认行为
  if (passiveBrowserEventsSupported) {
    if (
      domEventName === "touchstart" ||
      domEventName === "touchmove" ||
      domEventName === "wheel"
    ) {
      isPassiveListener = true;
    }
  }

  targetContainer = targetContainer;
  var unsubscribeListener;

  // 利用 addEventListener 绑定事件监听函数

  if (isCapturePhaseListener) {
    if (isPassiveListener !== undefined) {
      unsubscribeListener = addEventCaptureListenerWithPassiveFlag(
        targetContainer,
        domEventName,
        listener,
        isPassiveListener
      );
    } else {
      unsubscribeListener = addEventCaptureListener(
        targetContainer,
        domEventName,
        listener
      );
    }
  } else {
    if (isPassiveListener !== undefined) {
      unsubscribeListener = addEventBubbleListenerWithPassiveFlag(
        targetContainer,
        domEventName,
        listener,
        isPassiveListener
      );
    } else {
      unsubscribeListener = addEventBubbleListener(
        targetContainer,
        domEventName,
        listener
      );
    }
  }
}

function getEventPriority(domEventName) {
  switch (domEventName) {
    // Used by SimpleEventPlugin:
    case "cancel":
    case "click":
    case "close":
    case "contextmenu":
    case "copy":
    case "cut":
    case "auxclick":
    case "dblclick":
    case "dragend":
    case "dragstart":
    case "drop":
    case "focusin":
    case "focusout":
    case "input":
    case "invalid":
    case "keydown":
    case "keypress":
    case "keyup":
    case "mousedown":
    case "mouseup":
    case "paste":
    case "pause":
    case "play":
    case "pointercancel":
    case "pointerdown":
    case "pointerup":
    case "ratechange":
    case "reset":
    case "resize":
    case "seeked":
    case "submit":
    case "touchcancel":
    case "touchend":
    case "touchstart":
    case "volumechange": // Used by polyfills:
    // eslint-disable-next-line no-fallthrough

    case "change":
    case "selectionchange":
    case "textInput":
    case "compositionstart":
    case "compositionend":
    case "compositionupdate": // Only enableCreateEventHandleAPI:
    // eslint-disable-next-line no-fallthrough

    case "beforeblur":
    case "afterblur": // Not used by React but could be by user code:
    // eslint-disable-next-line no-fallthrough

    case "beforeinput":
    case "blur":
    case "fullscreenchange":
    case "focus":
    case "hashchange":
    case "popstate":
    case "select":
    case "selectstart":
      return DiscreteEventPriority;

    case "drag":
    case "dragenter":
    case "dragexit":
    case "dragleave":
    case "dragover":
    case "mousemove":
    case "mouseout":
    case "mouseover":
    case "pointermove":
    case "pointerout":
    case "pointerover":
    case "scroll":
    case "toggle":
    case "touchmove":
    case "wheel": // Not used by React but could be by user code:
    // eslint-disable-next-line no-fallthrough

    case "mouseenter":
    case "mouseleave":
    case "pointerenter":
    case "pointerleave":
      return ContinuousEventPriority;

    case "message": {
      // We might be in the Scheduler callback.
      // Eventually this mechanism will be replaced by a check
      // of the current priority on the native scheduler.
      var schedulerPriority = getCurrentPriorityLevel();

      switch (schedulerPriority) {
        case ImmediatePriority:
          return DiscreteEventPriority;

        case UserBlockingPriority:
          return ContinuousEventPriority;

        case NormalPriority:
        case LowPriority:
          // TODO: Handle LowSchedulerPriority, somehow. Maybe the same lane as hydration.
          return DefaultEventPriority;

        case IdlePriority:
          return IdleEventPriority;

        default:
          return DefaultEventPriority;
      }
    }

    default:
      return DefaultEventPriority;
  }
}

function createEventListenerWrapperWithPriority(
  targetContainer,
  domEventName,
  eventSystemFlags
) {
  var eventPriority = getEventPriority(domEventName);
  var listenerWrapper;

  switch (eventPriority) {
    case DiscreteEventPriority:
      listenerWrapper = dispatchDiscreteEvent;
      break;

    case ContinuousEventPriority:
      listenerWrapper = dispatchContinuousEvent;
      break;

    case DefaultEventPriority:
    default:
      listenerWrapper = dispatchEvent;
      break;
  }

  return listenerWrapper.bind(
    null,
    domEventName,
    eventSystemFlags,
    targetContainer
  );
}

batchedUpdates(function () {
  return dispatchEventsForPlugins(
    domEventName, // 事件名称
    eventSystemFlags, // 捕获阶段标识
    nativeEvent, // 原生事件对象
    ancestorInst
  );
});

function dispatchEventsForPlugins(
  domEventName,
  eventSystemFlags,
  nativeEvent,
  targetInst,
  targetContainer
) {
  var nativeEventTarget = getEventTarget(nativeEvent);
  var dispatchQueue = [];

    //  内部调用不同的处理函数,用于处理没有原生事件对应的 React 事件,例如 onBeforeInput
    // if (shouldProcessPolyfillPlugins) {
    //     extractEvents$2(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget);
    //     extractEvents$1(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget);
    //     extractEvents$3(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget);
    //     extractEvents(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget);
    // }
  extractEvents(
    dispatchQueue,
    domEventName,
    targetInst,
    nativeEvent,
    nativeEventTarget,
    eventSystemFlags
  );
  processDispatchQueue(dispatchQueue, eventSystemFlags);
}

function extractEvents(
  dispatchQueue,
  domEventName,
  targetInst,
  nativeEvent,
  nativeEventTarget,
  eventSystemFlags,
  targetContainer
) {
  // 不同的事件类型,对应不同的合成事件构造函数
  // 内部实现 preventDefault stopPropagation
  switch (domEventName) {
    case "click":
      SyntheticEventCtor = SyntheticMouseEvent;
    case "drag":
      SyntheticEventCtor = SyntheticDragEvent;
  }

  // 从当前节点循环遍历到根节点, 收集所有上级节点中绑定当前方法的节点和它的绑定函数
  var _listeners = accumulateSinglePhaseListeners(
    targetInst,
    reactName,
    nativeEvent.type,
    inCapturePhase,
    accumulateTargetOnly
  );

  if (_listeners.length > 0) {
    // Intentionally create event lazily.
    var _event = new SyntheticEventCtor(
      reactName,
      reactEventType,
      null,
      nativeEvent,
      nativeEventTarget
    );

    dispatchQueue.push({
      event: _event,
      listeners: _listeners,
    });
  }
}

function processDispatchQueue(dispatchQueue, eventSystemFlags) {
  var inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;

  // 循环事件队列,依次触发合成事件
  for (let i = 0; i < dispatchQueue.length; i++) {
    const {event, listeners} = dispatchQueue[i];
    var previousInstance;

    (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;
          }
          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;
        }
      }
    }
  })()

  rethrowCaughtError();
}

function createUpdate(eventTime, lane) {
  const update = {
    eventTime,
    lane,
    // 区分触发更新的场景
    tag: UpdateState,
    payload: null,
    // UI 渲染后触发的回调函数
    callback: null,
    next: null,
  };
  return update;
}

const update = {
  lane,
  action,
  // 优化策略相关
  hasEagerState: false,
  eagerState: null,
  next: null,
};

const updateQueue = {
  baseState: null,
  firstBaseUpdate: null,
  lastBaseUpdate: null,
  shared: {
    pending: null,
  },
};

function Component(props, context, updater) {
  this.updater = updater || ReactNoopUpdateQueue;
}
Component.prototype.setState = function (partialState, callback) {
  this.updater.enqueueSetState(this, partialState, callback, "setState");
};

function constructClassInstance() {
  var instance = new ctor(props, context);
  adoptClassInstance(workInProgress, instance);
}

function adoptClassInstance(workInProgress, instance) {
  instance.updater = classComponentUpdater;
  workInProgress.stateNode = instance;
  set(instance, workInProgress);
}

var classComponentUpdater = {
  isMounted: isMounted,
  enqueueSetState: function (inst, payload, callback) {
    var fiber = get(inst);
    var eventTime = requestEventTime();
    var lane = requestUpdateLane(fiber);
    var update = createUpdate(eventTime, lane);
    update.payload = payload;

    if (callback !== undefined && callback !== null) {
      update.callback = callback;
    }

    enqueueUpdate(fiber, update);
    var root = scheduleUpdateOnFiber(fiber, lane, eventTime);

    if (root !== null) {
      entangleTransitions(root, fiber, lane);
    }
  },
  enqueueReplaceState: function (inst, payload, callback) {
    var fiber = get(inst);
    var eventTime = requestEventTime();
    var lane = requestUpdateLane(fiber);
    var update = createUpdate(eventTime, lane);
    update.tag = ReplaceState;
    update.payload = payload;

    if (callback !== undefined && callback !== null) {
      update.callback = callback;
    }

    enqueueUpdate(fiber, update);
    var root = scheduleUpdateOnFiber(fiber, lane, eventTime);

    if (root !== null) {
      entangleTransitions(root, fiber, lane);
    }
  },
  enqueueForceUpdate: function (inst, callback) {
    var fiber = get(inst);
    var eventTime = requestEventTime();
    var lane = requestUpdateLane(fiber);
    var update = createUpdate(eventTime, lane);
    update.tag = ForceUpdate;

    if (callback !== undefined && callback !== null) {
      update.callback = callback;
    }

    enqueueUpdate(fiber, update);
    var root = scheduleUpdateOnFiber(fiber, lane, eventTime);

    if (root !== null) {
      entangleTransitions(root, fiber, lane);
    }
  },
};

function enqueueUpdate(fiber, update, lane) {
  var updateQueue = fiber.updateQueue;

  if (updateQueue === null) {
    // Only occurs if the fiber has been unmounted.
    return;
  }

  var sharedQueue = updateQueue.shared;

  if (isInterleavedUpdate(fiber)) {
    var interleaved = sharedQueue.interleaved;

    if (interleaved === null) {
      // This is the first update. Create a circular list.
      update.next = update;
      // At the end of the current render, this queue's interleaved updates will
      // be transferred to the pending queue.

      pushInterleavedQueue(sharedQueue);
    } else {
      update.next = interleaved.next;
      interleaved.next = update;
    }

    sharedQueue.interleaved = update;
  } else {
    var pending = sharedQueue.pending;

    if (pending === null) {
      // This is the first update. Create a circular list.
      update.next = update;
    } else {
      update.next = pending.next;
      pending.next = update;
    }

    sharedQueue.pending = update;
  }
}

function markUpdateLaneFromFiberToRoot(sourceFiber, lane) {
  // Update the source fiber's lanes
  sourceFiber.lanes = mergeLanes(sourceFiber.lanes, lane);
  var alternate = sourceFiber.alternate;

  if (alternate !== null) {
    alternate.lanes = mergeLanes(alternate.lanes, lane);
  }

  {
    if (
      alternate === null &&
      (sourceFiber.flags & (Placement | Hydrating)) !== NoFlags
    ) {
      warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
    }
  }

  var node = sourceFiber;
  var parent = sourceFiber.return;

  while (parent !== null) {
    parent.childLanes = mergeLanes(parent.childLanes, lane);
    alternate = parent.alternate;

    if (alternate !== null) {
      alternate.childLanes = mergeLanes(alternate.childLanes, lane);
    } else {
      {
        if ((parent.flags & (Placement | Hydrating)) !== NoFlags) {
          warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
        }
      }
    }

    node = parent;
    parent = parent.return;
  }

  if (node.tag === HostRoot) {
    var root = node.stateNode;
    return root;
  } else {
    return null;
  }
}

unbatchedUpdates(() => {
  updateContainer(children, fiberRoot, parentComponent, callback);
});

ReactDOMRoot.prototype.render = ReactDOMBlockingRoot.prototype.render =
  function (children: ReactNodeList): void {
    const root = this._internalRoot;
    // 执行更新
    updateContainer(children, root, null, null);
  };

// a.js
class A {}
Array.prototype.slice = () => {};
// 表示一个无副作用的模块,可以删除
export default /*#__PURE__*/ A;

export const bar = "bar";
export const foo = "foo";

export default "foo-bar";

/***/ (function (module, __webpack_exports__, __webpack_require__) {
  "use strict";
  /* unused harmony export square */
  /* harmony export (immutable) */ __webpack_exports__["a"] = cube;
  function square(x) {
    return x * x;
  }

  function cube(x) {
    return x * x * x;
  }
});

// math.js
export const a = 1;
export const b = 2;

// index.js
import { a, b } from "./index";
const f = a;

export default {
  bar: "bar",
  foo: "foo",
};

//  修改为
export bar;
export foo;

function constructClassInstance(workInProgress, ctor, props) {
  var instance = new ctor(props, context);

  if (typeof getDerivedStateFromProps === "function") {
    getDerivedStateFromProps(nextProps, prevState);
  }

  if (typeof instance.componentWillMount === "function") {
    instance.componentWillMount();
  }
}

var children = Component(props, secondArg);

function finishClassComponent() {
  instance.render();
}

function updateClassInstance() {
  var shouldUpdate = instance.shouldComponentUpdate(
    newProps,
    newState,
    nextContext
  );
  if (shouldUpdate) {
    if (typeof instance.componentWillUpdate === "function") {
      instance.componentWillUpdate(newProps, newState, nextContext);
    }
    if (typeof instance.componentDidUpdate === "function") {
      workInProgress.flags |= Update;
    }
    if (typeof instance.getSnapshotBeforeUpdate === "function") {
      workInProgress.flags |= Snapshot;
    }
  }
}