Skip to content

Commit

Permalink
Handle Bailed Out HostText update and MultiChildText test (#8371)
Browse files Browse the repository at this point in the history
This handles the case where a host text bails out. In that case we need to
reuse its previous memoizedProps. We should also only schedule an actual
update if it did actually change its text content.

I updated the unit test to ignore comment nodes if we're using Fiber.
  • Loading branch information
sebmarkbage authored Nov 29, 2016
1 parent c740345 commit f634b81
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 22 deletions.
17 changes: 14 additions & 3 deletions src/renderers/shared/fiber/ReactFiberCompleteWork.js
Original file line number Diff line number Diff line change
Expand Up @@ -249,9 +249,20 @@ module.exports = function<T, P, I, TI, C>(config : HostConfig<T, P, I, TI, C>) {
case HostText:
let newText = workInProgress.pendingProps;
if (current && workInProgress.stateNode != null) {
// If we have an alternate, that means this is an update and we need to
// schedule a side-effect to do the updates.
markUpdate(workInProgress);
const oldText = current.memoizedProps;
if (newText === null) {
// If this was a bail out we need to fall back to memoized text.
// This works the same way as HostComponent.
newText = workInProgress.memoizedProps;
if (newText === null) {
newText = oldText;
}
}
// If we have an alternate, that means this is an update and we need
// to schedule a side-effect to do the updates.
if (oldText !== newText) {
markUpdate(workInProgress);
}
} else {
if (typeof newText !== 'string') {
if (workInProgress.stateNode === null) {
Expand Down
46 changes: 27 additions & 19 deletions src/renderers/shared/shared/__tests__/ReactMultiChildText-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@

var React = require('React');
var ReactDOM = require('ReactDOM');
var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
var ReactTestUtils = require('ReactTestUtils');

// Helpers
Expand Down Expand Up @@ -57,28 +58,35 @@ var expectChildren = function(container, children) {
var child = children[i];

if (typeof child === 'string') {
openingCommentNode = outerNode.childNodes[mountIndex];

expect(openingCommentNode.nodeType).toBe(8);
expect(openingCommentNode.nodeValue).toMatch(/ react-text: [0-9]+ /);

if (child === '') {
textNode = null;
closingCommentNode = openingCommentNode.nextSibling;
mountIndex += 2;
} else {
textNode = openingCommentNode.nextSibling;
closingCommentNode = textNode.nextSibling;
mountIndex += 3;
}

if (textNode) {
if (ReactDOMFeatureFlags.useFiber) {
textNode = outerNode.childNodes[mountIndex];
expect(textNode.nodeType).toBe(3);
expect(textNode.data).toBe('' + child);
mountIndex++;
} else {
openingCommentNode = outerNode.childNodes[mountIndex];

expect(openingCommentNode.nodeType).toBe(8);
expect(openingCommentNode.nodeValue).toMatch(/ react-text: [0-9]+ /);

if (child === '') {
textNode = null;
closingCommentNode = openingCommentNode.nextSibling;
mountIndex += 2;
} else {
textNode = openingCommentNode.nextSibling;
closingCommentNode = textNode.nextSibling;
mountIndex += 3;
}

if (textNode) {
expect(textNode.nodeType).toBe(3);
expect(textNode.data).toBe('' + child);
}

expect(closingCommentNode.nodeType).toBe(8);
expect(closingCommentNode.nodeValue).toBe(' /react-text ');
}

expect(closingCommentNode.nodeType).toBe(8);
expect(closingCommentNode.nodeValue).toBe(' /react-text ');
} else {
var elementDOMNode = outerNode.childNodes[mountIndex];
expect(elementDOMNode.tagName).toBe('DIV');
Expand Down

0 comments on commit f634b81

Please sign in to comment.