react object pool.png

前言

---

在学习 React 事件系统的时候，在事件分发的 dispatch方法发现了调用了一个 getPooled 方法，一时半会没看明白这个方法的用意。

我们先看一下是怎么用的：

// step1
function TopLevelCallbackBookKeeping(topLevelType, nativeEvent) {
  this.topLevelType = topLevelType;
  this.nativeEvent = nativeEvent;
  this.ancestors = [];
}
Object.assign(TopLevelCallbackBookKeeping.prototype, {
  destructor: function() {
    this.topLevelType = null;
    this.nativeEvent = null;
    this.ancestors.length = 0;
  },
});
PooledClass.addPoolingTo(
  TopLevelCallbackBookKeeping,
  PooledClass.twoArgumentPooler
);

// step2
var bookKeeping = TopLevelCallbackBookKeeping.getPooled(
  topLevelType,
  nativeEvent
);
// bookKeeping 是 TopLevelCallbackBookKeeping 的实例
try {
  // Event queue being processed in the same cycle allows
  // `preventDefault`.
  ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);
} finally {
  //释放
  TopLevelCallbackBookKeeping.release(bookKeeping);
}

那么这里为什么不直接 new 一个 TopLevelCallbackBookKeeping, 而要通过这个 PooledClass 来返回 TopLevelCallbackBookKeeping 的实例呢

未标题-1.png

对象池

---

单例模式是限制了一个类只能有一个实例，对象池模式则是限制一个类实例的个数。对象池类就像是一个对象管理员，它以Static列表（也就是装对象的池子）的形式存存储某个实例数受限的类的实例，每一个实例还要加一个标记，标记该实例是否被占用。当类初始化的时候，这个对象池就被初始化了，实例就被创建出来。然后，用户可以向这个类索取实例，如果池中所有的实例都已经被占用了，那么抛出异常。用户用完以后，还要把实例“还”回来，即释放占用。对象池类的成员应该都是静态的。用户也不应该能访问池子里装着的对象的构造函数，以防用户绕开对象池创建实例。书上说这个模式会用在数据库连接的管理上。比如，每个用户的连接数是有限的，这样每个连接就是一个池子里的一个对象，“连接池”类就可以控制连接数了。
如果说每次触发 dispatch 的时候都用 new TopLevelCallbackBookKeeping 来 new 一个对象，那么当触发很多次 dispatch 的时候，就会导致生成多个对象无法销毁（多个bookKeeping的引用次数一直为1），导致内存溢出。
对象池技术的基本原理
对象池技术基本原理的核心有两点：缓存和共享，即对于那些被频繁使用的对象，在使用完后，不立即将它们释放，而是将它们缓存起来，以供后续的应用程序重复使用，从而减少创建对象和释放对象的次数，进而改善应用程序的性能。事实上，由于对象池技术将对象限制在一定的数量，也有效地减少了应用程序内存上的开销。

对象池使用的基本思路是
将用过的对象保存起来，等下一次需要这种对象的时候，再拿出来重复使用，从而在一定程度上减少频繁创建对象所造成的开销。React 的 pooledClass.js 就是一个例子：

var invariant = require('invariant');

/**
 * Static poolers. Several custom versions for each potential number of
 * arguments. A completely generic pooler is easy to implement, but would
 * require accessing the `arguments` object. In each of these, `this` refers to
 * the Class itself, not an instance. If any others are needed, simply add them
 * here, or in their own files.
 */
var oneArgumentPooler = function(copyFieldsFrom) {
  var Klass = this;
  if (Klass.instancePool.length) {
    var instance = Klass.instancePool.pop();
    Klass.call(instance, copyFieldsFrom);
    return instance;
  } else {
    return new Klass(copyFieldsFrom);
  }
};

var twoArgumentPooler = function (a1, a2) {
  var Klass = this;
  if (Klass.instancePool.length) {
    var instance = Klass.instancePool.pop();
    Klass.call(instance, a1, a2);
    return instance;
  } else {
    return new Klass(a1, a2);
  }
};

...
var standardReleaser = function(instance) {
  var Klass = this;
  invariant(
    instance instanceof Klass,
    'Trying to release an instance into a pool of a different type.'
  );
  instance.destructor();
  if (Klass.instancePool.length < Klass.poolSize) {
    Klass.instancePool.push(instance);
  }
};

var DEFAULT_POOL_SIZE = 10;
var DEFAULT_POOLER = oneArgumentPooler;

/**
 * Augments `CopyConstructor` to be a poolable class, augmenting only the class
 * itself (statically) not adding any prototypical fields. Any CopyConstructor
 * you give this may have a `poolSize` property, and will look for a
 * prototypical `destructor` on instances (optional).
 *
 * @param {Function} CopyConstructor Constructor that can be used to reset.
 * @param {Function} pooler Customizable pooler.
 */
var addPoolingTo = function(CopyConstructor, pooler) {
  var NewKlass = CopyConstructor;
  NewKlass.instancePool = [];
  NewKlass.getPooled = pooler || DEFAULT_POOLER;
  if (!NewKlass.poolSize) {
    NewKlass.poolSize = DEFAULT_POOL_SIZE;
  }
  NewKlass.release = standardReleaser;
  return NewKlass;
};

var PooledClass = {
  addPoolingTo: addPoolingTo,
  oneArgumentPooler: oneArgumentPooler,
  twoArgumentPooler: twoArgumentPooler,
  threeArgumentPooler: threeArgumentPooler,
  fourArgumentPooler: fourArgumentPooler,
  fiveArgumentPooler: fiveArgumentPooler,
};

module.exports = PooledClass;

具体分为三步

• addPoolingTo 添加对象到池子
• 调用的时候发现是否有缓存，有缓存就pop()出来用， 没有缓存就新增一个
• 使用完成之后，释放对象，缓存进去

说的再简单一点就是

• 创建对象 addPoolingTo()
• 借取对象 getPooled()
• 归还对象 release()

前面5个方法的第一步都是将this赋值给一个变量Klass， this指向将被Pooler对象本身，因此 Klass也是指向Pooler的。为什么getPooled()可以从pool中抽取出一个实例对象呢？在addPoolingTo方法中可以找到getPooled在本场景中getPooled指向oneArgumentPooler，从oneArgumentPooler的代码中可以知道，如果当前对象池中的instancePool的个数不为0，则从对象池中pop实例，否则new一个实例对象。

var oneArgumentPooler = function (copyFieldsFrom) {
  var Klass = this;
  if (Klass.instancePool.length) {
    var instance = Klass.instancePool.pop();
    Klass.call(instance, copyFieldsFrom);
    return instance;
  } else {
    return new Klass(copyFieldsFrom);

  }
};

而instancePool内部的实例是CallbackQueue.js的最后一行PooledClass.addPoolingTo(CallbackQueue)将NewKlass.instancePool 设置为[]，并且将NewKlass.poolSize初始化为10。但是，何时将创建实例的呢？？？ 个人理解如下（不知道是否正确，若有争议请指出，谢谢）：

再回顾一下getPooled 的核代码：

  var Klass = this;
  if (Klass.instancePool.length) {
    var instance = Klass.instancePool.pop();
    Klass.call(instance, copyFieldsFrom);
    return instance;
  } else {
    return new Klass(copyFieldsFrom);
  }

第一次getPooled 实例对象时，Klass.instancePool.length为0，因次会new出一个实例，当该实例使用结束后会realeased释放对象，该核心代码有一段时：

  if (Klass.instancePool.length < Klass.poolSize) {
    Klass.instancePool.push(instance);
  }

因为此时的Klass.instancePool.length 为1 小于poolSize。因次第一次释放的实例对象会被push到instancePool中，以此类推。当instancePool保存实例个数大于10个了将不会收集新对象。
总结：React对象池，将对象封装为pooler，并设置池子中可以存储实例的容量Size。对于初次使用或者池子中没有空闲的instance，需要new新实例。在释放实例对象时，如果池子中还有存储空间则push到pooler中，否则直接当做垃圾回收。

image

总结

---

并非所有对象都适合拿来池化――因为维护对象池也要造成一定开销。对生成时开销不大的对象进行池化，反而可能会出现“维护对象池的开销”大于“生成新对象的开销”，从而使性能降低的情况。但是对于生成时开销可观的对象，池化技术就是提高性能的有效策略了。

---

站在巨人肩上

解读 React 的 pooledClass.js

React细节知识之对象池