1
2
3
4
5
6

// 放在批量策略batchedUpdates中執行插入
ReactUpdates.batchedUpdates(
    batchedMountComponentIntoNode,
    componentInstance,
    ...
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 

// ReactDefaultBatchingStrategy.js
var transaction = new ReactDefaultBatchingStrategyTransaction();
...
var ReactDefaultBatchingStrategy = {
  ...
  batchedUpdates: function(callback, a, b, c, d, e) {
   ...
    // 啟動ReactDefaultBatchingStrategy事務
      return transaction.perform(callback, null, a, b, c, d, e);
  },
};

// ReactMount.js
function batchedMountComponentIntoNode(
  ...
) {
  var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(
    !shouldReuseMarkup && ReactDOMFeatureFlags.useCreateElement,
  );
    // 啟動Reconcile事務
  transaction.perform(
    mountComponentIntoNode,
    ...
  );
    ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function batchedMountComponentIntoNode(
  componentInstance,
  container,
  shouldReuseMarkup,
  context,
) {
    // 從物件池中拿到ReactReconcileTransaction事務
  var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(
    !shouldReuseMarkup && ReactDOMFeatureFlags.useCreateElement,
  );
    // 啟動事務執行mountComponentIntoNode
  transaction.perform(
    mountComponentIntoNode,
    null,
    componentInstance,
    container,
    transaction,
    shouldReuseMarkup,
    context,
  );
    // 釋放事務
  ReactUpdates.ReactReconcileTransaction.release(transaction);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// 新增物件池, 實質就是對類包裝
var addPoolingTo = function (CopyConstructor, pooler) {
  // 拿到類
  var NewKlass = CopyConstructor;
  // 新增例項佇列屬性
  NewKlass.instancePool = [];
  // 新增拿到例項方法
  NewKlass.getPooled = pooler || DEFAULT_POOLER;
  // 例項佇列預設為10個
  if (!NewKlass.poolSize) {
    NewKlass.poolSize = DEFAULT_POOL_SIZE;
  }
  // 將例項放回佇列
  NewKlass.release = standardReleaser;
  return NewKlass;
};
// 從物件池申請一個例項.對於不同引數數量的類,React分別處理, 這裡是一個引數的類的申請例項的方法, 其他一樣
var oneArgumentPooler = function(copyFieldsFrom) {
  // this 指的就是傳進來的類
  var Klass = this;
  // 如果類的例項佇列有例項, 則拿出來一個
  if (Klass.instancePool.length) {
    var instance = Klass.instancePool.pop();
    Klass.call(instance, copyFieldsFrom);
    return instance;
  } else { // 否則說明是第一次例項化, new 一個
    return new Klass(copyFieldsFrom);
  }
};
// 釋放例項到類的佇列中
var standardReleaser = function(instance) {
  var Klass = this;
  ...
  // 呼叫類的解構函式
  instance.destructor();
  // 放到佇列
  if (Klass.instancePool.length < Klass.poolSize) {
    Klass.instancePool.push(instance);
  }
};

// 使用時將類傳進去即可
PooledClass.addPoolingTo(ReactReconcileTransaction);