React事件机制二---回调存储

上篇文章我们说了React中事件的注册流程。现在我们来说说，消失了的事件回调函数。

  function enqueuePutListener(id, registrationName, listener, transaction) {
    <!-
        我们省略了多余的代码找到了这个核心存储函数。
        这里React是使用了事务来处理的。
        关于事务，我们重启一篇来讲，这里我们简单的说一下。
        React的事务是在某个函数执行的前后分别执行对应的操作。
        比如，在一个方法执行前，执行一个初始化操作，而在改方法执行完成之后执行一下收尾工作，清理一下垃圾等。
        
    --->
  // 使用事务，将listenr存储起来。
  <!--
    这里的 transaction是 ReactReconcileTransaction 模块
    这里是调用了 enqueue 方法。
    enqueue 方法是 CallbackQueue 模块的一个实例的方法。
    CallbackQueue 的实例包含了两个队列。
    一个是callbacs队列
    一个是contexts队列
    enqueue方法就是将给的方法放入callbacks队列，给的参数放在contexts队列里。
    在最后（也就是事务的最后）会执行callbacks队列里的方法，根据同样位置的contexts里的参数。
    
    这里我们在callbacks队列里放入了一个方法 putListener，
    而该方法需要的参数 id,registrationName,listener等作为一个对象放在contexts队列中
  -->
  transaction.getReactMountReady().enqueue(putListener, {
    id: id,
    registrationName: registrationName,
    listener: listener
  });
}

putListener 方法

    function putListener() {
      var listenerToPut = this;
      <!--
        调用了ReactBrowserEventEmitter模块的putListener方法
      -->
      ReactBrowserEventEmitter.putListener(listenerToPut.id, listenerToPut.registrationName, listenerToPut.listener);
    }

ReactBrowserEventEmitter.putListener

    <!--
        putListener是定义在EventPluginHub模块中的
    -->
    putListener: EventPluginHub.putListener

EventPluginHub模块

    <!--
        EventPluginHub模块定义了一个对象listenerBank。
        listenerBank的作用就是为了存储事件侦听器（也就是我们定义的事件回调函数。）
    -->
    putListener: function (id, registrationName, listener) {
        
        <!--
            根据id来将我们写的事件回调函数存储在了listenerBank中。
        -->
            var bankForRegistrationName = listenerBank[registrationName] || (listenerBank[registrationName] = {});
            bankForRegistrationName[id] = listener;
    
     },

如上我们将事件侦听器存储在了listenerBank中。