Stop tracking event listeners on DOM nodes
Basically, we don't need to remove the event listeners because we can just check if something is still mounted when they fire instead. We'll rely on garbage collection to clean them up.
Sebastian Markbage committed
Nov 16, 2016 at 12:41 UTC
77de47e3785881c3c838729d2e0750a579146921
4 files changed
+40
-74
src/renderers/dom/fiber/ReactDOMFiberComponent.js
+40
-71
@@ -200,81 +200,68 @@ function trapBubbledEventsLocal(inst) {
200
'trapBubbledEvent(...): Requires node to be rendered.'
201
);
202
203
+ // TODO: Make sure that we check isMounted before firing any of these events.
204
switch (inst._tag) {
205
case 'iframe':
206
case 'object':
206
- inst._wrapperState.listeners = [
207
- ReactBrowserEventEmitter.trapBubbledEvent(
208
- 'topLoad',
209
- 'load',
210
- node
211
- ),
212
- ];
207
+ ReactBrowserEventEmitter.trapBubbledEvent(
208
+ 'topLoad',
209
+ 'load',
210
+ node
211
+ );
212
break;
213
case 'video':
214
case 'audio':
216
-
217
- inst._wrapperState.listeners = [];
215
// Create listener for each media event
216
for (var event in mediaEvents) {
217
if (mediaEvents.hasOwnProperty(event)) {
221
- inst._wrapperState.listeners.push(
222
- ReactBrowserEventEmitter.trapBubbledEvent(
223
- event,
224
- mediaEvents[event],
225
- node
226
- )
218
+ ReactBrowserEventEmitter.trapBubbledEvent(
219
+ event,
220
+ mediaEvents[event],
221
+ node
222
);
223
}
224
}
225
break;
226
case 'source':
232
- inst._wrapperState.listeners = [
233
- ReactBrowserEventEmitter.trapBubbledEvent(
234
- 'topError',
235
- 'error',
236
- node
237
- ),
238
- ];
227
+ ReactBrowserEventEmitter.trapBubbledEvent(
228
+ 'topError',
229
+ 'error',
230
+ node
231
+ );
232
break;
233
case 'img':
241
- inst._wrapperState.listeners = [
242
- ReactBrowserEventEmitter.trapBubbledEvent(
243
- 'topError',
244
- 'error',
245
- node
246
- ),
247
- ReactBrowserEventEmitter.trapBubbledEvent(
248
- 'topLoad',
249
- 'load',
250
- node
251
- ),
252
- ];
234
+ ReactBrowserEventEmitter.trapBubbledEvent(
235
+ 'topError',
236
+ 'error',
237
+ node
238
+ );
239
+ ReactBrowserEventEmitter.trapBubbledEvent(
240
+ 'topLoad',
241
+ 'load',
242
+ node
243
+ );
244
break;
245
case 'form':
255
- inst._wrapperState.listeners = [
256
- ReactBrowserEventEmitter.trapBubbledEvent(
257
- 'topReset',
258
- 'reset',
259
- node
260
- ),
261
- ReactBrowserEventEmitter.trapBubbledEvent(
262
- 'topSubmit',
263
- 'submit',
264
- node
265
- ),
266
- ];
246
+ ReactBrowserEventEmitter.trapBubbledEvent(
247
+ 'topReset',
248
+ 'reset',
249
+ node
250
+ );
251
+ ReactBrowserEventEmitter.trapBubbledEvent(
252
+ 'topSubmit',
253
+ 'submit',
254
+ node
255
+ );
256
break;
257
case 'input':
258
case 'select':
259
case 'textarea':
271
- inst._wrapperState.listeners = [
272
- ReactBrowserEventEmitter.trapBubbledEvent(
273
- 'topInvalid',
274
- 'invalid',
275
- node
276
- ),
277
- ];
260
+ ReactBrowserEventEmitter.trapBubbledEvent(
261
+ 'topInvalid',
262
+ 'invalid',
263
+ node
264
+ );
265
break;
266
}
267
}
@@ -523,9 +510,6 @@ var ReactDOMFiberComponent = {
510
case 'object':
511
case 'source':
512
case 'video':
526
- workInProgress._wrapperState = {
527
- listeners: null,
528
- };
513
trapBubbledEventsLocal(workInProgress);
514
break;
515
case 'input':
@@ -735,21 +719,6 @@ var ReactDOMFiberComponent = {
719
*/
720
unmountComponent: function(safely, skipLifecycle) {
721
switch (workInProgress._tag) {
738
- case 'audio':
739
- case 'form':
740
- case 'iframe':
741
- case 'img':
742
- case 'link':
743
- case 'object':
744
- case 'source':
745
- case 'video':
746
- var listeners = workInProgress._wrapperState.listeners;
747
- if (listeners) {
748
- for (var i = 0; i < listeners.length; i++) {
749
- listeners[i].remove();
750
- }
751
- }
752
- break;
722
case 'input':
723
case 'textarea':
724
inputValueTracking.stopTracking(workInProgress);
src/renderers/dom/fiber/wrappers/ReactDOMFiberInput.js
-1
@@ -123,7 +123,6 @@ var ReactDOMInput = {
123
inst._wrapperState = {
124
initialChecked: props.checked != null ? props.checked : props.defaultChecked,
125
initialValue: props.value != null ? props.value : defaultValue,
126
- listeners: null,
126
};
127
128
if (__DEV__) {
src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js
-1
@@ -135,7 +135,6 @@ var ReactDOMSelect = {
135
var value = props.value;
136
inst._wrapperState = {
137
initialValue: value != null ? value : props.defaultValue,
138
- listeners: null,
138
wasMultiple: Boolean(props.multiple),
139
};
140
src/renderers/dom/fiber/wrappers/ReactDOMFiberTextarea.js
-1
@@ -119,7 +119,6 @@ var ReactDOMTextarea = {
119
120
inst._wrapperState = {
121
initialValue: '' + initialValue,
122
- listeners: null,
122
};
123
},
124