Skip to content

Commit 205a35a

Browse files
kmagierafacebook-github-bot-0
kmagiera
authored and
facebook-github-bot-0
committed
View recycling in JS.
Summary: public Native view recycling implementation based on limited pools of views. In this diff I introduced new UIManager method: dropViews. Instead of removing views from tag->view maps when they are detached we keep them there until we get a call to dropViews with the appropriate tag. JS may keep a pool of object and selectively decide not to enqueue drop for certain views. Then instead of removing those views it may decide to reuse tag that has been previously allocated for a view that is no longer in use. Special handling is required for layout-only nodes as they only can transition from layout-only to non-layout-only (reverse transition hasn't been implemented). Because of that we'd loose benefits of view flattening if we decide to recycle existing non-layout-only view as a layout-only one. This diff provides only a simple and manual method for configuring pools by calling `ReactNativeViewPool.configure` with a dict from native view name to the view count. Note that we may not want recycle all the views (e.g. when we render mapview we don't want to keep it in memory after it's detached) Reviewed By: davidaurelio Differential Revision: D2677289 fb-gh-sync-id: 29f44ce5b01db3ec353522af051b6a50924614a2
1 parent 0c8850f commit 205a35a

11 files changed

Lines changed: 342 additions & 27 deletions

‎Libraries/ReactNative/ReactNativeBaseComponent.js‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ var ReactNativeAttributePayload = require('ReactNativeAttributePayload');
1616
var ReactNativeEventEmitter = require('ReactNativeEventEmitter');
1717
var ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
1818
var ReactNativeTagHandles = require('ReactNativeTagHandles');
19+
var ReactNativeViewPool = require('ReactNativeViewPool');
1920
var ReactMultiChild = require('ReactMultiChild');
2021
var RCTUIManager = require('NativeModules').UIManager;
2122

@@ -88,6 +89,7 @@ ReactNativeBaseComponent.Mixin = {
8889
unmountComponent: function() {
8990
deleteAllListeners(this._rootNodeID);
9091
this.unmountChildren();
92+
ReactNativeViewPool.release(this);
9193
this._rootNodeID = null;
9294
},
9395

@@ -204,24 +206,7 @@ ReactNativeBaseComponent.Mixin = {
204206
mountComponent: function(rootID, transaction, context) {
205207
this._rootNodeID = rootID;
206208

207-
var tag = ReactNativeTagHandles.allocateTag();
208-
209-
if (__DEV__) {
210-
deepFreezeAndThrowOnMutationInDev(this._currentElement.props);
211-
}
212-
213-
var updatePayload = ReactNativeAttributePayload.create(
214-
this._currentElement.props,
215-
this.viewConfig.validAttributes
216-
);
217-
218-
var nativeTopRootID = ReactNativeTagHandles.getNativeTopRootIDFromNodeID(rootID);
219-
RCTUIManager.createView(
220-
tag,
221-
this.viewConfig.uiViewClassName,
222-
nativeTopRootID ? ReactNativeTagHandles.rootNodeIDToTag[nativeTopRootID] : null,
223-
updatePayload
224-
);
209+
var tag = ReactNativeViewPool.acquire(this);
225210

226211
this._registerListenersUponCreation(this._currentElement.props);
227212
this.initializeChildren(

‎Libraries/ReactNative/ReactNativeMount.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ var RCTUIManager = require('NativeModules').UIManager;
1515

1616
var ReactElement = require('ReactElement');
1717
var ReactNativeTagHandles = require('ReactNativeTagHandles');
18+
var ReactNativeViewPool = require('ReactNativeViewPool');
1819
var ReactPerf = require('ReactPerf');
1920
var ReactReconciler = require('ReactReconciler');
2021
var ReactUpdateQueue = require('ReactUpdateQueue');
@@ -216,6 +217,7 @@ var ReactNativeMount = {
216217
ReactNativeMount.unmountComponentAtNode(containerTag);
217218
// call back into native to remove all of the subviews from this container
218219
RCTUIManager.removeRootView(containerTag);
220+
ReactNativeViewPool.clearPoolForRootView(containerTag);
219221
},
220222

221223
/**

‎Libraries/ReactNative/ReactNativeReconcileTransaction.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
var CallbackQueue = require('CallbackQueue');
1515
var PooledClass = require('PooledClass');
1616
var Transaction = require('Transaction');
17+
var ReactNativeViewPool = require('ReactNativeViewPool');
1718

1819
/**
1920
* Provides a `CallbackQueue` queue for collecting `onDOMReady` callbacks during
@@ -35,12 +36,18 @@ var ON_DOM_READY_QUEUEING = {
3536
}
3637
};
3738

39+
var RN_VIEW_POOL_WRAPPER = {
40+
close: function() {
41+
ReactNativeViewPool.onReconcileTransactionClose();
42+
},
43+
};
44+
3845
/**
3946
* Executed within the scope of the `Transaction` instance. Consider these as
4047
* being member methods, but with an implied ordering while being isolated from
4148
* each other.
4249
*/
43-
var TRANSACTION_WRAPPERS = [ON_DOM_READY_QUEUEING];
50+
var TRANSACTION_WRAPPERS = [ON_DOM_READY_QUEUEING, RN_VIEW_POOL_WRAPPER];
4451

4552
/**
4653
* Currently:

‎Libraries/ReactNative/ReactNativeViewPool.js‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*
9+
* @providesModule ReactNativeViewPool
10+
* @flow
11+
*/
12+
'use strict';
13+
14+
var ReactNativeTagHandles = require('ReactNativeTagHandles');
15+
var ReactNativeAttributePayload = require('ReactNativeAttributePayload');
16+
var RCTUIManager = require('NativeModules').UIManager;
17+
var Platform = require('Platform');
18+
19+
var deepFreezeAndThrowOnMutationInDev = require('deepFreezeAndThrowOnMutationInDev');
20+
var emptyFunction = require('emptyFunction');
21+
var flattenStyle = require('flattenStyle');
22+
23+
var EMPTY_POOL = [[]];
24+
25+
var ENABLED = !!RCTUIManager.dropViews;
26+
27+
/* indicies used for _addToPool arrays */
28+
var TAGS_IDX = 0;
29+
var KEYS_IDX = 1;
30+
var PROPS_IDX = 2;
31+
32+
var _pools = {};
33+
var _poolSize = {};
34+
35+
var layoutOnlyProps = RCTUIManager.layoutOnlyProps;
36+
37+
function isCollapsableForStyle(style) {
38+
var flatStyle = flattenStyle(style);
39+
for (var styleKey in flatStyle) {
40+
if (layoutOnlyProps[styleKey] !== true) {
41+
return false;
42+
}
43+
}
44+
return true;
45+
}
46+
47+
function isCollapsable(viewRef) {
48+
var props = viewRef._currentElement.props;
49+
if (props.collapsable !== undefined && !props.collapsable) {
50+
return false;
51+
}
52+
var validAttributes = viewRef.viewConfig.validAttributes;
53+
for (var propKey in props) {
54+
if (!!validAttributes[propKey] && propKey !== 'style' && propKey !== 'collapsable') {
55+
return false;
56+
}
57+
}
58+
return !props.style || isCollapsableForStyle(viewRef._currentElement.props.style);
59+
}
60+
61+
function enqueueCreate(viewRef, rootTag) {
62+
var tag = ReactNativeTagHandles.allocateTag();
63+
64+
if (__DEV__) {
65+
deepFreezeAndThrowOnMutationInDev(viewRef._currentElement.props);
66+
}
67+
68+
var updatePayload = ReactNativeAttributePayload.create(
69+
viewRef._currentElement.props,
70+
viewRef.viewConfig.validAttributes
71+
);
72+
73+
RCTUIManager.createView(
74+
tag,
75+
viewRef.viewConfig.uiViewClassName,
76+
rootTag,
77+
updatePayload
78+
);
79+
80+
return tag;
81+
}
82+
83+
function getViewTag(viewRef) {
84+
return ReactNativeTagHandles.mostRecentMountedNodeHandleForRootNodeID(viewRef._rootNodeID);
85+
}
86+
87+
function getViewProps(viewRef) {
88+
return viewRef._currentElement.props;
89+
}
90+
91+
function getViewValidAttributes(viewRef) {
92+
return viewRef.viewConfig.validAttributes;
93+
}
94+
95+
function getRootViewTag(viewRef) {
96+
var nativeTopRootID = ReactNativeTagHandles.getNativeTopRootIDFromNodeID(viewRef._rootNodeID);
97+
return ReactNativeTagHandles.rootNodeIDToTag[nativeTopRootID];
98+
}
99+
100+
function poolKey(viewRef) {
101+
var viewClass = viewRef.viewConfig.uiViewClassName;
102+
if (Platform.OS === 'android' && viewClass === 'RCTView') {
103+
return isCollapsable(viewRef) ? 'CollapsedRCTView' : 'RCTView';
104+
}
105+
return viewClass;
106+
}
107+
108+
class ReactNativeViewPool {
109+
constructor() {
110+
this._pool = {};
111+
this._poolQueue = {};
112+
this._addToPool = [[],[],[]];
113+
this._viewsToDelete = [];
114+
if (__DEV__) {
115+
this._recycleStats = {};
116+
this._deleteStats = {};
117+
}
118+
}
119+
120+
onReconcileTransactionClose() {
121+
// flush all deletes, move object from pool_queue to the actual pool
122+
if (this._viewsToDelete.length > 0) {
123+
RCTUIManager.dropViews(this._viewsToDelete);
124+
}
125+
var addToPoolTags = this._addToPool[TAGS_IDX];
126+
var addToPoolKeys = this._addToPool[KEYS_IDX];
127+
var addToPoolProps = this._addToPool[PROPS_IDX];
128+
for (var i = addToPoolTags.length - 1; i >= 0; i--) {
129+
var nativeTag = addToPoolTags[i];
130+
var key = addToPoolKeys[i];
131+
var props = addToPoolProps[i];
132+
var views = this._pool[key] || [[],[]];
133+
views[0].push(nativeTag);
134+
views[1].push(props);
135+
this._pool[key] = views;
136+
}
137+
this._viewsToDelete = [];
138+
this._addToPool = [[],[],[]];
139+
this._poolQueue = {};
140+
}
141+
142+
acquire(viewRef, rootTag) {
143+
var key = poolKey(viewRef);
144+
if ((this._pool[key] || EMPTY_POOL)[0].length) {
145+
var views = this._pool[key];
146+
var nativeTag = views[0].pop();
147+
var oldProps = views[1].pop();
148+
var updatePayload = ReactNativeAttributePayload.diff(
149+
oldProps,
150+
getViewProps(viewRef),
151+
getViewValidAttributes(viewRef)
152+
);
153+
if (__DEV__) {
154+
this._recycleStats[key] = (this._recycleStats[key] || 0) + 1;
155+
}
156+
157+
if (updatePayload) {
158+
RCTUIManager.updateView(
159+
nativeTag,
160+
viewRef.viewConfig.uiViewClassName,
161+
updatePayload
162+
);
163+
}
164+
return nativeTag;
165+
} else {
166+
// If there is no view available for the given pool key, we just enqueue call to create one
167+
return enqueueCreate(viewRef, rootTag);
168+
}
169+
}
170+
171+
release(viewRef) {
172+
var key = poolKey(viewRef);
173+
var nativeTag = getViewTag(viewRef);
174+
var pooledCount = (this._pool[key] || EMPTY_POOL)[0].length + (this._poolQueue[key] || 0);
175+
if (pooledCount < (_poolSize[key] || 0)) {
176+
// we have room in the pool for this view
177+
// we can add it to the queue so that it will be added to the actual pull in
178+
// onReconcileTransactionClose
179+
this._addToPool[TAGS_IDX].push(nativeTag);
180+
this._addToPool[KEYS_IDX].push(key);
181+
this._addToPool[PROPS_IDX].push(getViewProps(viewRef));
182+
this._poolQueue[key] = (this._poolQueue[key] || 0) + 1;
183+
} else {
184+
if (__DEV__) {
185+
if (_poolSize[key]) {
186+
this._deleteStats[key] = (this._deleteStats[key] || 0) + 1;
187+
}
188+
}
189+
this._viewsToDelete.push(nativeTag);
190+
}
191+
}
192+
193+
clear() {
194+
for (var key in this._pool) {
195+
var poolTags = this._pool[key][0];
196+
for (var i = poolTags.length - 1; i >= 0; i--) {
197+
this._viewsToDelete.push(poolTags[i]);
198+
}
199+
}
200+
var addToPoolTags = this._addToPool[0];
201+
for (var i = addToPoolTags.length - 1; i >= 0; i--) {
202+
this._viewsToDelete.push(addToPoolTags[i]);
203+
}
204+
this._addToPool = [[],[],[]];
205+
this.onReconcileTransactionClose();
206+
}
207+
208+
printStats() {
209+
if (__DEV__) {
210+
console.log('Stats', this._recycleStats, this._deleteStats);
211+
}
212+
}
213+
}
214+
215+
module.exports = {
216+
217+
onReconcileTransactionClose: function() {
218+
if (ENABLED) {
219+
for (var pool in _pools) {
220+
_pools[pool].onReconcileTransactionClose();
221+
}
222+
}
223+
},
224+
225+
acquire: function(viewRef) {
226+
var rootTag = getRootViewTag(viewRef);
227+
if (ENABLED) {
228+
var pool = _pools[rootTag];
229+
if (!pool) {
230+
pool = _pools[rootTag] = new ReactNativeViewPool();
231+
}
232+
return pool.acquire(viewRef, rootTag);
233+
} else {
234+
return enqueueCreate(viewRef, rootTag);
235+
}
236+
},
237+
238+
release: ENABLED ? function(viewRef) {
239+
var pool = _pools[getRootViewTag(viewRef)];
240+
if (pool) {
241+
pool.release(viewRef);
242+
}
243+
} : emptyFunction,
244+
245+
clearPoolForRootView: ENABLED ? function(rootID) {
246+
var pool = _pools[rootID];
247+
if (pool) {
248+
pool.clear();
249+
delete _pools[rootID];
250+
}
251+
} : emptyFunction,
252+
253+
configure: function(pool_size) {
254+
_poolSize = pool_size;
255+
},
256+
257+
printStats: function() {
258+
if (__DEV__) {
259+
console.log('Pool size', _poolSize);
260+
for (var pool in _pools) {
261+
_pools[pool].onReconcileTransactionClose();
262+
}
263+
}
264+
},
265+
};

0 commit comments

Comments
 (0)