Files
react-native/ReactCommon/fabric/components/root/RootShadowNode.cpp
T
Valentin Shergin b5080f7d77 Fabric: Fixing arbitrary-node-replacing (aka RootShadowNode::clone) algorithm
Summary:
This diff changes how arbitrary-node-replacing (aka `RootShadowNode::clone`) algorithm works.
Original implementation worked this way: We specified a node that needs to be replaced and a new replacement node. Then the algorithm finds a node with *the same family* as given the to-be-replaced node and replaced that with a given replacement.
The problem with this approach is that we are replacing a node that we have very little info about (we only know that it shares the same family as specified one). At the same time, we build the replacement based on the exact node that we have. Then imagine the case in which the "target" node can progress/change between a moment where we get a reference to it and a moment where we are trying to clone the tree. In this case, we will replace a "progressed" node with a modified version of the obsolete node.
Practically speaking, it was possible that during a state update we were replacing a node that just got new children with a bit older version of that with old children but with a new state.

How to deal with it? This diff introduces a new interface for this method that allows separating the target node and the actual act of cloning the corresponding node. Instead of specifying actual replacement, we now specify a function that performs the cloning/transformation on-demand on the very exact node that was in the tree at the moment of cloning.

This change does not change/affect any ownership-related relationships between trees and/or nodes.

Ideally, probably, the interface should accept ShadowNodeFamily instance instead of a ShadowNode instance to make the behavior very clear but that requires a bunch of low-level changes that it out of the scope of this fix.

```

                                                                   The old approach.

                     ┌─────────────────┐                          ┌─────────────────┐                          ┌─────────────────┐
                     │                 │                          │                 │                          │                 │
                     │      A(r0)      │                          │      A(r1)      │                          │      A(r2)      │
                     │                 │                          │                 │                          │                 │
                     └─────────────────┘                          └─────────────────┘                          └─────────────────┘
                              │                                            │                                            │
                              │          Let's update the                  │   Meanwhile the node B                     │
                              ▼           state of this                    ▼    gets new children.                      ▼
                     ┌─────────────────┐   node to s1.            ┌─────────────────┐                          ┌─────────────────┐
                     │                 │                          │                 │                          │                 │   Created
                     │    B(r0, s0)    │         ───────▶         │    B(r1, s0)    │         ───────▶         │    B(r2, s1)    │     from
                     │                 │                          │                 │                          │                 │    B(r0).
                     └─────────────────┘                          └─────────────────┘                          └─────────────────┘
                              │                                            │                                            │
                       ┌──────┴──────┐                       ┌─────────────┼─────────────┐                       ┌──────┴──────┐
                       │             │                       │             │             │                       │             │    What just
                       ▼             ▼                       ▼             ▼             ▼                       ▼             ▼     happe..?
                 ┌───────────┐ ┌───────────┐           ┌───────────┐ ┌───────────┐ ┌───────────┐           ┌───────────┐ ┌───────────┐
                 │           │ │           │           │           │ │           │ │           │           │           │ │           │
                 │   C(r0)   │ │   D(r0)   │           │   C(r1)   │ │   D(r1)   │ │   X(r0)   │           │   C(r0)   │ │   D(r0)   │
                 │           │ │           │           │           │ │           │ │           │           │           │ │           │
                 └───────────┘ └───────────┘           └───────────┘ └───────────┘ └───────────┘           └───────────┘ └───────────┘

                                                                   The new approach.

                     ┌─────────────────┐                          ┌─────────────────┐                           ┌─────────────────┐
                     │                 │                          │                 │                           │                 │
                     │      A(r0)      │                          │      A(r1)      │                           │      A(r2)      │
                     │                 │                          │                 │                           │                 │
                     └─────────────────┘                          └─────────────────┘                           └─────────────────┘
                              │                                            │                                             │
                              │         Let's update the                   │                                             │
                              ▼          state of this                     ▼                                             ▼
                     ┌─────────────────┐  node to s1.             ┌─────────────────┐                           ┌─────────────────┐
                     │                 │                          │                 │                           │                 │   Created
                     │    B(r0, s0)    │         ───────▶         │    B(r1, s0)    │         ───────▶          │    B(r2, s1)    │     from
                     │                 │                          │                 │                           │                 │    B(r1).
                     └─────────────────┘                          └─────────────────┘                           └─────────────────┘
                              │                                            │                                             │
                       ┌──────┴──────┐                       ┌─────────────┼─────────────┐                 ┌─────────────┼─────────────┐
                       │             │                       │             │             │                 │             │             │
                       ▼             ▼                       ▼             ▼             ▼                 ▼             ▼             ▼
                 ┌───────────┐ ┌───────────┐           ┌───────────┐ ┌───────────┐ ┌───────────┐     ┌───────────┐ ┌───────────┐ ┌───────────┐
                 │           │ │           │           │           │ │           │ │           │     │           │ │           │ │           │
                 │   C(r0)   │ │   D(r0)   │           │   C(r1)   │ │   D(r1)   │ │   X(r0)   │     │   C(r1)   │ │   D(r1)   │ │   X(r0)   │
                 │           │ │           │           │           │ │           │ │           │     │           │ │           │ │           │
                 └───────────┘ └───────────┘           └───────────┘ └───────────┘ └───────────┘     └───────────┘ └───────────┘ └───────────┘

```

Changelog: [Internal] Fabric-specific internal change.

Reviewed By: JoshuaGross

Differential Revision: D18229704

fbshipit-source-id: face6d0e5c240224ce49e93e783cff3172b60529
2019-10-31 09:38:39 -07:00

92 lines
2.8 KiB
C++

/*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#include "RootShadowNode.h"
#include <react/components/view/conversions.h>
#include <react/debug/SystraceSection.h>
namespace facebook {
namespace react {
const char RootComponentName[] = "RootView";
void RootShadowNode::layout(
std::vector<LayoutableShadowNode const *> *affectedNodes) {
SystraceSection s("RootShadowNode::layout");
ensureUnsealed();
auto layoutContext = getProps()->layoutContext;
layoutContext.affectedNodes = affectedNodes;
layout(layoutContext);
// This is the rare place where shadow node must layout (set `layoutMetrics`)
// itself because there is no a parent node which usually should do it.
if (getHasNewLayout()) {
setLayoutMetrics(layoutMetricsFromYogaNode(yogaNode_));
setHasNewLayout(false);
}
}
RootShadowNode::Unshared RootShadowNode::clone(
LayoutConstraints const &layoutConstraints,
LayoutContext const &layoutContext) const {
auto props = std::make_shared<RootProps const>(
*getProps(), layoutConstraints, layoutContext);
auto newRootShadowNode = std::make_shared<RootShadowNode>(
*this,
ShadowNodeFragment{
/* .tag = */ ShadowNodeFragment::tagPlaceholder(),
/* .surfaceId = */ ShadowNodeFragment::surfaceIdPlaceholder(),
/* .props = */ props,
});
return newRootShadowNode;
}
RootShadowNode::Unshared RootShadowNode::clone(
ShadowNode const &shadowNode,
std::function<ShadowNode::Unshared(ShadowNode const &oldShadowNode)>
callback) const {
auto ancestors = shadowNode.getAncestors(*this);
if (ancestors.size() == 0) {
return RootShadowNode::Unshared{nullptr};
}
auto &parent = ancestors.back();
auto &oldShadowNode = parent.first.get().getChildren().at(parent.second);
assert(ShadowNode::sameFamily(shadowNode, *oldShadowNode));
auto newShadowNode = callback(*oldShadowNode);
auto childNode = newShadowNode;
for (auto it = ancestors.rbegin(); it != ancestors.rend(); ++it) {
auto &parentNode = it->first.get();
auto childIndex = it->second;
auto children = parentNode.getChildren();
assert(ShadowNode::sameFamily(*children.at(childIndex), *childNode));
children[childIndex] = childNode;
childNode = parentNode.clone({
ShadowNodeFragment::tagPlaceholder(),
ShadowNodeFragment::surfaceIdPlaceholder(),
ShadowNodeFragment::propsPlaceholder(),
ShadowNodeFragment::eventEmitterPlaceholder(),
std::make_shared<SharedShadowNodeList>(children),
});
}
return std::const_pointer_cast<RootShadowNode>(
std::static_pointer_cast<RootShadowNode const>(childNode));
}
} // namespace react
} // namespace facebook