React中的CallbackQueue

CallbackQueue 类。

CallbackQueue顾名思义，他就是一个回调函数的队列。 首先：CallbackQueue类本身提供了两个属性：

_callbacks：用来存储回调函数

_contexts：用来存储回调函数需要的参数，这个参数与回调函数一一对应。

原型方法： enqueue：入队回调函数和回调函数需要的参数。

notifyAll:触发队列里的回调函数

reset:初始化队列，初始化_callbacks和_contexts。

destructor：这个方法是为PooledClass（池化技术准备的）

一个个的来看这些方法与属性。

CallbackQueue构造函数本身

    <!--
        就是初始化了两个属性。
    -->
    function CallbackQueue() {
        this._callbacks = null;
        this._contexts = null;
    }

enqueue

    <!--
        该方法就是队列没有初始化_callback和_contexts的时候初始化为队列。
        而后将给的 参数放入对应的队列。
    -->
    enqueue: function (callback, context) {
        this._callbacks = this._callbacks || [];
        this._contexts = this._contexts || [];
        this._callbacks.push(callback);
        this._contexts.push(context);
    },

notifyAll

    <!--
        作用就是将队列里的方法遍历执行。很简单，看起来也很清新，没啥难的。
    -->
    notifyAll: function () {
        var callbacks = this._callbacks;
        var contexts = this._contexts;
        if (callbacks) {
          this._callbacks = null;
          this._contexts = null;
          for (var i = 0; i < callbacks.length; i++) {
            callbacks[i].call(contexts[i]);
          }
          callbacks.length = 0;
          contexts.length = 0;
        }
    },

reset

    <!--
        reset 放就是将实例的_callbacks与_contexts属性置为null。很清新明了。
    -->
    reset: function () {
        this._callbacks = null;
        this._contexts = null;
    },

destructor

    <!--
        这个方法就是为 使用池化技术而提供的。顾名思义它的作用本身也是将给定对象回归为初始状态。
    -->
    destructor: function () {
        this.reset();
      }

最后

    <!--
        使用 PooledClass类来为CallbackQueue生成 '池',
        而后在任何需要的地方就可以直接从池中取出实例来操作。
    -->
    PooledClass.addPoolingTo(CallbackQueue);

举个🌰 ReactReconcileTransaction 类

    function ReactReconcileTransaction(forceHTML) {
        <!--
            这里使用了 池的'借'方法来拿到一个 CallbackQueue实例。
        -->
        this.reactMountReady = CallbackQueue.getPooled(null);
    
    }