mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Valentin Shergin
b5080f7d77
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