Switching between null and a native should not be counted as a waste
Dan Abramov committed
May 11, 2016 at 23:58 UTC
1559111bf9b1dbb355bf89037c90f1abf8226108
3 files changed
+57
-7
src/isomorphic/__tests__/ReactPerf-test.js
+2
-2
@@ -217,7 +217,7 @@ describe('ReactPerf', function() {
217
218
it('should not count replacing null with a native as waste', function() {
219
var element = null;
220
- function Foo () {
220
+ function Foo() {
221
return element;
222
}
223
var container = document.createElement('div');
@@ -230,7 +230,7 @@ describe('ReactPerf', function() {
230
231
it('should not count replacing a native with null as waste', function() {
232
var element = <div />;
233
- function Foo () {
233
+ function Foo() {
234
return element;
235
}
236
var container = document.createElement('div');
src/isomorphic/devtools/__tests__/ReactNativeOperationHistoryDevtool-test.js
+42
@@ -80,6 +80,27 @@ describe('ReactNativeOperationHistoryDevtool', () => {
80
'<!-- react-empty: 1 -->',
81
}]);
82
});
83
+
84
+ it('gets recorded when a native is mounted deeply instead of null', () => {
85
+ var element;
86
+ function Foo() {
87
+ return element;
88
+ }
89
+
90
+ var node = document.createElement('div');
91
+ element = null;
92
+ ReactDOM.render(<Foo />, node);
93
+
94
+ ReactNativeOperationHistoryDevtool.clearHistory();
95
+ element = <span />;
96
+ ReactDOM.render(<Foo />, node);
97
+ var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
98
+ assertHistoryMatches([{
99
+ instanceID: inst._debugID,
100
+ type: 'mount',
101
+ payload: 'SPAN',
102
+ }]);
103
+ });
104
});
105
106
describe('update styles', () => {
@@ -500,6 +521,27 @@ describe('ReactNativeOperationHistoryDevtool', () => {
521
}]);
522
});
523
524
+ it('gets recorded when composite renders to null after a native', () => {
525
+ var element;
526
+ function Foo() {
527
+ return element;
528
+ }
529
+
530
+ var node = document.createElement('div');
531
+ element = <span />;
532
+ ReactDOM.render(<Foo />, node);
533
+ var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
534
+
535
+ ReactNativeOperationHistoryDevtool.clearHistory();
536
+ element = null;
537
+ ReactDOM.render(<Foo />, node);
538
+ assertHistoryMatches([{
539
+ instanceID: inst._debugID,
540
+ type: 'replace with',
541
+ payload: '#comment',
542
+ }]);
543
+ });
544
+
545
it('gets ignored if the type has not changed', () => {
546
var element;
547
function Foo() {
src/renderers/dom/client/utils/DOMChildrenOperations.js
+13
-5
@@ -135,11 +135,19 @@ var dangerouslyReplaceNodeWithMarkup = Danger.dangerouslyReplaceNodeWithMarkup;
135
if (__DEV__) {
136
dangerouslyReplaceNodeWithMarkup = function(oldChild, markup, prevInstance) {
137
Danger.dangerouslyReplaceNodeWithMarkup(oldChild, markup);
138
- ReactInstrumentation.debugTool.onNativeOperation(
139
- prevInstance._debugID,
140
- 'replace with',
141
- markup.toString()
142
- );
138
+ if (prevInstance._debugID !== 0) {
139
+ ReactInstrumentation.debugTool.onNativeOperation(
140
+ prevInstance._debugID,
141
+ 'replace with',
142
+ markup.toString()
143
+ );
144
+ } else {
145
+ ReactInstrumentation.debugTool.onNativeOperation(
146
+ ReactDOMComponentTree.getInstanceFromNode(markup.node)._debugID,
147
+ 'mount',
148
+ markup.toString()
149
+ );
150
+ }
151
};
152
}
153