Skip to content

Commit 63fff18

Browse files
lunaruanlunaruan
committed
old
1 parent 06a1101 commit 63fff18

File tree

4 files changed

+143
-30
lines changed

4 files changed

+143
-30
lines changed

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

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import type {
3535
} from './ReactFiberCacheComponent.old';
3636
import type {UpdateQueue} from './ReactFiberClassUpdateQueue.old';
3737
import type {RootState} from './ReactFiberRoot.old';
38+
import type {TracingMarkerState} from './ReactFiberTracingMarkerComponent.old';
3839
import {
3940
enableSuspenseAvoidThisFallback,
4041
enableCPUSuspense,
@@ -257,7 +258,10 @@ import {
257258
getOffscreenDeferredCache,
258259
getSuspendedTransitions,
259260
} from './ReactFiberTransition.old';
260-
import {pushTracingMarker} from './ReactFiberTracingMarkerComponent.old';
261+
import {
262+
getTracingMarkers,
263+
pushTracingMarker,
264+
} from './ReactFiberTracingMarkerComponent.old';
261265

262266
const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
263267

@@ -887,6 +891,25 @@ function updateTracingMarkerComponent(
887891
return null;
888892
}
889893

894+
// Only update the tracing marker if it's newly rendered or it's name changed.
895+
// A tracing marker is only associated with the transitions that rendered
896+
// or updated it, so we can create a new set of transitions each time
897+
const updateMarker =
898+
current === null || current.memoizedProps !== workInProgress.pendingProps;
899+
if (updateMarker || !workInProgress.memoizedState) {
900+
const currentTransitions = getSuspendedTransitions();
901+
if (currentTransitions !== null) {
902+
const memoizedState: TracingMarkerState = {
903+
transitions: new Set(currentTransitions),
904+
pendingSuspenseBoundaries: new Map(),
905+
};
906+
workInProgress.memoizedState = memoizedState;
907+
} else {
908+
// If the marker was updated, all previous transitions on it are canceled
909+
workInProgress.memoizedState = null;
910+
}
911+
}
912+
890913
pushTracingMarker(workInProgress);
891914
const nextChildren = workInProgress.pendingProps.children;
892915
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
@@ -2095,8 +2118,12 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
20952118
if (enableTransitionTracing) {
20962119
const currentTransitions = getSuspendedTransitions();
20972120
if (currentTransitions !== null) {
2121+
// If there are no transitions, we don't need to keep track of tracing markers
2122+
const currentTracingMarkers = getTracingMarkers();
20982123
const primaryChildUpdateQueue: OffscreenQueue = {
20992124
transitions: currentTransitions,
2125+
tracingMarkers: currentTracingMarkers,
2126+
markerSuspenseBoundaries: null,
21002127
};
21012128
primaryChildFragment.updateQueue = primaryChildUpdateQueue;
21022129
}
@@ -2172,15 +2199,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
21722199
const primaryChildFragment: Fiber = (workInProgress.child: any);
21732200
const prevOffscreenState: OffscreenState | null = (current.child: any)
21742201
.memoizedState;
2202+
const prevUpdateQueue: OffscreenQueue | null = (current.child: any)
2203+
.memoizedState;
21752204
primaryChildFragment.memoizedState =
21762205
prevOffscreenState === null
21772206
? mountSuspenseOffscreenState(renderLanes)
21782207
: updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
21792208
if (enableTransitionTracing) {
21802209
const currentTransitions = getSuspendedTransitions();
21812210
if (currentTransitions !== null) {
2211+
const currentTracingMarkers = getTracingMarkers();
21822212
const primaryChildUpdateQueue: OffscreenQueue = {
21832213
transitions: currentTransitions,
2214+
tracingMarkers: currentTracingMarkers,
2215+
markerSuspenseBoundaries:
2216+
prevUpdateQueue === null
2217+
? null
2218+
: prevUpdateQueue.markerSuspenseBoundaries,
21842219
};
21852220
primaryChildFragment.updateQueue = primaryChildUpdateQueue;
21862221
}

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

Lines changed: 89 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,10 @@ import type {
2929
import type {HookFlags} from './ReactHookEffectTags';
3030
import type {Cache} from './ReactFiberCacheComponent.old';
3131
import type {RootState} from './ReactFiberRoot.old';
32-
import type {Transition} from './ReactFiberTracingMarkerComponent.old';
32+
import type {
33+
Transition,
34+
PendingSuspenseBoundaries,
35+
} from './ReactFiberTracingMarkerComponent.old';
3336

3437
import {
3538
enableCreateEventHandleAPI,
@@ -138,6 +141,7 @@ import {
138141
restorePendingUpdaters,
139142
addTransitionStartCallbackToPendingTransition,
140143
addTransitionCompleteCallbackToPendingTransition,
144+
addMarkerCompleteCallbackToPendingTransition,
141145
setIsRunningInsertionEffect,
142146
} from './ReactFiberWorkLoop.old';
143147
import {
@@ -1068,6 +1072,7 @@ function reappearLayoutEffectsOnFiber(node: Fiber) {
10681072

10691073
function commitTransitionProgress(
10701074
finishedRoot: FiberRoot,
1075+
suspenseBoundaries: Set<PendingSuspenseBoundaries> | null,
10711076
offscreenFiber: Fiber,
10721077
) {
10731078
if (enableTransitionTracing) {
@@ -1113,35 +1118,42 @@ function commitTransitionProgress(
11131118
}
11141119

11151120
if (rootPendingBoundaries !== null) {
1116-
if (previousFiber === null) {
1117-
// Initial mount
1118-
if (isHidden) {
1119-
rootPendingBoundaries.set(offscreenInstance, {
1120-
name,
1121+
// Initial mount or hide
1122+
if (!wasHidden && isHidden) {
1123+
if (suspenseBoundaries !== null) {
1124+
suspenseBoundaries.forEach(pendingBoundaries => {
1125+
pendingBoundaries.set(offscreenInstance, {
1126+
name,
1127+
});
11211128
});
11221129
}
1123-
} else {
1124-
if (wasHidden && !isHidden) {
1125-
// The suspense boundary went from hidden to visible. Remove
1126-
// the boundary from the pending suspense boundaries set
1127-
// if it's there
1128-
if (rootPendingBoundaries.has(offscreenInstance)) {
1129-
rootPendingBoundaries.delete(offscreenInstance);
1130-
1131-
if (rootPendingBoundaries.size === 0 && rootTransitions !== null) {
1132-
rootTransitions.forEach(transition => {
1133-
addTransitionCompleteCallbackToPendingTransition({
1134-
transitionName: transition.name,
1135-
startTime: transition.startTime,
1136-
});
1130+
// The suspense boundaries was just hidden. Add the boundary
1131+
// to the pending boundary set if it's there
1132+
rootPendingBoundaries.set(offscreenInstance, {
1133+
name,
1134+
});
1135+
} else if (wasHidden && !isHidden) {
1136+
// The suspense boundary went from hidden to visible. Remove
1137+
// the boundary from the pending suspense boundaries set
1138+
// if it's there
1139+
if (rootPendingBoundaries.has(offscreenInstance)) {
1140+
rootPendingBoundaries.delete(offscreenInstance);
1141+
1142+
if (rootPendingBoundaries.size === 0 && rootTransitions !== null) {
1143+
rootTransitions.forEach(transition => {
1144+
addTransitionCompleteCallbackToPendingTransition({
1145+
transitionName: transition.name,
1146+
startTime: transition.startTime,
11371147
});
1138-
}
1148+
});
11391149
}
1140-
} else if (!wasHidden && isHidden) {
1141-
// The suspense boundaries was just hidden. Add the boundary
1142-
// to the pending boundary set if it's there
1143-
rootPendingBoundaries.set(offscreenInstance, {
1144-
name,
1150+
}
1151+
1152+
if (suspenseBoundaries !== null) {
1153+
suspenseBoundaries.forEach(pendingBoundaries => {
1154+
if (pendingBoundaries.has(offscreenInstance)) {
1155+
pendingBoundaries.delete(offscreenInstance);
1156+
}
11451157
});
11461158
}
11471159
}
@@ -2906,11 +2918,13 @@ function commitPassiveMountOnFiber(
29062918
}
29072919

29082920
if (enableTransitionTracing) {
2921+
let suspenseMarkers = null;
29092922
const isFallback = finishedWork.memoizedState;
29102923
const queue = (finishedWork.updateQueue: any);
29112924
const rootMemoizedState = finishedRoot.current.memoizedState;
29122925

29132926
if (queue !== null) {
2927+
suspenseMarkers = queue.markerSuspenseBoundaries;
29142928
// We have one instance of the pendingSuspenseBoundaries map.
29152929
// We only need one because we update it during the commit phase.
29162930
// We instantiate a new Map if we haven't already
@@ -2936,12 +2950,40 @@ function commitPassiveMountOnFiber(
29362950
prevTransitions.add(transition);
29372951
});
29382952
}
2953+
const tracingMarkers = queue.tracingMarkers;
2954+
2955+
if (tracingMarkers !== null) {
2956+
if (suspenseMarkers === null) {
2957+
queue.markerSuspenseBoundaries = suspenseMarkers = new Set();
2958+
}
2959+
2960+
tracingMarkers.forEach(marker => {
2961+
const markerTransitions = marker.memoizedState.transitions;
2962+
2963+
// There should only be a few tracing marker transitions because
2964+
// they should be only associated with the transition that
2965+
// caused them
2966+
markerTransitions.forEach(transition => {
2967+
if (finishedWork.memoizedState.transitions.has(transition)) {
2968+
queue.markerSuspenseBoundaries.add(
2969+
marker.memoizedState.pendingSuspenseBoundaries,
2970+
);
2971+
}
2972+
});
2973+
});
2974+
}
29392975
}
29402976
}
29412977

2942-
commitTransitionProgress(finishedRoot, finishedWork);
2978+
commitTransitionProgress(finishedRoot, suspenseMarkers, finishedWork);
29432979

2944-
finishedWork.updateQueue = null;
2980+
if (
2981+
queue === null ||
2982+
queue.markerSuspenseBoundaries === null ||
2983+
queue.markerSuspenseBoundaries.size === 0
2984+
) {
2985+
finishedWork.updateQueue = null;
2986+
}
29452987
}
29462988

29472989
break;
@@ -2967,6 +3009,25 @@ function commitPassiveMountOnFiber(
29673009
}
29683010
break;
29693011
}
3012+
case TracingMarkerComponent: {
3013+
if (enableTransitionTracing) {
3014+
// Get the transitions that were initiatized during the render
3015+
// and add a start transition callback for each of them
3016+
const state = finishedWork.memoizedState;
3017+
if (state !== null && state.pendingSuspenseBoundaries.size === 0) {
3018+
state.transitions.forEach(transition => {
3019+
addMarkerCompleteCallbackToPendingTransition({
3020+
transitionName: transition.name,
3021+
startTime: transition.startTime,
3022+
markerName: finishedWork.memoizedProps.name,
3023+
});
3024+
});
3025+
3026+
finishedWork.memoizedState = null;
3027+
}
3028+
}
3029+
break;
3030+
}
29703031
}
29713032
}
29723033

‎packages/react-reconciler/src/ReactFiberCompleteWork.old.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1581,9 +1581,21 @@ function completeWork(
15811581
}
15821582
case TracingMarkerComponent: {
15831583
if (enableTransitionTracing) {
1584-
// Bubble subtree flags before so we can set the flag property
1584+
const updateMarker =
1585+
current === null ||
1586+
current.memoizedProps !== workInProgress.pendingProps;
1587+
if (updateMarker) {
1588+
workInProgress.flags |= Passive;
1589+
}
15851590
popTracingMarker(workInProgress);
15861591
bubbleProperties(workInProgress);
1592+
1593+
if ((workInProgress.subtreeFlags & Visibility) !== NoFlags) {
1594+
// If any of our suspense children toggle visibility, this means that
1595+
// the pending boundaries array needs to be updated, which we only
1596+
// do in the passive phase.
1597+
workInProgress.flags |= Passive;
1598+
}
15871599
}
15881600
return null;
15891601
}

‎packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ export type BatchConfigTransition = {
3939
_updatedFibers?: Set<Fiber>,
4040
};
4141

42+
export type TracingMarkerState = {|
43+
pendingSuspenseBoundaries: PendingSuspenseBoundaries,
44+
transitions: Set<Transition>,
45+
|} | null;
46+
4247
export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
4348

4449
export function processTransitionCallbacks(

0 commit comments

Comments
 (0)