Skip to content

Commit df7c004

Browse files
lunaruanlunaruan
committed
Refactor code
1 parent 128d2b1 commit df7c004

File tree

4 files changed

+168
-163
lines changed

4 files changed

+168
-163
lines changed

‎packages/react-reconciler/src/ReactFiberBeginWork.new.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ import {
8989
StaticMask,
9090
ShouldCapture,
9191
ForceClientRender,
92+
Passive,
9293
} from './ReactFiberFlags';
9394
import ReactSharedInternals from 'shared/ReactSharedInternals';
9495
import {
@@ -979,11 +980,13 @@ function updateTracingMarkerComponent(
979980
const markerInstance: TracingMarkerInstance = {
980981
tag: TransitionTracingMarker,
981982
transitions: new Set(currentTransitions),
982-
pendingBoundaries: new Map(),
983+
pendingBoundaries: null,
983984
name: workInProgress.pendingProps.name,
984985
aborts: null,
985986
};
986987
workInProgress.stateNode = markerInstance;
988+
989+
workInProgress.flags |= Passive;
987990
}
988991
} else {
989992
if (__DEV__) {

‎packages/react-reconciler/src/ReactFiberCommitWork.new.js‎

Lines changed: 142 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1140,68 +1140,95 @@ function commitLayoutEffectOnFiber(
11401140
}
11411141
}
11421142

1143-
function abortParentMarkerTransitions(
1143+
function abortTransitionMarker(
11441144
deletedFiber: Fiber,
1145-
nearestMountedAncestor: Fiber,
1145+
currentFiber: Fiber,
11461146
abort: TransitionAbort,
1147+
isInDeletedTree: boolean,
11471148
) {
1148-
const deletedFiberInstance: OffscreenInstance = deletedFiber.stateNode;
1149-
1150-
let fiber = deletedFiber;
1151-
let isInDeletedTree = true;
1152-
while (fiber !== null) {
1153-
switch (fiber.tag) {
1154-
case TracingMarkerComponent:
1155-
const transitions = deletedFiberInstance.transitions;
1156-
1157-
const markerInstance = fiber.stateNode;
1158-
const markerTransitions = markerInstance.transitions;
1159-
if (markerTransitions !== null && transitions !== null) {
1160-
let abortMarker = false;
1161-
transitions.forEach(transition => {
1162-
if (markerTransitions.has(transition)) {
1163-
abortMarker = true;
1164-
}
1165-
});
1149+
const markerInstance: TracingMarkerInstance = currentFiber.stateNode;
1150+
const deletedInstance: OffscreenInstance = deletedFiber.stateNode;
1151+
const deletedTransitions = deletedFiber.stateNode.transitions;
1152+
const pendingBoundaries = markerInstance.pendingBoundaries;
1153+
1154+
let aborts = markerInstance.aborts;
1155+
if (aborts === null) {
1156+
markerInstance.aborts = aborts = [];
1157+
}
11661158

1167-
if (abortMarker) {
1168-
if (markerInstance.aborts === null) {
1169-
markerInstance.aborts = new Set();
1170-
}
1159+
aborts.push(abort);
1160+
addMarkerIncompleteCallbackToPendingTransition(
1161+
currentFiber.memoizedProps.name,
1162+
deletedTransitions,
1163+
aborts,
1164+
);
11711165

1172-
markerInstance.aborts.add(abort);
1173-
addMarkerIncompleteCallbackToPendingTransition(
1174-
fiber.memoizedProps.name,
1175-
transitions,
1176-
markerInstance.aborts,
1177-
);
1166+
// We only want to call onTransitionProgress when the marker hasn't been
1167+
// deleted
1168+
if (
1169+
!isInDeletedTree &&
1170+
pendingBoundaries !== null &&
1171+
pendingBoundaries.has(deletedInstance)
1172+
) {
1173+
pendingBoundaries.delete(deletedInstance);
11781174

1179-
// We only want to call onTransitionProgress when the marker hasn't been
1180-
// deleted
1181-
if (
1182-
!isInDeletedTree &&
1183-
markerInstance.pendingBoundaries !== null &&
1184-
markerInstance.pendingBoundaries.has(deletedFiberInstance)
1185-
) {
1186-
markerInstance.pendingBoundaries.delete(deletedFiberInstance);
1175+
addMarkerProgressCallbackToPendingTransition(
1176+
currentFiber.memoizedProps.name,
1177+
deletedTransitions,
1178+
pendingBoundaries,
1179+
);
1180+
}
1181+
}
11871182

1188-
addMarkerProgressCallbackToPendingTransition(
1189-
fiber.memoizedProps.name,
1190-
transitions,
1191-
markerInstance.pendingBoundaries,
1192-
);
1193-
}
1183+
function abortParentMarkerTransitions(
1184+
deletedFiber: Fiber,
1185+
nearestMountedAncestor: Fiber,
1186+
abort: TransitionAbort,
1187+
) {
1188+
// Find all pending markers that are waiting on child suspense boundaries in the
1189+
// aborted subtree and cancels them
1190+
const deletedFiberInstance: OffscreenInstance = deletedFiber.stateNode;
1191+
const abortedTransitions = deletedFiberInstance.transitions;
1192+
if (abortedTransitions !== null) {
1193+
let fiber = deletedFiber;
1194+
let isInDeletedTree = true;
1195+
while (fiber !== null) {
1196+
switch (fiber.tag) {
1197+
case TracingMarkerComponent:
1198+
const markerInstance: TracingMarkerInstance = fiber.stateNode;
1199+
const markerTransitions = markerInstance.transitions;
1200+
if (markerTransitions !== null) {
1201+
// TODO: Refactor this code. Is there a way to move this code to
1202+
// the deletions phase instead of calculating it here while making sure
1203+
// complete is called appropriately?
1204+
abortedTransitions.forEach(transition => {
1205+
// If one of the transitions on the tracing marker is a transition
1206+
// that was in an aborted subtree, we will abort that tracing marker
1207+
if (
1208+
fiber !== null &&
1209+
markerTransitions.has(transition) &&
1210+
(markerInstance.aborts === null ||
1211+
!markerInstance.aborts.includes(abort))
1212+
) {
1213+
abortTransitionMarker(
1214+
deletedFiber,
1215+
fiber,
1216+
abort,
1217+
isInDeletedTree,
1218+
);
1219+
}
1220+
});
11941221
}
1195-
}
1196-
break;
1197-
case HostRoot:
1198-
const root = fiber.stateNode;
1199-
const incompleteTransitions = root.incompleteTransitions;
1200-
1201-
if (deletedFiberInstance.transitions !== null) {
1202-
deletedFiberInstance.transitions.forEach(transition => {
1203-
if (incompleteTransitions.has(transition)) {
1204-
const transitionInstance = incompleteTransitions.get(transition);
1222+
break;
1223+
case HostRoot:
1224+
const root = fiber.stateNode;
1225+
const rootTransitions = root.incompleteTransitions;
1226+
1227+
abortedTransitions.forEach(transition => {
1228+
if (rootTransitions.has(transition)) {
1229+
const transitionInstance: TracingMarkerInstance = rootTransitions.get(
1230+
transition,
1231+
);
12051232
if (transitionInstance.aborts === null) {
12061233
transitionInstance.aborts = [];
12071234
}
@@ -1217,20 +1244,20 @@ function abortParentMarkerTransitions(
12171244
}
12181245
}
12191246
});
1220-
}
1221-
break;
1222-
default:
1223-
break;
1224-
}
1247+
break;
1248+
default:
1249+
break;
1250+
}
12251251

1226-
if (
1227-
nearestMountedAncestor.deletions !== null &&
1228-
nearestMountedAncestor.deletions.includes(fiber)
1229-
) {
1230-
isInDeletedTree = false;
1231-
fiber = nearestMountedAncestor;
1232-
} else {
1233-
fiber = fiber.return;
1252+
if (
1253+
nearestMountedAncestor.deletions !== null &&
1254+
nearestMountedAncestor.deletions.includes(fiber)
1255+
) {
1256+
isInDeletedTree = false;
1257+
fiber = nearestMountedAncestor;
1258+
} else {
1259+
fiber = fiber.return;
1260+
}
12341261
}
12351262
}
12361263
}
@@ -1280,6 +1307,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
12801307
pendingMarkers.forEach(markerInstance => {
12811308
const pendingBoundaries = markerInstance.pendingBoundaries;
12821309
const transitions = markerInstance.transitions;
1310+
const markerName = markerInstance.name;
12831311
if (
12841312
pendingBoundaries !== null &&
12851313
!pendingBoundaries.has(offscreenInstance)
@@ -1290,10 +1318,10 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
12901318
if (transitions !== null) {
12911319
if (
12921320
markerInstance.tag === TransitionTracingMarker &&
1293-
markerInstance.name !== undefined
1321+
markerName !== null
12941322
) {
12951323
addMarkerProgressCallbackToPendingTransition(
1296-
markerInstance.name,
1324+
markerName,
12971325
transitions,
12981326
pendingBoundaries,
12991327
);
@@ -1317,6 +1345,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
13171345
pendingMarkers.forEach(markerInstance => {
13181346
const pendingBoundaries = markerInstance.pendingBoundaries;
13191347
const transitions = markerInstance.transitions;
1348+
const markerName = markerInstance.name;
13201349
if (
13211350
pendingBoundaries !== null &&
13221351
pendingBoundaries.has(offscreenInstance)
@@ -1325,13 +1354,25 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
13251354
if (transitions !== null) {
13261355
if (
13271356
markerInstance.tag === TransitionTracingMarker &&
1328-
markerInstance.name !== undefined
1357+
markerName !== null
13291358
) {
13301359
addMarkerProgressCallbackToPendingTransition(
1331-
markerInstance.name,
1360+
markerName,
13321361
transitions,
13331362
pendingBoundaries,
13341363
);
1364+
1365+
if (pendingBoundaries.size === 0) {
1366+
if (markerInstance.aborts === null) {
1367+
addMarkerCompleteCallbackToPendingTransition(
1368+
markerName,
1369+
transitions,
1370+
);
1371+
}
1372+
markerInstance.transitions = null;
1373+
markerInstance.pendingBoundaries = null;
1374+
markerInstance.aborts = null;
1375+
}
13351376
} else if (markerInstance.tag === TransitionRoot) {
13361377
transitions.forEach(transition => {
13371378
addTransitionProgressCallbackToPendingTransition(
@@ -2097,28 +2138,6 @@ function commitDeletionEffectsOnFiber(
20972138
offscreenSubtreeWasHidden =
20982139
prevOffscreenSubtreeWasHidden || deletedFiber.memoizedState !== null;
20992140

2100-
if (enableTransitionTracing) {
2101-
// We need to mark this fiber's parents as deleted
2102-
const instance: OffscreenInstance = deletedFiber.stateNode;
2103-
const transitions = instance.transitions;
2104-
if (transitions !== null) {
2105-
let name = null;
2106-
const parent = deletedFiber.return;
2107-
if (
2108-
parent !== null &&
2109-
parent.tag === SuspenseComponent &&
2110-
parent.memoizedProps.unstable_name
2111-
) {
2112-
name = parent.memoizedProps.unstable_name;
2113-
}
2114-
2115-
abortParentMarkerTransitions(deletedFiber, nearestMountedAncestor, {
2116-
reason: 'suspense',
2117-
name,
2118-
});
2119-
}
2120-
}
2121-
21222141
recursivelyTraverseDeletionEffects(
21232142
finishedRoot,
21242143
nearestMountedAncestor,
@@ -2134,21 +2153,36 @@ function commitDeletionEffectsOnFiber(
21342153
}
21352154
break;
21362155
}
2156+
case SuspenseComponent: {
2157+
if (enableTransitionTracing) {
2158+
// We need to mark this fiber's parents as deleted
2159+
const offscreenFiber: Fiber = (deletedFiber.child: any);
2160+
const instance: OffscreenInstance = offscreenFiber.stateNode;
2161+
const transitions = instance.transitions;
2162+
if (transitions !== null) {
2163+
abortParentMarkerTransitions(offscreenFiber, nearestMountedAncestor, {
2164+
reason: 'suspense',
2165+
name: deletedFiber.memoizedProps.unstable_name || null,
2166+
});
2167+
}
2168+
}
2169+
recursivelyTraverseDeletionEffects(
2170+
finishedRoot,
2171+
nearestMountedAncestor,
2172+
deletedFiber,
2173+
);
2174+
return;
2175+
}
21372176
case TracingMarkerComponent: {
21382177
if (enableTransitionTracing) {
21392178
// We need to mark this fiber's parents as deleted
21402179
const instance: TracingMarkerInstance = deletedFiber.stateNode;
21412180
const transitions = instance.transitions;
21422181
if (transitions !== null) {
2143-
const abort = {
2182+
abortParentMarkerTransitions(deletedFiber, nearestMountedAncestor, {
21442183
reason: 'marker',
21452184
name: deletedFiber.memoizedProps.name,
2146-
};
2147-
abortParentMarkerTransitions(
2148-
deletedFiber,
2149-
nearestMountedAncestor,
2150-
abort,
2151-
);
2185+
});
21522186
}
21532187
}
21542188
recursivelyTraverseDeletionEffects(
@@ -3134,6 +3168,7 @@ function commitOffscreenPassiveMountEffects(
31343168

31353169
commitTransitionProgress(finishedWork);
31363170

3171+
// TODO: Refactor this into an if/else branch
31373172
if (!isHidden) {
31383173
instance.transitions = null;
31393174
instance.pendingMarkers = null;
@@ -3168,18 +3203,14 @@ function commitCachePassiveMountEffect(
31683203
function commitTracingMarkerPassiveMountEffect(finishedWork: Fiber) {
31693204
// Get the transitions that were initiatized during the render
31703205
// and add a start transition callback for each of them
3206+
// We will only call this on initial mount of the tracing marker
3207+
// only if there are no suspense children
31713208
const instance = finishedWork.stateNode;
3172-
if (
3173-
instance.transitions !== null &&
3174-
(instance.pendingBoundaries === null ||
3175-
instance.pendingBoundaries.size === 0)
3176-
) {
3177-
if (instance.aborts === null) {
3178-
addMarkerCompleteCallbackToPendingTransition(
3179-
finishedWork.memoizedProps.name,
3180-
instance.transitions,
3181-
);
3182-
}
3209+
if (instance.transitions !== null && instance.pendingBoundaries === null) {
3210+
addMarkerCompleteCallbackToPendingTransition(
3211+
finishedWork.memoizedProps.name,
3212+
instance.transitions,
3213+
);
31833214
instance.transitions = null;
31843215
instance.pendingBoundaries = null;
31853216
instance.aborts = null;
@@ -3674,21 +3705,6 @@ function commitAtomicPassiveEffects(
36743705
}
36753706
break;
36763707
}
3677-
case TracingMarkerComponent: {
3678-
if (enableTransitionTracing) {
3679-
recursivelyTraverseAtomicPassiveEffects(
3680-
finishedRoot,
3681-
finishedWork,
3682-
committedLanes,
3683-
committedTransitions,
3684-
);
3685-
if (flags & Passive) {
3686-
commitTracingMarkerPassiveMountEffect(finishedWork);
3687-
}
3688-
break;
3689-
}
3690-
// Intentional fallthrough to next branch
3691-
}
36923708
// eslint-disable-next-line-no-fallthrough
36933709
default: {
36943710
recursivelyTraverseAtomicPassiveEffects(

0 commit comments

Comments
 (0)