<h2>React源码解读系列 – 事件机制</h2>    <p>本文首先分析React在DOM事件上的架构设计、相关优化、合成事件(Synethic event)对象，从源码层面上做到庖丁解牛的效果。同时，简单介绍下react事件可能会遇到的问题。</p>    <h2>1. 总体设计</h2>    <p>react在事件处理上具有如下优点:</p>    <ul>     <li>几乎所有的事件代理(delegate)到 document ，达到性能优化的目的</li>     <li>对于每种类型的事件，拥有统一的分发函数 dispatchEvent</li>     <li>事件对象(event)是合成对象(SyntheticEvent)，不是原生的</li>    </ul>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5305a8410c719e10b0ea8b594dab335d.jpg"></p>    <p>react内部事件系统实现可以分为两个阶段: 事件注册、事件触发。</p>    <h2>2. 事件注册</h2>    <p><a href="/misc/goto?guid=4959740613249941013" rel="nofollow,noindex">ReactDOMComponent</a> 在进行组件加载(mountComponent)、更新(updateComponent)的时候，需要对 props 进行处理(_updateDOMProperties):</p>    <pre>  <code class="language-javascript">ReactDOMComponent.Mixin = {    _updateDOMProperties: function (lastProps, nextProps, transaction) {      ...      for (propKey in nextProps) {        // 判断是否为事件属性        if (registrationNameModules.hasOwnProperty(propKey)) {          enqueuePutListener(this, propKey, nextProp, transaction);        }      }    }  }  function enqueuePutListener(inst, registrationName, listener, transaction) {    ...    var doc = isDocumentFragment ? containerInfo._node : containerInfo._ownerDocument;    listenTo(registrationName, doc);    transaction.getReactMountReady().enqueue(putListener, {      inst: inst,      registrationName: registrationName,      listener: listener    });    function putListener() {      var listenerToPut = this;      EventPluginHub.putListener(listenerToPut.inst, listenerToPut.registrationName, listenerToPut.listener);    }  }</code></pre>    <p>代码解析:</p>    <ul>     <li>在props渲染的时候，如何属性是事件属性，则会用 enqueuePutListener 进行事件注册</li>     <li>上述 transaction 是ReactUpdates.ReactReconcileTransaction的实例化对象</li>     <li>enqueuePutListener进行两件事情: 在 document 上注册相关的事件；对事件进行存储</li>    </ul>    <h3>2.1 document上事件注册</h3>    <p>document的事件注册入口位于 ReactBrowserEventEmitter :</p>    <pre>  <code class="language-javascript">// ReactBrowserEventEmitter.js  listenTo: function (registrationName, contentDocumentHandle) {    ...    if (...) {      ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(...);    } else if (...) {      ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(...);    }    ...  }    // ReactEventListener.js  var ReactEventListener = {    ...    trapBubbledEvent: function (topLevelType, handlerBaseName, element) {      ...      var handler = ReactEventListener.dispatchEvent.bind(null, topLevelType);      return EventListener.listen(element, handlerBaseName, handler);    },    trapCapturedEvent: function (topLevelType, handlerBaseName, element) {      var handler = ReactEventListener.dispatchEvent.bind(null, topLevelType);      return EventListener.capture(element, handlerBaseName, handler);    }    dispatchEvent: function (topLevelType, nativeEvent) {      ...      ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);      ...    }  }  function handleTopLevelImpl(bookKeeping) {    ...    ReactEventListener._handleTopLevel(bookKeeping.topLevelType, targetInst, bookKeeping.nativeEvent, getEventTarget(bookKeeping.nativeEvent));    ...  }</code></pre>    <p>代码解析:</p>    <ul>     <li>事件的注册、触发，具体是在 ReactEventListener 中实现的</li>     <li>事件的注册有两个方法: 支持冒泡(trapBubbledEvent)、trapCapturedEvent</li>     <li>document不管注册的是什么事件，具有统一的回调函数 handleTopLevelImpl</li>     <li>document的回调函数中不包含任何的事物处理，只起到事件分发的作用</li>    </ul>    <h3>2.2 回调函数存储</h3>    <p>函数的存储，在 ReactReconcileTransaction 事务的close阶段执行:</p>    <pre>  <code class="language-javascript">transaction.getReactMountReady().enqueue(putListener, {    inst: inst,    registrationName: registrationName,    listener: listener  });  function putListener() {    var listenerToPut = this;    EventPluginHub.putListener(listenerToPut.inst, listenerToPut.registrationName, listenerToPut.listener);  }</code></pre>    <p>事件的存储由 EventPluginHub 来进行管理，来看看其中的具体实现:</p>    <pre>  <code class="language-javascript">//  var listenerBank = {};  var getDictionaryKey = function (inst) {    return '.' + inst._rootNodeID;  }  var EventPluginHub = {    putListener: function (inst, registrationName, listener) {      ...      var key = getDictionaryKey(inst);      var bankForRegistrationName = listenerBank[registrationName] || (listenerBank[registrationName] = {});      bankForRegistrationName[key] = listener;      ...    }  }</code></pre>    <p>react中的所有事件的回调函数均存储在 listenerBank 对象里面，根据事件类型、component对象的_rootNodeID为两个key，来存储对应的回调函数。</p>    <h2>3. 事件的执行</h2>    <p>事件注册完之后，就可以依据事件委托进行事件的执行。由事件注册可以知道，几乎所有的事件均委托到document上，而document上事件的回调函数只有一个: ReactEventListener.dispatchEvent，然后进行相关的分发:</p>    <pre>  <code class="language-javascript">var ReactEventListener = {    dispatchEvent: function (topLevelType, nativeEvent) {      ...      ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);      ...    }  }  function handleTopLevelImpl(bookKeeping) {    var nativeEventTarget = getEventTarget(bookKeeping.nativeEvent);    var targetInst = ReactDOMComponentTree.getClosestInstanceFromNode(nativeEventTarget);      // 初始化时用ReactEventEmitterMixin注入进来的    ReactEventListener._handleTopLevel(..., nativeEventTarget, targetInst);  }  // ReactEventEmitterMixin.js  var ReactEventEmitterMixin = {    handleTopLevel: function (...) {      var events = EventPluginHub.extractEvents(...);      runEventQueueInBatch(events);    }  }  function runEventQueueInBatch(events) {    EventPluginHub.enqueueEvents(events);    EventPluginHub.processEventQueue(false);  }</code></pre>    <p>代码解析:</p>    <ul>     <li>handleTopLevelImpl: 根据原生的事件对象，找到事件触发的dom元素以及该dom对应的compoennt对象</li>     <li>ReactEventEmitterMixin: 一方面生成合成的事件对象，另一方面批量执行定义的回调函数</li>     <li>runEventQueueInBatch: 进行批量更新</li>    </ul>    <h3>3.1 合成事件的生成过程</h3>    <p>react中的事件对象不是原生的事件对象，而是经过处理后的对象，下面从源码层面解析是如何生成的:</p>    <pre>  <code class="language-javascript">// EventPluginHub.js  var EventPluginHub = {    extractEvents: function (...) {      var events;      var plugins = EventPluginRegistry.plugins;      for (var i = 0; i < plugins.length; i++) {        var possiblePlugin = plugins[i];        if (possiblePlugin) {          var extractedEvents = possiblePlugin.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);          if (extractedEvents) {            events = accumulateInto(events, extractedEvents);          }        }      }      return events;    }  }</code></pre>    <p>EventPluginHub不仅存储事件的回调函数，而且还管理其中不同的plugins，这些plugins是在系统启动过程中注入(injection)过来的:</p>    <pre>  <code class="language-javascript">// react-dom模块的入口文件ReactDOM.js:  var ReactDefaultInjection = require('./ReactDefaultInjection');  ReactDefaultInjection.inject();  ...  // ReactDefaultInjection.js  module.exports = {    inject: inject  };  function inject() {    ...    ReactInjection.EventPluginHub.injectEventPluginsByName({      SimpleEventPlugin: SimpleEventPlugin,      EnterLeaveEventPlugin: EnterLeaveEventPlugin,      ChangeEventPlugin: ChangeEventPlugin,      SelectEventPlugin: SelectEventPlugin,      BeforeInputEventPlugin: BeforeInputEventPlugin    });    ...  }</code></pre>    <p>从上面代码可以看到，默认情况下，react注入了五种事件plugin，针对不同的事件，得到不同的合成事件，以最常见的 SimpleEventPlugin 为例进行分析:</p>    <pre>  <code class="language-javascript">var SimpleEventPlugin = {    extractEvents: function (topLevelType, ...) {      var EventConstructor;      switch (topLevelType) {        EventConstructor = one of [ SyntheticEvent, SyntheticKeyboardEvent, SyntheticFocusEvent, SyntheticMouseEvent, SyntheticDragEvent, SyntheticTouchEvent, SyntheticAnimationEvent, SyntheticTransitionEvent, SyntheticUIEvent, SyntheticWheelEvent, SyntheticClipboardEvent];      }      var event = EventConstructor.getPooled(dispatchConfig, targetInst, nativeEvent, nativeEventTarget);      EventPropagators.accumulateTwoPhaseDispatches(event);      return event;    }  }</code></pre>    <p>代码解析:</p>    <ul>     <li>针对不同的事件类型，会生成不同的合成事件</li>     <li>EventPropagators.accumulateTwoPhaseDispatches: 用于从EventPluginHub中获取回调函数，后面小节会具体分析获取过程</li>    </ul>    <p>以其中的最基本的 SyntheticEvent 为例进行分析:</p>    <pre>  <code class="language-javascript">function SyntheticEvent(dispatchConfig, targetInst, nativeEvent, nativeEventTarget) {    ...    this.dispatchConfig = dispatchConfig;    this._targetInst = targetInst;    this.nativeEvent = nativeEvent;      var Interface = this.constructor.Interface;    for (var propName in Interface) {      var normalize = Interface[propName];      if (normalize) {        this[propName] = normalize(nativeEvent);      } else {        if (propName === 'target') {          this.target = nativeEventTarget;        } else {          this[propName] = nativeEvent[propName];        }      }    }    ...  }  _assign(SyntheticEvent.prototype, {    preventDefault: function () { ... },    stopPropagation: function () { ... },    ...  });  var EventInterface = {    type: null,    target: null,    // currentTarget is set when dispatching; no use in copying it here    currentTarget: emptyFunction.thatReturnsNull,    eventPhase: null,    bubbles: null,    cancelable: null,    timeStamp: function (event) {      return event.timeStamp || Date.now();    },    defaultPrevented: null,    isTrusted: null  };  SyntheticEvent.Interface = EventInterface;    // 实现继承关系  SyntheticEvent.augmentClass = function (Class, Interface) {    ...  }</code></pre>    <h3>3.2 获取具体的回调函数</h3>    <p>上述合成事件对象在生成的过程中，会从 EventPluginHub 处获取相关的回调函数，具体实现如下:</p>    <pre>  <code class="language-javascript">// EventPropagators.js  function accumulateTwoPhaseDispatches(events) {    forEachAccumulated(events, accumulateTwoPhaseDispatchesSingle);  }  function accumulateTwoPhaseDispatchesSingle(event) {    if (event && event.dispatchConfig.phasedRegistrationNames) {      EventPluginUtils.traverseTwoPhase(event._targetInst, accumulateDirectionalDispatches, event);    }  }  function accumulateDirectionalDispatches(inst, phase, event) {    var listener = listenerAtPhase(inst, event, phase);    if (listener) {      event._dispatchListeners = accumulateInto(event._dispatchListeners, listener);      event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);    }  }  var getListener = EventPluginHub.getListener;  function listenerAtPhase(inst, event, propagationPhase) {    var registrationName = event.dispatchConfig.phasedRegistrationNames[propagationPhase];    return getListener(inst, registrationName);  }  // EventPluginHub.js  getListener: function (inst, registrationName) {    var bankForRegistrationName = listenerBank[registrationName];    var key = getDictionaryKey(inst);    return bankForRegistrationName && bankForRegistrationName[key];  },</code></pre>    <h3>3.3 批量执行事件的具体回调函数</h3>    <p>react会进行批量处理具体的回调函数，回调函数的执行为了两步，第一步是将所有的合成事件放到事件队列里面，第二步是逐个执行:</p>    <pre>  <code class="language-javascript">var eventQueue = null;  var EventPluginHub = {    enqueueEvents: function (events) {      if (events) {        eventQueue = accumulateInto(eventQueue, events);      }    },    processEventQueue: function (simulated) {      var processingEventQueue = eventQueue;      ...      forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseSimulated);      ...    },  }  var executeDispatchesAndReleaseSimulated = function (e) {    return executeDispatchesAndRelease(e, true);  };  var executeDispatchesAndRelease = function (event, simulated) {    if (event) {      EventPluginUtils.executeDispatchesInOrder(event, simulated);        if (!event.isPersistent()) {        event.constructor.release(event);      }    }  };  // EventPluginUtils.js  function executeDispatchesInOrder(event, simulated) {    var dispatchListeners = event._dispatchListeners;    var dispatchInstances = event._dispatchInstances;    ...    executeDispatch(event, simulated, dispatchListeners, dispatchInstances);    ...    event._dispatchListeners = null;    event._dispatchInstances = null;  }</code></pre>    <h2>4. 可能存在的问题</h2>    <h3>4.1 合成事件与原生事件混用</h3>    <p>在开发过程中，有时候需要使用到原生事件，例如存在如下的业务场景: 点击input框展示日历，点击文档其他部分，日历消失，代码如下:</p>    <pre>  <code class="language-javascript">// js部分  var React = require('react');  var ReactDOM = require('react-dom');  class App extends React.Component {    constructor(props) {      super(props);      this.state = {        showCalender: false      };    }    componentDidMount() {      document.addEventListener('click', () => {        this.setState({showCalender: false});        console.log('it is document')      }, false);    }    render() {      return (<div>        <input          type="text"          onClick={(e) => {            this.setState({showCalender: true});            console.log('it is button')            e.stopPropagation();          }}        />        <Calendar isShow={this.state.showCalender}></Calendar>      </div>);    }  }</code></pre>    <p>上述代码: 在点击input的时候，state状态变成true，展示日历，同时阻止冒泡，但是document上的click事件仍然触发了？到底是什么原因造成的呢？</p>    <p>原因解读: 因为react的事件基本都是委托到document上的，并没有真正绑定到input元素上，所以在react中执行stopPropagation并没有什么用处，document上的事件依然会触发。</p>    <p>解决办法:</p>    <p>4.1.1 input的onClick事件也使用原生事件</p>    <pre>  <code class="language-javascript">class App extends React.Component {    constructor(props) {      super(props);      this.state = {        showCalender: false      };    }    componentDidMount() {      document.addEventListener('click', () => {        this.setState({showCalender: false});        console.log('it is document')      }, false);      this.refs.myBtn.addEventListener('click', (e) => {        this.setState({showCalender: true});        e.stopPropagation();      }, false);    }    render() {      return (<div>        <input          type="text"          ref="myBtn"        />        <Calendar isShow={this.state.showCalender}></Calendar>      </div>);    }  }</code></pre>    <p>4.1.2 在document中进行判断，排除目标元素</p>    <pre>  <code class="language-javascript">class App extends React.Component {    constructor(props) {      super(props);      this.state = {        showCalender: false      };    }    componentDidMount() {      document.addEventListener('click', (e) => {        var tar = document.getElementById('myInput');        if (tar.contains(e.target)) return;        console.log('document!!!');        this.setState({showCalender: false});      }, false);    }    render() {      return (<div>        <input          id="myInput"          type="text"          onClick={(e) => {            this.setState({showCalender: true});            console.log('it is button')            // e.stopPropagation();          }}        />        <Calendar isShow={this.state.showCalender}></Calendar>      </div>);    }  }</code></pre>    <h2>5. 小结</h2>    <p>React在设计事件机制的时候，利用冒泡原理充分提高事件绑定的效率，使用 EventPluginHub 对回调函数、事件插件进行管理，然后通过一个统一的入口函数实现事件的分发，整个设计思考跟jQuery的事件实现上存在相似的地方，非常值得学习借鉴。</p>    <p> </p>    <p>来自：http://zhenhua-lee.github.io/react/react-event.html</p>    <p> </p>