React Events

引言

官方文档对React事件的介绍包含以下几点

• React事件是合成事件
• 有stopPropagation和preventDefault
• 有nativeEvent上的所有属性
• 可以通过nativeEvent获取到原生事件
• 跨浏览器兼容

那么在看源码之前，有以下疑问:

• 如何监听？监听的什么元素？
• 如何模拟捕获和冒泡？
• 如何实现stopPropagation？
• 为什么要使用合成事件？

React 版本号 16.9.0

源码阅读说明

了解源码最好的方式是单步调试，找一个最简单的例子，在源码中打断点进行调试。本文采用create-react-app创建了最简单的demo，只含有click事件。页面内容如下

import React from 'react';
import './App.css';

class App extends React.Component {
  spanClickEvent = null;
  headerClickEvent = null;

  componentDidMount () {
    // document.addEventListener('click', () => {
    //   console.log('document click');
    // })
  }

  spanClick (event) {
    event.stopPropagation();
    console.log('spanClick');
    console.log(event);
    // this.spanClickEvent = event;
  }
  headerClick (event) {
    console.log('headerClick');
    console.log(event);
    // this.headerClickEvent = event;
    // console.log(this.headerClickEvent === this.spanClickEvent);
  }
  inputChange (event) {
    console.log('inputChange');
    console.log(event);
  }
  render () {
    return (
    <div className="App">
      <header className="App-header" onClick={(event) => this.headerClick(event)}>
        <div className="btn-wrapper">
          <span className="btn" onClick={(event) => this.spanClick(event)}>
            <span>点击</span>
          </span>
          {/* <input onChange={(event) => this.inputChange(event)}/> */}
        </div>
      </header>
    </div>
    )};
}

export default App;

事件注册

首先刷新页面，在render过程中会走到如下逻辑

function createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
      var parentNamespace = void 0;
      {
        // 此处省略代码...
      }
      var domElement = createElement(type, props, rootContainerInstance, parentNamespace);
      // 将internalInstanceHandle和props挂载在真实的DOM上，后面会用到
      precacheFiberNode(internalInstanceHandle, domElement);
      updateFiberProps(domElement, props);
      return domElement;
    }

updateFiberProps会走到setInitialDOMProperties里面

function setInitialDOMProperties(tag, domElement, rootContainerElement, nextProps, isCustomComponentTag) {
    // 此处省略代码
    else if (registrationNameModules.hasOwnProperty(propKey)) {
      if (nextProp != null) {
        if (true && typeof nextProp !== 'function') {
          warnForInvalidEventListener(propKey, nextProp);
        }
        // 如果props含有事件相关的属性，则去监听对应的事件
        ensureListeningTo(rootContainerElement, propKey);
      }
    }
}

注意此处使用的registrationNameModules存放了所有React事件。

ensureListeningTo会判断当前是否在iframe里面，以决定监听哪里的事件。最后走到listenTo逻辑里面。

function listenTo(registrationName, mountAt) {
      //listeningSet存放了已经监听过的事件，避免重复去监听。
      var listeningSet = getListeningSetForElement(mountAt);
      var dependencies = registrationNameDependencies[registrationName];

      for (var i = 0; i < dependencies.length; i++) {
        var dependency = dependencies[i];

        if (!listeningSet.has(dependency)) {
          // 初始化span标签的时候会走到这个逻辑里面，header的时候就不会再重复去监听click了
          switch (dependency) {
            // 此处省略代码

            default:
              var isMediaEvent = mediaEventTypes.indexOf(dependency) !== -1;

              if (!isMediaEvent) {
                trapBubbledEvent(dependency, mountAt);
              }

              break;
          }

          listeningSet.add(dependency);
        }
      }
    }

registrationNameDependencies存放了React事件与原生事件需要监听的对应关系。如下图中，如果使用onBlur则会监听window的blur事件，如果使用onChange则会监听blur/change/..等事件

接下来说trapBubbledEvent

function addEventBubbleListener(element, eventType, listener) {
  // 注意此处element是document，第三个参数是false 
  element.addEventListener(eventType, listener, false);
}

此时的listener为dispatchDiscreteEvent

至此，事件注册完成。值得注意的是，React在生成的真实DOM中加入了两个React属性，一个放了元素的props，一个放了元素对应的FiberNode。
原生DOM和FiberNode的一个双向关系。

传中...]

事件触发

点击span元素后，会走到dispatchDiscreteEvent逻辑里面，会带着nativeEvent调dispatchEvent方法。

通过getEventTarget(nativeEvent)拿到当前的nativeEvent.target为<span>点击元素</span>，然后拿到DOM上含有__reactInternalInstance*的最近的元素，此处为<span>点击元素</span>。调用dispatchEventForPluginEventSystem，调用batchedEventUpdates，中间会调用runExtractedPluginEventsInBatch处理原生事件，将原生事件合成为合成事件。最后会调用到traverseTwoPhase。这个方法主要是找到当前的path链

温习currentTarget和target currentTarget表示事件处理程序当前正在处理事件的那个元素
target 事件的目标

function traverseTwoPhase(inst, fn, arg) {
  var path = [];

  while (inst) {
    path.push(inst);
    inst = getParent(inst);
  }

  var i = void 0;

  for (i = path.length; i-- > 0;) {
    // 从外层到里层遍历元素，模拟捕获
    fn(path[i], 'captured', arg);
  }

  for (i = 0; i < path.length; i++) {
    // 从里层到外层遍历元素，模拟冒泡
    fn(path[i], 'bubbled', arg);
  }
}

调用对应的fn也就是accumulateDirectionalDispatches

function accumulateDirectionalDispatches(inst, phase, event) {
      // 省略代码
      // 在'bubble'阶段的onClick对应onClick，而captured的onClick对应onClickCaptured。因此我们在捕获阶段没有事件可以触发。感兴趣的可以将demo中的onClick更改为onClickCaptured模拟捕获触发
      var listener = listenerAtPhase(inst, event, phase);

      if (listener) {
        // 依次拿到span.btn和header上的onClick，并且放进event._dispatchListeners
        event._dispatchListeners = accumulateInto(event._dispatchListeners, listener);
        event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
      }
    }

最后调用executeDispatchesInOrder，遍历_dispatchListeners依次触发。触发的时候会判断event.isPropagationStopped()是true还是false

  function executeDispatch(event, listener, inst) {
    var type = event.type || 'unknown-event';
    // 赋值给currentTarget
    event.currentTarget = getNodeFromInstance(inst);
    invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, event);
    event.currentTarget = null;
  }

最后调用到fakeNode.dispatchEvent触发callCallback真正的onClick事件。此处采用fakeNode.dispatchEvent是为了让事件仍然是浏览器发起的。

调用完毕后，会将event初始化为最初的状态

整个过程，可以发现以下问题

• 在事件冒泡阶段，使用的是同一个事件，只不过调用时的currentTarget不一样。即spanClickEvent ==== headerClickEvent
• 因此在处理事件时，一定提前把值取出来。否则像有异步操作的时候，是取不到currentTarget的值的
• onClick对应有onClickCaptured
• 因为整个过程使用的是同一个event，所以stopPropagation在调用的时候会将event上的isPropagationStopped置为true，则后面的事件将不再触发，以此来模拟冒泡停止

总结

回到最初的问题提问

• 如何监听？监听的什么元素？(使用到的根据registrationNameDependencies对应关系才会去监听，且使用一个set避免重复监听。监听了document元素)
• 如何模拟捕获和冒泡？(找到元素的path链，按不同顺序依次取出对应的事件)
• 如何实现stopPropagation？(同一个event，利用其属性stopPropagation是否返回false标记)
• 为什么要使用合成事件？(抹平浏览器差异)

课后题

例子中的span调用了stopPropagation，那么以下代码会触发吗

componentDidMount () {
    document.addEventListener('click', () => {
      // 依然会触发。为什么？
      console.log('document click');
    })
    window.addEventListener('click', () => {
        // 不会触发。为什么？
      console.log('document click');
    })
  }

另一个问题，React是什么时候removeEventListner的？目前的出来的结论是并没有。如下例子，在点击header时会触发React的DispatchEvent没有问题。但是在isShow为false后，点击span元素，仍然会触发DispatchEvent。因此目前的结论是，React并没有去移除无用的EventListner。这个问题欢迎在评论区交流

class App extends React.Component {

  constructor () {
      super();
      this.state = {
          isShow: true
      };
  }

  headerClick (event) {
    this.setState({
        isShow: false
    });
  }
  render () {
    return (
    <div className="App">
        {
            this.state.isShow ?
            <header className="App-header" onClick={(event) => this.headerClick(event)}>
            </header>
            : <span>点击</span>
        }
    </div>
    )};
}