Skip to content

Commit 439bca7

Browse files
petehuntzpao
petehunt
authored and
zpao
committed
[perf] New ReactDefaultPerf
Simplified version of facebook#962. More goodies coming soon since the inclusive time isn't very helpful right now.
1 parent 9ac27cb commit 439bca7

File tree

2 files changed

+228
-435
lines changed

2 files changed

+228
-435
lines changed

‎src/browser/ReactComponentBrowserEnvironment.js‎

Lines changed: 64 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
var ReactDOMIDOperations = require('ReactDOMIDOperations');
2424
var ReactMarkupChecksum = require('ReactMarkupChecksum');
2525
var ReactMount = require('ReactMount');
26+
var ReactPerf = require('ReactPerf');
2627
var ReactReconcileTransaction = require('ReactReconcileTransaction');
2728

2829
var getReactRootElementInContainer = require('getReactRootElementInContainer');
@@ -79,71 +80,76 @@ var ReactComponentBrowserEnvironment = {
7980
* @param {boolean} shouldReuseMarkup Should reuse the existing markup in the
8081
* container if possible.
8182
*/
82-
mountImageIntoNode: function(markup, container, shouldReuseMarkup) {
83-
invariant(
84-
container && (
85-
container.nodeType === ELEMENT_NODE_TYPE ||
86-
container.nodeType === DOC_NODE_TYPE
87-
),
88-
'mountComponentIntoNode(...): Target container is not valid.'
89-
);
90-
91-
if (shouldReuseMarkup) {
92-
if (ReactMarkupChecksum.canReuseMarkup(
93-
markup,
94-
getReactRootElementInContainer(container))) {
95-
return;
96-
} else {
97-
invariant(
98-
container.nodeType !== DOC_NODE_TYPE,
99-
'You\'re trying to render a component to the document using ' +
100-
'server rendering but the checksum was invalid. This usually ' +
101-
'means you rendered a different component type or props on ' +
102-
'the client from the one on the server, or your render() methods ' +
103-
'are impure. React cannot handle this case due to cross-browser ' +
104-
'quirks by rendering at the document root. You should look for ' +
105-
'environment dependent code in your components and ensure ' +
106-
'the props are the same client and server side.'
107-
);
108-
109-
if (__DEV__) {
110-
console.warn(
111-
'React attempted to use reuse markup in a container but the ' +
112-
'checksum was invalid. This generally means that you are using ' +
113-
'server rendering and the markup generated on the server was ' +
114-
'not what the client was expecting. React injected new markup ' +
115-
'to compensate which works but you have lost many of the ' +
116-
'benefits of server rendering. Instead, figure out why the ' +
117-
'markup being generated is different on the client or server.'
83+
mountImageIntoNode: ReactPerf.measure(
84+
'ReactComponentBrowserEnvironment',
85+
'mountImageIntoNode',
86+
function(markup, container, shouldReuseMarkup) {
87+
invariant(
88+
container && (
89+
container.nodeType === ELEMENT_NODE_TYPE ||
90+
container.nodeType === DOC_NODE_TYPE
91+
),
92+
'mountComponentIntoNode(...): Target container is not valid.'
93+
);
94+
95+
if (shouldReuseMarkup) {
96+
if (ReactMarkupChecksum.canReuseMarkup(
97+
markup,
98+
getReactRootElementInContainer(container))) {
99+
return;
100+
} else {
101+
invariant(
102+
container.nodeType !== DOC_NODE_TYPE,
103+
'You\'re trying to render a component to the document using ' +
104+
'server rendering but the checksum was invalid. This usually ' +
105+
'means you rendered a different component type or props on ' +
106+
'the client from the one on the server, or your render() ' +
107+
'methods are impure. React cannot handle this case due to ' +
108+
'cross-browser quirks by rendering at the document root. You ' +
109+
'should look for environment dependent code in your components ' +
110+
'and ensure the props are the same client and server side.'
118111
);
112+
113+
if (__DEV__) {
114+
console.warn(
115+
'React attempted to use reuse markup in a container but the ' +
116+
'checksum was invalid. This generally means that you are ' +
117+
'using server rendering and the markup generated on the ' +
118+
'server was not what the client was expecting. React injected' +
119+
'new markup to compensate which works but you have lost many ' +
120+
'of the benefits of server rendering. Instead, figure out ' +
121+
'why the markup being generated is different on the client ' +
122+
'or server.'
123+
);
124+
}
119125
}
120126
}
121-
}
122127

123-
invariant(
124-
container.nodeType !== DOC_NODE_TYPE,
125-
'You\'re trying to render a component to the document but ' +
126-
'you didn\'t use server rendering. We can\'t do this ' +
127-
'without using server rendering due to cross-browser quirks. ' +
128-
'See renderComponentToString() for server rendering.'
129-
);
130-
131-
// Asynchronously inject markup by ensuring that the container is not in
132-
// the document when settings its `innerHTML`.
133-
var parent = container.parentNode;
134-
if (parent) {
135-
var next = container.nextSibling;
136-
parent.removeChild(container);
137-
container.innerHTML = markup;
138-
if (next) {
139-
parent.insertBefore(container, next);
128+
invariant(
129+
container.nodeType !== DOC_NODE_TYPE,
130+
'You\'re trying to render a component to the document but ' +
131+
'you didn\'t use server rendering. We can\'t do this ' +
132+
'without using server rendering due to cross-browser quirks. ' +
133+
'See renderComponentToString() for server rendering.'
134+
);
135+
136+
// Asynchronously inject markup by ensuring that the container is not in
137+
// the document when settings its `innerHTML`.
138+
var parent = container.parentNode;
139+
if (parent) {
140+
var next = container.nextSibling;
141+
parent.removeChild(container);
142+
container.innerHTML = markup;
143+
if (next) {
144+
parent.insertBefore(container, next);
145+
} else {
146+
parent.appendChild(container);
147+
}
140148
} else {
141-
parent.appendChild(container);
149+
container.innerHTML = markup;
142150
}
143-
} else {
144-
container.innerHTML = markup;
145151
}
146-
}
152+
)
147153
};
148154

149155
module.exports = ReactComponentBrowserEnvironment;

0 commit comments

Comments
 (0)