Skip to content

Commit fba8be3

Browse files
sebmarkbagesebmarkbage
committed
Merge pull request facebook#2546 from sebmarkbage/cleanupinternals
Move more stuff out of ReactComponent
2 parents d75512f + 6dddd60 commit fba8be3

9 files changed

+182
-245
lines changed

‎src/browser/ui/ReactComponentBrowserEnvironment.js‎

Lines changed: 1 addition & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,9 @@
1414
"use strict";
1515

1616
var ReactDOMIDOperations = require('ReactDOMIDOperations');
17-
var ReactMarkupChecksum = require('ReactMarkupChecksum');
1817
var ReactMount = require('ReactMount');
19-
var ReactPerf = require('ReactPerf');
2018
var ReactReconcileTransaction = require('ReactReconcileTransaction');
2119

22-
var getReactRootElementInContainer = require('getReactRootElementInContainer');
23-
var invariant = require('invariant');
24-
var setInnerHTML = require('setInnerHTML');
25-
26-
27-
var ELEMENT_NODE_TYPE = 1;
28-
var DOC_NODE_TYPE = 9;
29-
30-
3120
/**
3221
* Abstracts away all functionality of `ReactComponent` requires knowledge of
3322
* the browser context.
@@ -46,70 +35,8 @@ var ReactComponentBrowserEnvironment = {
4635
*/
4736
unmountIDFromEnvironment: function(rootNodeID) {
4837
ReactMount.purgeID(rootNodeID);
49-
},
50-
51-
/**
52-
* @param {string} markup Markup string to place into the DOM Element.
53-
* @param {DOMElement} container DOM Element to insert markup into.
54-
* @param {boolean} shouldReuseMarkup Should reuse the existing markup in the
55-
* container if possible.
56-
*/
57-
mountImageIntoNode: ReactPerf.measure(
58-
'ReactComponentBrowserEnvironment',
59-
'mountImageIntoNode',
60-
function(markup, container, shouldReuseMarkup) {
61-
invariant(
62-
container && (
63-
container.nodeType === ELEMENT_NODE_TYPE ||
64-
container.nodeType === DOC_NODE_TYPE
65-
),
66-
'mountComponentIntoNode(...): Target container is not valid.'
67-
);
68-
69-
if (shouldReuseMarkup) {
70-
if (ReactMarkupChecksum.canReuseMarkup(
71-
markup,
72-
getReactRootElementInContainer(container))) {
73-
return;
74-
} else {
75-
invariant(
76-
container.nodeType !== DOC_NODE_TYPE,
77-
'You\'re trying to render a component to the document using ' +
78-
'server rendering but the checksum was invalid. This usually ' +
79-
'means you rendered a different component type or props on ' +
80-
'the client from the one on the server, or your render() ' +
81-
'methods are impure. React cannot handle this case due to ' +
82-
'cross-browser quirks by rendering at the document root. You ' +
83-
'should look for environment dependent code in your components ' +
84-
'and ensure the props are the same client and server side.'
85-
);
86-
87-
if (__DEV__) {
88-
console.warn(
89-
'React attempted to use reuse markup in a container but the ' +
90-
'checksum was invalid. This generally means that you are ' +
91-
'using server rendering and the markup generated on the ' +
92-
'server was not what the client was expecting. React injected ' +
93-
'new markup to compensate which works but you have lost many ' +
94-
'of the benefits of server rendering. Instead, figure out ' +
95-
'why the markup being generated is different on the client ' +
96-
'or server.'
97-
);
98-
}
99-
}
100-
}
101-
102-
invariant(
103-
container.nodeType !== DOC_NODE_TYPE,
104-
'You\'re trying to render a component to the document but ' +
105-
'you didn\'t use server rendering. We can\'t do this ' +
106-
'without using server rendering due to cross-browser quirks. ' +
107-
'See renderComponentToString() for server rendering.'
108-
);
38+
}
10939

110-
setInnerHTML(container, markup);
111-
}
112-
)
11340
};
11441

11542
module.exports = ReactComponentBrowserEnvironment;

‎src/browser/ui/ReactDOMComponent.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,8 @@ function validateDangerousTag(tag) {
147147
function ReactDOMComponent(tag) {
148148
validateDangerousTag(tag);
149149
this._tag = tag;
150+
this._renderedChildren = null;
151+
this._previousStyleCopy = null;
150152
}
151153

152154
ReactDOMComponent.displayName = 'ReactDOMComponent';
@@ -291,11 +293,9 @@ ReactDOMComponent.Mixin = {
291293
return;
292294
}
293295

294-
ReactComponent.Mixin.receiveComponent.call(
295-
this,
296-
nextElement,
297-
transaction
298-
);
296+
var prevElement = this._currentElement;
297+
this._currentElement = nextElement;
298+
this.updateComponent(transaction, prevElement, nextElement);
299299
},
300300

301301
/**

‎src/browser/ui/ReactDOMTextComponent.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,10 @@ assign(ReactDOMTextComponent.prototype, {
5050
// TODO: This is really a ReactText (ReactNode), not a ReactElement
5151
this._currentElement = text;
5252
this._stringText = '' + text;
53+
54+
// Properties
55+
this._rootNodeID = null;
56+
this._mountIndex = 0;
5357
},
5458

5559
/**

‎src/browser/ui/ReactMount.js‎

Lines changed: 83 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,16 @@ var ReactElement = require('ReactElement');
1818
var ReactEmptyComponent = require('ReactEmptyComponent');
1919
var ReactInstanceHandles = require('ReactInstanceHandles');
2020
var ReactInstanceMap = require('ReactInstanceMap');
21+
var ReactMarkupChecksum = require('ReactMarkupChecksum');
2122
var ReactPerf = require('ReactPerf');
23+
var ReactUpdates = require('ReactUpdates');
2224

2325
var containsNode = require('containsNode');
2426
var deprecated = require('deprecated');
2527
var getReactRootElementInContainer = require('getReactRootElementInContainer');
2628
var instantiateReactComponent = require('instantiateReactComponent');
2729
var invariant = require('invariant');
30+
var setInnerHTML = require('setInnerHTML');
2831
var shouldUpdateReactComponent = require('shouldUpdateReactComponent');
2932
var warning = require('warning');
3033

@@ -208,6 +211,23 @@ function findDeepestCachedAncestor(targetID) {
208211
return foundNode;
209212
}
210213

214+
/**
215+
* Mounts this component and inserts it into the DOM.
216+
*
217+
* @param {string} rootID DOM ID of the root node.
218+
* @param {DOMElement} container DOM element to mount into.
219+
* @param {ReactReconcileTransaction} transaction
220+
* @param {boolean} shouldReuseMarkup If true, do not insert markup
221+
*/
222+
function mountComponentIntoNode(
223+
rootID,
224+
container,
225+
transaction,
226+
shouldReuseMarkup) {
227+
var markup = this.mountComponent(rootID, transaction, 0);
228+
ReactMount._mountImageIntoNode(markup, container, shouldReuseMarkup);
229+
}
230+
211231
/**
212232
* Mounting is the process of initializing a React component by creatings its
213233
* representative DOM elements and inserting them into a supplied `container`.
@@ -321,11 +341,17 @@ var ReactMount = {
321341
componentInstance,
322342
container
323343
);
324-
componentInstance.mountComponentIntoNode(
344+
345+
var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
346+
transaction.perform(
347+
mountComponentIntoNode,
348+
componentInstance,
325349
reactRootID,
326350
container,
351+
transaction,
327352
shouldReuseMarkup
328353
);
354+
ReactUpdates.ReactReconcileTransaction.release(transaction);
329355

330356
if (__DEV__) {
331357
// Record the root element in case it later gets transplanted.
@@ -684,6 +710,62 @@ var ReactMount = {
684710
);
685711
},
686712

713+
_mountImageIntoNode: ReactPerf.measure(
714+
'ReactMount',
715+
'_mountImageIntoNode',
716+
function(markup, container, shouldReuseMarkup) {
717+
invariant(
718+
container && (
719+
container.nodeType === ELEMENT_NODE_TYPE ||
720+
container.nodeType === DOC_NODE_TYPE
721+
),
722+
'mountComponentIntoNode(...): Target container is not valid.'
723+
);
724+
725+
if (shouldReuseMarkup) {
726+
if (ReactMarkupChecksum.canReuseMarkup(
727+
markup,
728+
getReactRootElementInContainer(container))) {
729+
return;
730+
} else {
731+
invariant(
732+
container.nodeType !== DOC_NODE_TYPE,
733+
'You\'re trying to render a component to the document using ' +
734+
'server rendering but the checksum was invalid. This usually ' +
735+
'means you rendered a different component type or props on ' +
736+
'the client from the one on the server, or your render() ' +
737+
'methods are impure. React cannot handle this case due to ' +
738+
'cross-browser quirks by rendering at the document root. You ' +
739+
'should look for environment dependent code in your components ' +
740+
'and ensure the props are the same client and server side.'
741+
);
742+
743+
if (__DEV__) {
744+
console.warn(
745+
'React attempted to use reuse markup in a container but the ' +
746+
'checksum was invalid. This generally means that you are ' +
747+
'using server rendering and the markup generated on the ' +
748+
'server was not what the client was expecting. React injected ' +
749+
'new markup to compensate which works but you have lost many ' +
750+
'of the benefits of server rendering. Instead, figure out ' +
751+
'why the markup being generated is different on the client ' +
752+
'or server.'
753+
);
754+
}
755+
}
756+
}
757+
758+
invariant(
759+
container.nodeType !== DOC_NODE_TYPE,
760+
'You\'re trying to render a component to the document but ' +
761+
'you didn\'t use server rendering. We can\'t do this ' +
762+
'without using server rendering due to cross-browser quirks. ' +
763+
'See renderComponentToString() for server rendering.'
764+
);
765+
766+
setInnerHTML(container, markup);
767+
}
768+
),
687769

688770
/**
689771
* React ID utilities.

0 commit comments

Comments
 (0)