Skip to content

Commit 4cd788a

Browse files
lunaruanlunaruan
authored
Revert "Revert [Transition Tracing] Refactor Transition Tracing Root Code" (#24830)
* refactor root * old * Add comments and push actual marker instance in pushMarkerInstance * old * refactor pushRootMarkerInstance * old * fix test
1 parent e61fd91 commit 4cd788a

16 files changed

Lines changed: 321 additions & 181 deletions

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -736,7 +736,12 @@ export function createFiberFromLegacyHidden(
736736
fiber.lanes=lanes;
737737
// Adding a stateNode for legacy hidden because it's currently using
738738
// the offscreen implementation, which depends on a state node
739-
fiber.stateNode={};
739+
constinstance: OffscreenInstance={
740+
isHidden: false,
741+
pendingMarkers: null,
742+
transitions: null,
743+
};
744+
fiber.stateNode=instance;
740745
returnfiber;
741746
}
742747

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -736,7 +736,12 @@ export function createFiberFromLegacyHidden(
736736
fiber.lanes=lanes;
737737
// Adding a stateNode for legacy hidden because it's currently using
738738
// the offscreen implementation, which depends on a state node
739-
fiber.stateNode={};
739+
constinstance: OffscreenInstance={
740+
isHidden: false,
741+
pendingMarkers: null,
742+
transitions: null,
743+
};
744+
fiber.stateNode=instance;
740745
returnfiber;
741746
}
742747

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

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import type {
2727
OffscreenProps,
2828
OffscreenState,
2929
OffscreenQueue,
30+
OffscreenInstance,
3031
}from'./ReactFiberOffscreenComponent';
3132
importtype{
3233
Cache,
@@ -262,8 +263,9 @@ import {
262263
getPendingTransitions,
263264
}from'./ReactFiberTransition.new';
264265
import{
265-
getTracingMarkers,
266-
pushTracingMarker,
266+
getMarkerInstances,
267+
pushMarkerInstance,
268+
pushRootMarkerInstance,
267269
}from'./ReactFiberTracingMarkerComponent.new';
268270

269271
constReactCurrentOwner=ReactSharedInternals.ReactCurrentOwner;
@@ -779,7 +781,10 @@ function updateOffscreenComponent(
779781
if(enableTransitionTracing){
780782
// We have now gone from hidden to visible, so any transitions should
781783
// be added to the stack to get added to any Offscreen/suspense children
782-
transitions=workInProgress.stateNode.transitions;
784+
constinstance: OffscreenInstance|null=workInProgress.stateNode;
785+
if(instance!==null&&instance.transitions!=null){
786+
transitions=Array.from(instance.transitions);
787+
}
783788
}
784789

785790
pushTransition(workInProgress,prevCachePool,transitions);
@@ -909,7 +914,10 @@ function updateTracingMarkerComponent(
909914
}
910915
}
911916

912-
pushTracingMarker(workInProgress);
917+
constinstance: TracingMarkerInstance|null=workInProgress.stateNode;
918+
if(instance!==null){
919+
pushMarkerInstance(workInProgress,instance);
920+
}
913921
constnextChildren=workInProgress.pendingProps.children;
914922
reconcileChildren(current,workInProgress,nextChildren,renderLanes);
915923
returnworkInProgress.child;
@@ -1313,6 +1321,10 @@ function updateHostRoot(current, workInProgress, renderLanes) {
13131321
constroot: FiberRoot=workInProgress.stateNode;
13141322
pushRootTransition(workInProgress,root,renderLanes);
13151323

1324+
if(enableTransitionTracing){
1325+
pushRootMarkerInstance(workInProgress);
1326+
}
1327+
13161328
if(enableCache){
13171329
constnextCache: Cache=nextState.cache;
13181330
pushCacheProvider(workInProgress,nextCache);
@@ -2098,10 +2110,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
20982110
constcurrentTransitions=getPendingTransitions();
20992111
if(currentTransitions!==null){
21002112
// If there are no transitions, we don't need to keep track of tracing markers
2101-
constcurrentTracingMarkers=getTracingMarkers();
2113+
constparentMarkerInstances=getMarkerInstances();
21022114
constprimaryChildUpdateQueue: OffscreenQueue={
21032115
transitions: currentTransitions,
2104-
tracingMarkers: currentTracingMarkers,
2116+
markerInstances: parentMarkerInstances,
21052117
};
21062118
primaryChildFragment.updateQueue=primaryChildUpdateQueue;
21072119
}
@@ -2188,10 +2200,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
21882200
if(enableTransitionTracing){
21892201
constcurrentTransitions=getPendingTransitions();
21902202
if(currentTransitions!==null){
2191-
constcurrentTracingMarkers=getTracingMarkers();
2203+
constparentMarkerInstances=getMarkerInstances();
21922204
constprimaryChildUpdateQueue: OffscreenQueue={
21932205
transitions: currentTransitions,
2194-
tracingMarkers: currentTracingMarkers,
2206+
markerInstances: parentMarkerInstances,
21952207
};
21962208
primaryChildFragment.updateQueue=primaryChildUpdateQueue;
21972209
}
@@ -3509,6 +3521,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
35093521
constroot: FiberRoot=workInProgress.stateNode;
35103522
pushRootTransition(workInProgress,root,renderLanes);
35113523

3524+
if(enableTransitionTracing){
3525+
pushRootMarkerInstance(workInProgress);
3526+
}
3527+
35123528
if(enableCache){
35133529
constcache: Cache=current.memoizedState.cache;
35143530
pushCacheProvider(workInProgress,cache);
@@ -3694,7 +3710,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
36943710
}
36953711
case TracingMarkerComponent: {
36963712
if(enableTransitionTracing){
3697-
pushTracingMarker(workInProgress);
3713+
constinstance: TracingMarkerInstance|null=workInProgress.stateNode;
3714+
if(instance!==null){
3715+
pushMarkerInstance(workInProgress,instance);
3716+
}
36983717
}
36993718
}
37003719
}

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

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import type {
2727
OffscreenProps,
2828
OffscreenState,
2929
OffscreenQueue,
30+
OffscreenInstance,
3031
}from'./ReactFiberOffscreenComponent';
3132
importtype{
3233
Cache,
@@ -259,8 +260,9 @@ import {
259260
getPendingTransitions,
260261
}from'./ReactFiberTransition.old';
261262
import{
262-
getTracingMarkers,
263-
pushTracingMarker,
263+
getMarkerInstances,
264+
pushMarkerInstance,
265+
pushRootMarkerInstance,
264266
}from'./ReactFiberTracingMarkerComponent.old';
265267

266268
constReactCurrentOwner=ReactSharedInternals.ReactCurrentOwner;
@@ -784,7 +786,10 @@ function updateOffscreenComponent(
784786
if(enableTransitionTracing){
785787
// We have now gone from hidden to visible, so any transitions should
786788
// be added to the stack to get added to any Offscreen/suspense children
787-
transitions=workInProgress.stateNode.transitions;
789+
constinstance: OffscreenInstance|null=workInProgress.stateNode;
790+
if(instance!==null&&instance.transitions!=null){
791+
transitions=Array.from(instance.transitions);
792+
}
788793
}
789794

790795
pushTransition(workInProgress,prevCachePool,transitions);
@@ -909,7 +914,10 @@ function updateTracingMarkerComponent(
909914
}
910915
}
911916

912-
pushTracingMarker(workInProgress);
917+
constinstance: TracingMarkerInstance|null=workInProgress.stateNode;
918+
if(instance!==null){
919+
pushMarkerInstance(workInProgress,instance);
920+
}
913921
constnextChildren=workInProgress.pendingProps.children;
914922
reconcileChildren(current,workInProgress,nextChildren,renderLanes);
915923
returnworkInProgress.child;
@@ -1313,6 +1321,10 @@ function updateHostRoot(current, workInProgress, renderLanes) {
13131321
constroot: FiberRoot=workInProgress.stateNode;
13141322
pushRootTransition(workInProgress,root,renderLanes);
13151323

1324+
if(enableTransitionTracing){
1325+
pushRootMarkerInstance(workInProgress);
1326+
}
1327+
13161328
if(enableCache){
13171329
constnextCache: Cache=nextState.cache;
13181330
pushCacheProvider(workInProgress,nextCache);
@@ -2114,10 +2126,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
21142126
constcurrentTransitions=getPendingTransitions();
21152127
if(currentTransitions!==null){
21162128
// If there are no transitions, we don't need to keep track of tracing markers
2117-
constcurrentTracingMarkers=getTracingMarkers();
2129+
constparentMarkerInstances=getMarkerInstances();
21182130
constprimaryChildUpdateQueue: OffscreenQueue={
21192131
transitions: currentTransitions,
2120-
tracingMarkers: currentTracingMarkers,
2132+
markerInstances: parentMarkerInstances,
21212133
};
21222134
primaryChildFragment.updateQueue=primaryChildUpdateQueue;
21232135
}
@@ -2200,10 +2212,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
22002212
if(enableTransitionTracing){
22012213
constcurrentTransitions=getPendingTransitions();
22022214
if(currentTransitions!==null){
2203-
constcurrentTracingMarkers=getTracingMarkers();
2215+
constparentMarkerInstances=getMarkerInstances();
22042216
constprimaryChildUpdateQueue: OffscreenQueue={
22052217
transitions: currentTransitions,
2206-
tracingMarkers: currentTracingMarkers,
2218+
markerInstances: parentMarkerInstances,
22072219
};
22082220
primaryChildFragment.updateQueue=primaryChildUpdateQueue;
22092221
}
@@ -3510,6 +3522,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
35103522
constroot: FiberRoot=workInProgress.stateNode;
35113523
pushRootTransition(workInProgress,root,renderLanes);
35123524

3525+
if(enableTransitionTracing){
3526+
pushRootMarkerInstance(workInProgress);
3527+
}
3528+
35133529
if(enableCache){
35143530
constcache: Cache=current.memoizedState.cache;
35153531
pushCacheProvider(workInProgress,cache);
@@ -3702,7 +3718,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
37023718
}
37033719
case TracingMarkerComponent: {
37043720
if(enableTransitionTracing){
3705-
pushTracingMarker(workInProgress);
3721+
constinstance: TracingMarkerInstance|null=workInProgress.stateNode;
3722+
if(instance!==null){
3723+
pushMarkerInstance(workInProgress,instance);
3724+
}
37063725
}
37073726
}
37083727
}

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

Lines changed: 30 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2811,47 +2811,35 @@ function commitPassiveMountOnFiber(
28112811
// Get the transitions that were initiatized during the render
28122812
// and add a start transition callback for each of them
28132813
constroot=finishedWork.stateNode;
2814-
letincompleteTransitions=root.incompleteTransitions;
2814+
constincompleteTransitions=root.incompleteTransitions;
28152815
// Initial render
28162816
if(committedTransitions!==null){
2817-
if(incompleteTransitions===null){
2818-
root.incompleteTransitions=incompleteTransitions=newMap();
2819-
}
2820-
28212817
committedTransitions.forEach(transition=>{
28222818
addTransitionStartCallbackToPendingTransition({
28232819
transitionName: transition.name,
28242820
startTime: transition.startTime,
28252821
});
2826-
2827-
if(!incompleteTransitions.has(transition)){
2828-
incompleteTransitions.set(transition,null);
2829-
}
28302822
});
28312823

28322824
clearTransitionsForLanes(finishedRoot,committedLanes);
28332825
}
28342826

2835-
if(incompleteTransitions!==null){
2836-
incompleteTransitions.forEach((pendingBoundaries,transition)=>{
2837-
if(pendingBoundaries===null||pendingBoundaries.size===0){
2827+
incompleteTransitions.forEach(
2828+
({pendingSuspenseBoundaries},transition)=>{
2829+
if(
2830+
pendingSuspenseBoundaries===null||
2831+
pendingSuspenseBoundaries.size===0
2832+
){
28382833
addTransitionCompleteCallbackToPendingTransition({
28392834
transitionName: transition.name,
28402835
startTime: transition.startTime,
28412836
});
28422837
incompleteTransitions.delete(transition);
28432838
}
2844-
});
2845-
}
2839+
},
2840+
);
28462841

2847-
// If there are no more pending suspense boundaries we
2848-
// clear the transitions because they are all complete.
2849-
if(
2850-
incompleteTransitions===null||
2851-
incompleteTransitions.size===0
2852-
){
2853-
root.incompleteTransitions=null;
2854-
}
2842+
clearTransitionsForLanes(finishedRoot,committedLanes);
28552843
}
28562844
break;
28572845
}
@@ -2896,71 +2884,50 @@ function commitPassiveMountOnFiber(
28962884
if(isFallback){
28972885
consttransitions=queue.transitions;
28982886
letprevTransitions=instance.transitions;
2899-
letrootIncompleteTransitions=finishedRoot.incompleteTransitions;
2900-
2901-
// We lazily instantiate transition tracing relevant maps
2902-
// and sets in the commit phase as we need to use them. We only
2903-
// instantiate them in the fallback phase on an as needed basis
2904-
if(rootIncompleteTransitions===null){
2905-
finishedRoot.incompleteTransitions=rootIncompleteTransitions=newMap();
2906-
}
29072887
if(instance.pendingMarkers===null){
29082888
instance.pendingMarkers=newSet();
29092889
}
29102890
if(transitions!==null&&prevTransitions===null){
29112891
instance.transitions=prevTransitions=newSet();
29122892
}
29132893

2914-
// TODO(luna): Combine the root code with the tracing marker code
29152894
if(transitions!==null){
29162895
transitions.forEach(transition=>{
29172896
// Add all the transitions saved in the update queue during
29182897
// the render phase (ie the transitions associated with this boundary)
29192898
// into the transitions set.
29202899
prevTransitions.add(transition);
2921-
2922-
// Add the root transition's pending suspense boundary set to
2923-
// the queue's marker set. We will iterate through the marker
2924-
// set when we toggle state on the suspense boundary and
2925-
// add or remove the pending suspense boundaries as needed.
2926-
if(rootIncompleteTransitions!==null){
2927-
if(!rootIncompleteTransitions.has(transition)){
2928-
rootIncompleteTransitions.set(transition,newMap());
2929-
}
2930-
instance.pendingMarkers.add(
2931-
rootIncompleteTransitions.get(transition),
2932-
);
2933-
}
29342900
});
29352901
}
29362902

2937-
consttracingMarkers=queue.tracingMarkers;
2938-
if(tracingMarkers!==null){
2939-
tracingMarkers.forEach(marker=>{
2940-
constmarkerInstance=marker.stateNode;
2903+
constmarkerInstances=queue.markerInstances;
2904+
if(markerInstances!==null){
2905+
markerInstances.forEach(markerInstance=>{
2906+
if(markerInstance.pendingSuspenseBoundaries===null){
2907+
markerInstance.pendingSuspenseBoundaries=newMap();
2908+
}
2909+
2910+
constmarkerTransitions=markerInstance.transitions;
29412911
// There should only be a few tracing marker transitions because
29422912
// they should be only associated with the transition that
29432913
// caused them
2944-
markerInstance.transitions.forEach(transition=>{
2945-
if(instance.transitions.has(transition)){
2946-
instance.pendingMarkers.add(
2947-
markerInstance.pendingSuspenseBoundaries,
2948-
);
2949-
}
2950-
});
2914+
if(markerTransitions!==null){
2915+
markerTransitions.forEach(transition=>{
2916+
if(instance.transitions.has(transition)){
2917+
instance.pendingMarkers.add(
2918+
markerInstance.pendingSuspenseBoundaries,
2919+
);
2920+
}
2921+
});
2922+
}
29512923
});
29522924
}
29532925
}
29542926

2955-
commitTransitionProgress(finishedWork);
2956-
2957-
if(
2958-
instance.pendingMarkers===null||
2959-
instance.pendingMarkers.size===0
2960-
){
2961-
finishedWork.updateQueue=null;
2962-
}
2927+
finishedWork.updateQueue=null;
29632928
}
2929+
2930+
commitTransitionProgress(finishedWork);
29642931
}
29652932

29662933
break;

0 commit comments

Comments
 (0)