Revert "Revert "Refactor commitPlacement to recursively insert nodes (#17996)" (#18517)" (#18540)
This reverts commit e69ca310ea56b6f2f510dd463902405285953432.
Dan Abramov committed
Apr 8, 2020 at 11:22 UTC
b225d4f2614844a939482ef33baa84aa76bcf402
1 file changed
+61
-33
packages/react-reconciler/src/ReactFiberCommitWork.js
+61
-33
@@ -1279,44 +1279,72 @@ function commitPlacement(finishedWork: Fiber): void {
1279
const before = getHostSibling(finishedWork);
1280
// We only have the top Fiber that was inserted but we need to recurse down its
1281
// children to find all the terminal nodes.
1282
- let node: Fiber = finishedWork;
1283
- while (true) {
1284
- const isHost = node.tag === HostComponent || node.tag === HostText;
1285
- if (isHost || (enableFundamentalAPI && node.tag === FundamentalComponent)) {
1286
- const stateNode = isHost ? node.stateNode : node.stateNode.instance;
1287
- if (before) {
1288
- if (isContainer) {
1289
- insertInContainerBefore(parent, stateNode, before);
1290
- } else {
1291
- insertBefore(parent, stateNode, before);
1292
- }
1293
- } else {
1294
- if (isContainer) {
1295
- appendChildToContainer(parent, stateNode);
1296
- } else {
1297
- appendChild(parent, stateNode);
1298
- }
1282
+ if (isContainer) {
1283
+ insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);
1284
+ } else {
1285
+ insertOrAppendPlacementNode(finishedWork, before, parent);
1286
+ }
1287
+}
1288
+
1289
+function insertOrAppendPlacementNodeIntoContainer(
1290
+ node: Fiber,
1291
+ before: ?Instance,
1292
+ parent: Container,
1293
+): void {
1294
+ const {tag} = node;
1295
+ const isHost = tag === HostComponent || tag === HostText;
1296
+ if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) {
1297
+ const stateNode = isHost ? node.stateNode : node.stateNode.instance;
1298
+ if (before) {
1299
+ insertInContainerBefore(parent, stateNode, before);
1300
+ } else {
1301
+ appendChildToContainer(parent, stateNode);
1302
+ }
1303
+ } else if (tag === HostPortal) {
1304
+ // If the insertion itself is a portal, then we don't want to traverse
1305
+ // down its children. Instead, we'll get insertions from each child in
1306
+ // the portal directly.
1307
+ } else {
1308
+ const child = node.child;
1309
+ if (child !== null) {
1310
+ insertOrAppendPlacementNodeIntoContainer(child, before, parent);
1311
+ let sibling = child.sibling;
1312
+ while (sibling !== null) {
1313
+ insertOrAppendPlacementNodeIntoContainer(sibling, before, parent);
1314
+ sibling = sibling.sibling;
1315
}
1300
- } else if (node.tag === HostPortal) {
1301
- // If the insertion itself is a portal, then we don't want to traverse
1302
- // down its children. Instead, we'll get insertions from each child in
1303
- // the portal directly.
1304
- } else if (node.child !== null) {
1305
- node.child.return = node;
1306
- node = node.child;
1307
- continue;
1316
}
1309
- if (node === finishedWork) {
1310
- return;
1317
+ }
1318
+}
1319
+
1320
+function insertOrAppendPlacementNode(
1321
+ node: Fiber,
1322
+ before: ?Instance,
1323
+ parent: Instance,
1324
+): void {
1325
+ const {tag} = node;
1326
+ const isHost = tag === HostComponent || tag === HostText;
1327
+ if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) {
1328
+ const stateNode = isHost ? node.stateNode : node.stateNode.instance;
1329
+ if (before) {
1330
+ insertBefore(parent, stateNode, before);
1331
+ } else {
1332
+ appendChild(parent, stateNode);
1333
}
1312
- while (node.sibling === null) {
1313
- if (node.return === null || node.return === finishedWork) {
1314
- return;
1334
+ } else if (tag === HostPortal) {
1335
+ // If the insertion itself is a portal, then we don't want to traverse
1336
+ // down its children. Instead, we'll get insertions from each child in
1337
+ // the portal directly.
1338
+ } else {
1339
+ const child = node.child;
1340
+ if (child !== null) {
1341
+ insertOrAppendPlacementNode(child, before, parent);
1342
+ let sibling = child.sibling;
1343
+ while (sibling !== null) {
1344
+ insertOrAppendPlacementNode(sibling, before, parent);
1345
+ sibling = sibling.sibling;
1346
}
1316
- node = node.return;
1347
}
1318
- node.sibling.return = node.return;
1319
- node = node.sibling;
1348
}
1349
}
1350