React16源码: React中event事件触发的源码实现

作者：AllinToyou | 2024-02-07 14:03:03

踩

event 事件触发过程

1 ）概述

在之前事件绑定时，绑定的是两个方法
- 一个是 dispatchInteractiveEvent
- 另外一个 dispatchEvent
其实它们调用的方法都是差不多的，一开始会有一点小的区别

2 ）源码

定位到 packages/react-dom/src/events/ReactDOMEventListener.js#L165

进入 trapCapturedEvent

export function trapCapturedEvent(
  topLevelType: DOMTopLevelEventType,
  element: Document | Element,
) {
  if (!element) {
    return null;
  }
  // 注意这里，根据是否是 Interactive 类型的事件，调用的不同的回调，最终赋值给 dispatch
  const dispatch = isInteractiveTopLevelEventType(topLevelType)
    ? dispatchInteractiveEvent
    : dispatchEvent;

  addEventCaptureListener(
    element,
    getRawEventName(topLevelType),
    // Check if interactive and wrap in interactiveUpdates
    // 这边的topleveltype呢，是我们在进行 dom 的事件绑定的时候已经通过 bind 给它绑定好了
    // 在绑定事件的时候，就已经确定了一个值, 比如说是onChange这类的toplevel的事件名称
    dispatch.bind(null, topLevelType),
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.1 先看 dispatchInteractiveEvent

定位到 packages/react-dom/src/events/ReactDOMEventListener.js#L184

// packages/react-dom/src/events/ReactDOMEventListener.js#L184
// nativeEvent，就是我们事件触发的时候，我们的domm的事件体系会给我们一个event对象
// 可以通过它来进入默认行为之类的这么一个事件对象
function dispatchInteractiveEvent(topLevelType, nativeEvent) {
  interactiveUpdates(dispatchEvent, topLevelType, nativeEvent);
}

// packages/events/ReactGenericBatching.js#L55
export function interactiveUpdates(fn, a, b) {
  return _interactiveUpdatesImpl(fn, a, b);
}

// packages/events/ReactGenericBatching.js#L23
let _interactiveUpdatesImpl = function(fn, a, b) {
  return fn(a, b);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

可见 dispatchInteractiveEvent 最终还是要调用 dispatchEvent, 只是多包了一层

2.2 进入 dispatchEvent

定位到 packages/react-dom/src/events/ReactDOMEventListener.js#L188

export function dispatchEvent(
  topLevelType: DOMTopLevelEventType,
  nativeEvent: AnyNativeEvent,
) {
  if (!_enabled) {
    return;
  }

  // 注意这里
  const nativeEventTarget = getEventTarget(nativeEvent);
  let targetInst = getClosestInstanceFromNode(nativeEventTarget);
  // 存在 符合条件的，并且没有被挂载
  if (
    targetInst !== null &&
    typeof targetInst.tag === 'number' &&
    !isFiberMounted(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; // 这个 target 置空
  }

  // 这里只是一个对象，用于携带信息
  const bookKeeping = getTopLevelCallbackBookKeeping(
    topLevelType,
    nativeEvent,
    targetInst,
  );

  try {
    // Event queue being processed in the same cycle allows
    // `preventDefault`.
    batchedUpdates(handleTopLevel, bookKeeping);
  } finally {
    releaseTopLevelCallbackBookKeeping(bookKeeping);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

首先它要获取 nativeEventTarget，这个 target 就是我们 event 对象上面的 target
它是出于对各种系统的一个兼容调用的一个方法来进行一个 Polyfill

进入这个 getEventTarget 方法

import {TEXT_NODE} from '../shared/HTMLNodeType';

/**
 * Gets the target node from a native browser event by accounting for
 * inconsistencies in browser DOM APIs.
 *
 * @param {object} nativeEvent Native browser event.
 * @return {DOMEventTarget} Target node.
 */
function getEventTarget(nativeEvent) {
  // 这个是对 IE9 的兼容
  // Fallback to nativeEvent.srcElement for IE9
  // https://github.com/facebook/react/issues/12506
  let target = nativeEvent.target || nativeEvent.srcElement || window;

  // Normalize SVG <use> element events #4963
  if (target.correspondingUseElement) {
    target = target.correspondingUseElement;
  }

  // Safari may fire events on text nodes (Node.TEXT_NODE is 3).
  // @see http://www.quirksmode.org/js/events_properties.html
  return target.nodeType === TEXT_NODE ? target.parentNode : target;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这个方法主要是为了兼容浏览器API获取 target 对象, 最终根据是否是 TEXT_NODE 返回 target.parentNode 或 target

进入 getClosestInstanceFromNode

export function getClosestInstanceFromNode(node) {
  // 存在，直接 return
  if (node[internalInstanceKey]) {
    return node[internalInstanceKey]; // 这个就是 初始化dom节点的时候，在node上插入这么一个key, 来指定对应的 fiber 对象
  }

  // 不存在，一直找 parentNode
  while (!node[internalInstanceKey]) {
    if (node.parentNode) {
      node = node.parentNode;
    } else {
      // Top of the tree. This node must not be part of a React tree (or is
      // unmounted, potentially).
      return null;
    }
  }
  // 这个 inst 就是一个 fiber 对象， 找到是 HostComponent 或 HostText 类型的
  let inst = node[internalInstanceKey];
  if (inst.tag === HostComponent || inst.tag === HostText) {
    // In Fiber, this will always be the deepest root.
    return inst;
  }

  return null;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

进入 isFiberMounted

const MOUNTING = 1;
const MOUNTED = 2;
const UNMOUNTED = 3;

function isFiberMountedImpl(fiber: Fiber): number {
  let node = fiber;
  // 不存在，说明是即将插入或没有插入的节点
  if (!fiber.alternate) {
    // If there is no alternate, this might be a new tree that isn't inserted
    // yet. If it is, then it will have a pending insertion effect on it.
    // 这种是即将要插入的
    if ((node.effectTag & Placement) !== NoEffect) {
      return MOUNTING;
    }
    // 如果当前不是，向上找父节点，也是即将插入的
    while (node.return) {
      node = node.return;
      if ((node.effectTag & Placement) !== NoEffect) {
        return MOUNTING;
      }
    }
  } else {
    // 存在 alternate, 继续向上找
    while (node.return) {
      node = node.return;
    }
  }
  // 如果上级存在，并且是 HostRoot 说明已经被挂载了
  if (node.tag === HostRoot) {
    // TODO: Check if this was a nested HostRoot when used with
    // renderContainerIntoSubtree.
    return MOUNTED;
  }
  // If we didn't hit the root, that means that we're in an disconnected tree
  // that has been unmounted.
  // 其他情况都是未挂载的
  return UNMOUNTED;
}

export function isFiberMounted(fiber: Fiber): boolean {
  return isFiberMountedImpl(fiber) === MOUNTED;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

进入 getTopLevelCallbackBookKeeping

// packages/react-dom/src/events/ReactDOMEventListener.js#L50
const CALLBACK_BOOKKEEPING_POOL_SIZE = 10;
const callbackBookkeepingPool = [];

// Used to store ancestor hierarchy in top level callback
function getTopLevelCallbackBookKeeping(
  topLevelType,
  nativeEvent,
  targetInst,
): {
  topLevelType: ?DOMTopLevelEventType,
  nativeEvent: ?AnyNativeEvent,
  targetInst: Fiber | null,
  ancestors: Array<Fiber>,
} {
  if (callbackBookkeepingPool.length) {
    const instance = callbackBookkeepingPool.pop();
    instance.topLevelType = topLevelType;
    instance.nativeEvent = nativeEvent;
    instance.targetInst = targetInst;
    return instance;
  }
  return {
    topLevelType,
    nativeEvent,
    targetInst,
    ancestors: [],
  };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

这个函数就是一缓存机制
最终我们在执行完整个react事件之后，会把这个对象再归还到这个pool里面来进行一个存储
让浏览器的js运行环境不去删除这个对象，也让我们在后期不需要去重新创建一个对象，
以减少这个对象声明和对象垃圾回收的一个性能开销

进入 batchedUpdates

// packages/events/ReactGenericBatching.js#L29
let _batchedUpdatesImpl = function(fn, bookkeeping) {
  return fn(bookkeeping);
};
let isBatching = false;
export function batchedUpdates(fn, bookkeeping) {
  if (isBatching) {
    // If we are currently inside another batch, we need to wait until it
    // fully completes before restoring state.
    return fn(bookkeeping);
  }
  isBatching = true;
  try {
    return _batchedUpdatesImpl(fn, bookkeeping);
  } finally {
    // Here we wait until all updates have propagated, which is important
    // when using controlled components within layers:
    // https://github.com/facebook/react/issues/1698
    // Then we restore state of any controlled component.
    isBatching = false;
    // 下面的代码其实就跟 input 控制输入 有关的
    // 我们知道在 react 当中我们通过 value 给 input 标签上面去绑定了值，直接在外部输入的值
    // 如果没有 onChange 事件来处理这个 state，它这个值输不进去的，这就是 input的控制输入 的一个概念
    // 其控制就是在这里实现的
    const controlledComponentsHavePendingUpdates = needsStateRestore();
    if (controlledComponentsHavePendingUpdates) {
      // If a controlled event was fired, we may need to restore the state of
      // the DOM node back to the controlled value. This is necessary when React
      // bails out of the update without touching the DOM.
      _flushInteractiveUpdatesImpl();
      restoreStateIfNeeded();
    }
  }
}

// packages/events/ReactControlledComponent.js#L58
export function needsStateRestore(): boolean {
  return restoreTarget !== null || restoreQueue !== null;
}

export function restoreStateIfNeeded() {
  if (!restoreTarget) {
    return;
  }
  const target = restoreTarget;
  const queuedTargets = restoreQueue;
  restoreTarget = null;
  restoreQueue = null;

  restoreStateOfTarget(target);
  if (queuedTargets) {
    for (let i = 0; i < queuedTargets.length; i++) {
      restoreStateOfTarget(queuedTargets[i]);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

batchedUpdates 里面调用的方法是 handleTopLevel

function handleTopLevel(bookKeeping) {
  let targetInst = bookKeeping.targetInst;

  // Loop through the hierarchy, in case there's any nested components.
  // It's important that we build the array of ancestors before calling any
  // event handlers, because event handlers can modify the DOM, leading to
  // inconsistencies with ReactMount's node cache. See #1105.
  let ancestor = targetInst;
  do {
    // 如果不存在，就push，并且跳出循环
    if (!ancestor) {
      bookKeeping.ancestors.push(ancestor);
      break;
    }
    // 如果存在了，找到 Root 挂载节点
    const root = findRootContainerNode(ancestor);
    // 不存在挂载节点，则跳出
    if (!root) {
      break;
    }
    // 存在挂载节点
    bookKeeping.ancestors.push(ancestor);
    // 这个方法之前已经分析了，找到存储的 fiber 对象
    // 在这里, 这个时候传入了是这个root，对于大部分情况来讲, HostRoot 已经没有上级的节点，会是处于react的一个应用当中
    // 也可能是会有这种情况的, 比如通过一些比较 hack 的一些方式, 我们在react应用里面再去渲染了一个新的react应用
    // 这种方法也可能是存在的，所以在这边就尝试了这么去做
    // 因为它们两个如果确实出现这种情况，那么它们的root节点是不一样的
    // 事件正常来讲是要冒泡到最外层的那个root树的最顶上的
    // 所以这种情况需要去调用这个方法，去把所有的 ancestor 给找到，并且推到这个 bookKeeping.ancestors 里面
    ancestor = getClosestInstanceFromNode(root); 
  } while (ancestor);

  // 对于每一个 concest，去获取它的 targetInst 对大部分情况, 其实就是我们这个 targetInst 
  // 就是我们这个事件触发的那一个节点 event.target 对应的那个fiber对象
  for (let i = 0; i < bookKeeping.ancestors.length; i++) {
    targetInst = bookKeeping.ancestors[i];
    runExtractedEventsInBatch(
      bookKeeping.topLevelType,
      targetInst,
      bookKeeping.nativeEvent,
      getEventTarget(bookKeeping.nativeEvent),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

进入 findRootContainerNode

function findRootContainerNode(inst) {
  // TODO: It may be a good idea to cache this to prevent unnecessary DOM
  // traversal, but caching is difficult to do correctly without using a
  // mutation observer to listen for all DOM changes.
  // 向上找
  while (inst.return) {
    inst = inst.return;
  }
  // 如果不是 HostRoot 则失败
  if (inst.tag !== HostRoot) {
    // This can happen if we're in a detached tree.
    return null;
  }
  // 找到 react 应用挂载的 dom节点
  return inst.stateNode.containerInfo;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

进入 runExtractedEventsInBatch

export function runExtractedEventsInBatch(
  topLevelType: TopLevelType,
  targetInst: null | Fiber,
  nativeEvent: AnyNativeEvent,
  nativeEventTarget: EventTarget,
) {
  // 获取所有事件
  const events = extractEvents(
    topLevelType,
    targetInst,
    nativeEvent,
    nativeEventTarget,
  );
  runEventsInBatch(events);
}

// 生成事件对象
function extractEvents(
  topLevelType: TopLevelType,
  targetInst: null | Fiber,
  nativeEvent: AnyNativeEvent,
  nativeEventTarget: EventTarget,
): Array<ReactSyntheticEvent> | ReactSyntheticEvent | null {
  let events = null;
  // 调用每一个plugin, 在内部，调用 possiblePlugin.extractEvents
  for (let i = 0; i < plugins.length; i++) {
    // Not every plugin in the ordering may be loaded at runtime.
    const possiblePlugin: PluginModule<AnyNativeEvent> = plugins[i];
    if (possiblePlugin) {
      const extractedEvents = possiblePlugin.extractEvents(
        topLevelType,
        targetInst,
        nativeEvent,
        nativeEventTarget,
      );
      // 如果存在，则插入到对象中
      if (extractedEvents) {
        events = accumulateInto(events, extractedEvents);
      }
    }
  }
  return events;
}

let eventQueue: ?(Array<ReactSyntheticEvent> | ReactSyntheticEvent) = null;
export function runEventsInBatch(
  events: Array<ReactSyntheticEvent> | ReactSyntheticEvent | null,
) {
  if (events !== null) {
    eventQueue = accumulateInto(eventQueue, events);
  }

  // Set `eventQueue` to null before processing it so that we can tell if more
  // events get enqueued while processing.
  const processingEventQueue = eventQueue;
  eventQueue = null;

  if (!processingEventQueue) {
    return;
  }
  // 对这个 processingEventQueue, 可能是数组，也可能只有一个event的这个内容
  // 对它调用了这个 executeDispatchesAndReleaseTopLevel 方法
  forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);
  invariant(
    !eventQueue,
    'processEventQueue(): Additional events were enqueued while processing ' +
      'an event queue. Support for this has not yet been implemented.',
  );
  // This would be a good time to rethrow if any of the event handlers threw.
  rethrowCaughtError();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

进入 accumulateInto

// 把两个值(数组)合并，形成一个数组
function accumulateInto<T>(
  current: ?(Array<T> | T),
  next: T | Array<T>,
): T | Array<T> {
  invariant(
    next != null,
    'accumulateInto(...): Accumulated items must not be null or undefined.',
  );

  if (current == null) {
    return next;
  }

  // Both are not empty. Warning: Never call x.concat(y) when you are not
  // certain that x is an Array (x could be a string with concat method).
  // 合并两个数组
  if (Array.isArray(current)) {
    if (Array.isArray(next)) {
      current.push.apply(current, next);
      return current;
    }
    current.push(next);
    return current;
  }

  if (Array.isArray(next)) {
    // A bit too dangerous to mutate `next`.
    return [current].concat(next);
  }

  return [current, next];
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

进入 forEachAccumulated

// 对于传进来的一个数组，判断它是否是一个数组
// 如果是数组就会去对每一项调用这个 callback
// 如果它不是一个数组，就直接调用这个callback传入这个值就可以了
function forEachAccumulated<T>(
  arr: ?(Array<T> | T),
  cb: (elem: T) => void,
  scope: ?any,
) {
  if (Array.isArray(arr)) {
    arr.forEach(cb, scope);
  } else if (arr) {
    cb.call(scope, arr);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

进入 executeDispatchesAndReleaseTopLevel

const executeDispatchesAndReleaseTopLevel = function(e) {
  return executeDispatchesAndRelease(e);
};

const executeDispatchesAndRelease = function(event: ReactSyntheticEvent) {
  if (event) {
    executeDispatchesInOrder(event);

    if (!event.isPersistent()) {
      event.constructor.release(event);
    }
  }
};

// packages/events/EventPluginUtils.js#L76
// 最后真正调用这个事件的地方，其实它里面整个过程会非常的复杂，有各种各样的函数的嵌套调用
// 其实里面可能有将近一半的函数都是工具类型的函数，注意阅读代码时，别被绕进去
export function executeDispatchesInOrder(event) {
  // 这边获取了 dispatchListeners 以及 dispatchInstances 这两个数据
  // 这两个数据都来自 event 对象，上面会挂载了一个叫 _dispatchListeners 和 _dispatchInstances
  // 这两个东西都是数组，并且是一一对应的关系
  const dispatchListeners = event._dispatchListeners;
  const dispatchInstances = event._dispatchInstances;
  // 忽略
  if (__DEV__) {
    validateEventDispatches(event);
  }
  // 然后，它去判断一下是否是一个数组, 如果是一个数组对它进行一个遍历
  if (Array.isArray(dispatchListeners)) {
    for (let i = 0; i < dispatchListeners.length; i++) {
      // 并且判断一下 event 是否已经 isPropagationStopped，就是我们已经停止冒泡了
      // 如果是的话，我们就直接 break
      if (event.isPropagationStopped()) {
        break;
      }
      // Listeners and Instances are two parallel arrays that are always in sync.
      executeDispatch(event, dispatchListeners[i], dispatchInstances[i]);
    }
  // 不是数组，但是存在
  } else if (dispatchListeners) {
    // 调用这个方法
    executeDispatch(event, dispatchListeners, dispatchInstances);
  }
  // 重置
  event._dispatchListeners = null;
  event._dispatchInstances = null;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

进入 executeDispatch

function executeDispatch(event, listener, inst) {
  const type = event.type || 'unknown-event';
  event.currentTarget = getNodeFromInstance(inst); // 从 inst 上获取 node 节点
  invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, event); // 这里回调最终被触发调用
  event.currentTarget = null;
}
1
2
3
4
5
6

进入 invokeGuardedCallbackAndCatchFirstError

// packages/shared/ReactErrorUtils.js#L67
export function invokeGuardedCallbackAndCatchFirstError<
  A,
  B,
  C,
  D,
  E,
  F,
  Context,
>(
  name: string | null,
  func: (a: A, b: B, c: C, d: D, e: E, f: F) => void,
  context: Context,
  a: A,
  b: B,
  c: C,
  d: D,
  e: E,
  f: F,
): void {
  // 这个函数之前遇到过，目前不再展开
  invokeGuardedCallback.apply(this, arguments);
  if (hasError) {
    const error = clearCaughtError();
    if (!hasRethrowError) {
      hasRethrowError = true;
      rethrowError = error;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

到这里为止，这边的 listener 就已经被调用了
我们真正的每一个节点上面，如果有绑定这个事件，它就会调用它的一个回调
这就是事件触发的整个流程, 非常的繁琐，有各种各样的方法，嵌套的调用

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/65810