Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Hide children of Offscreen after destroy effects (#24446)

Browse Source
This commit is contained in:
Ricky
2022-05-03 10:16:53 -04:00
committed by GitHub
parent 6c36aee944
commit 99eef9e2df
12 changed files with 106 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-reconciler/src/ReactFiberCommitWork.new.js
+48 -19
View File
@@ -42,6 +42,7 @@ import {
enableUpdaterTracking,
enableCache,
enableTransitionTracing,
enableFlipOffscreenUnhideOrder,
} from 'shared/ReactFeatureFlags';
import {
FunctionComponent,
@@ -2270,28 +2271,56 @@ function commitMutationEffectsOnFiber(
const isHidden = newState !== null;
const offscreenBoundary: Fiber = finishedWork;
if (supportsMutation) {
// TODO: This needs to run whenever there's an insertion or update
// inside a hidden Offscreen tree.
hideOrUnhideAllChildren(offscreenBoundary, isHidden);
}
if (enableSuspenseLayoutEffectSemantics) {
if (isHidden) {
if (!wasHidden) {
if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
nextEffect = offscreenBoundary;
let offscreenChild = offscreenBoundary.child;
while (offscreenChild !== null) {
nextEffect = offscreenChild;
disappearLayoutEffects_begin(offscreenChild);
offscreenChild = offscreenChild.sibling;
if (enableFlipOffscreenUnhideOrder) {
if (enableSuspenseLayoutEffectSemantics) {
if (isHidden) {
if (!wasHidden) {
if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
nextEffect = offscreenBoundary;
let offscreenChild = offscreenBoundary.child;
while (offscreenChild !== null) {
nextEffect = offscreenChild;
disappearLayoutEffects_begin(offscreenChild);
offscreenChild = offscreenChild.sibling;
}
}
}
} else {
if (wasHidden) {
// TODO: Move re-appear call here for symmetry?
}
}
} else {
if (wasHidden) {
// TODO: Move re-appear call here for symmetry?
}
if (supportsMutation) {
// TODO: This needs to run whenever there's an insertion or update
// inside a hidden Offscreen tree.
hideOrUnhideAllChildren(offscreenBoundary, isHidden);
}
} else {
if (supportsMutation) {
// TODO: This needs to run whenever there's an insertion or update
// inside a hidden Offscreen tree.
hideOrUnhideAllChildren(offscreenBoundary, isHidden);
}
if (enableSuspenseLayoutEffectSemantics) {
if (isHidden) {
if (!wasHidden) {
if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
nextEffect = offscreenBoundary;
let offscreenChild = offscreenBoundary.child;
while (offscreenChild !== null) {
nextEffect = offscreenChild;
disappearLayoutEffects_begin(offscreenChild);
offscreenChild = offscreenChild.sibling;
}
}
}
} else {
if (wasHidden) {
// TODO: Move re-appear call here for symmetry?
}
}
}
}
packages/react-reconciler/src/ReactFiberCommitWork.old.js
+48 -19
View File
@@ -42,6 +42,7 @@ import {
enableUpdaterTracking,
enableCache,
enableTransitionTracing,
enableFlipOffscreenUnhideOrder,
} from 'shared/ReactFeatureFlags';
import {
FunctionComponent,
@@ -2270,28 +2271,56 @@ function commitMutationEffectsOnFiber(
const isHidden = newState !== null;
const offscreenBoundary: Fiber = finishedWork;
if (supportsMutation) {
// TODO: This needs to run whenever there's an insertion or update
// inside a hidden Offscreen tree.
hideOrUnhideAllChildren(offscreenBoundary, isHidden);
}
if (enableSuspenseLayoutEffectSemantics) {
if (isHidden) {
if (!wasHidden) {
if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
nextEffect = offscreenBoundary;
let offscreenChild = offscreenBoundary.child;
while (offscreenChild !== null) {
nextEffect = offscreenChild;
disappearLayoutEffects_begin(offscreenChild);
offscreenChild = offscreenChild.sibling;
if (enableFlipOffscreenUnhideOrder) {
if (enableSuspenseLayoutEffectSemantics) {
if (isHidden) {
if (!wasHidden) {
if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
nextEffect = offscreenBoundary;
let offscreenChild = offscreenBoundary.child;
while (offscreenChild !== null) {
nextEffect = offscreenChild;
disappearLayoutEffects_begin(offscreenChild);
offscreenChild = offscreenChild.sibling;
}
}
}
} else {
if (wasHidden) {
// TODO: Move re-appear call here for symmetry?
}
}
} else {
if (wasHidden) {
// TODO: Move re-appear call here for symmetry?
}
if (supportsMutation) {
// TODO: This needs to run whenever there's an insertion or update
// inside a hidden Offscreen tree.
hideOrUnhideAllChildren(offscreenBoundary, isHidden);
}
} else {
if (supportsMutation) {
// TODO: This needs to run whenever there's an insertion or update
// inside a hidden Offscreen tree.
hideOrUnhideAllChildren(offscreenBoundary, isHidden);
}
if (enableSuspenseLayoutEffectSemantics) {
if (isHidden) {
if (!wasHidden) {
if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
nextEffect = offscreenBoundary;
let offscreenChild = offscreenBoundary.child;
while (offscreenChild !== null) {
nextEffect = offscreenChild;
disappearLayoutEffects_begin(offscreenChild);
offscreenChild = offscreenChild.sibling;
}
}
}
} else {
if (wasHidden) {
// TODO: Move re-appear call here for symmetry?
}
}
}
}
packages/shared/ReactFeatureFlags.js
+1
View File
@@ -38,6 +38,7 @@ export const skipUnmountedBoundaries = true;
//
// TODO: Finish rolling out in www
export const enableSuspenseLayoutEffectSemantics = true;
export const enableFlipOffscreenUnhideOrder = false;
// TODO: Finish rolling out in www
export const enableClientRenderFallbackOnTextMismatch = true;
packages/shared/forks/ReactFeatureFlags.native-fb.js
+1
View File
@@ -59,6 +59,7 @@ export const disableNativeComponentFrames = false;
export const skipUnmountedBoundaries = false;
export const deletedTreeCleanUpLevel = 3;
export const enableSuspenseLayoutEffectSemantics = false;
export const enableFlipOffscreenUnhideOrder = false;
export const enableGetInspectorDataForInstanceInProduction = true;
export const enableNewReconciler = false;
export const deferRenderPhaseUpdateToNextBatch = false;
packages/shared/forks/ReactFeatureFlags.native-oss.js
+1
View File
@@ -49,6 +49,7 @@ export const disableNativeComponentFrames = false;
export const skipUnmountedBoundaries = false;
export const deletedTreeCleanUpLevel = 3;
export const enableSuspenseLayoutEffectSemantics = false;
export const enableFlipOffscreenUnhideOrder = false;
export const enableGetInspectorDataForInstanceInProduction = false;
export const enableNewReconciler = false;
export const deferRenderPhaseUpdateToNextBatch = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
+1
View File
@@ -49,6 +49,7 @@ export const disableNativeComponentFrames = false;
export const skipUnmountedBoundaries = false;
export const deletedTreeCleanUpLevel = 3;
export const enableSuspenseLayoutEffectSemantics = false;
export const enableFlipOffscreenUnhideOrder = false;
export const enableGetInspectorDataForInstanceInProduction = false;
export const enableNewReconciler = false;
export const deferRenderPhaseUpdateToNextBatch = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+1
View File
@@ -44,6 +44,7 @@ export const disableNativeComponentFrames = false;
export const skipUnmountedBoundaries = false;
export const deletedTreeCleanUpLevel = 3;
export const enableSuspenseLayoutEffectSemantics = false;
export const enableFlipOffscreenUnhideOrder = false;
export const enableGetInspectorDataForInstanceInProduction = false;
export const enableNewReconciler = false;
export const deferRenderPhaseUpdateToNextBatch = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+1
View File
@@ -49,6 +49,7 @@ export const disableNativeComponentFrames = false;
export const skipUnmountedBoundaries = false;
export const deletedTreeCleanUpLevel = 3;
export const enableSuspenseLayoutEffectSemantics = false;
export const enableFlipOffscreenUnhideOrder = false;
export const enableGetInspectorDataForInstanceInProduction = false;
export const enableNewReconciler = false;
export const deferRenderPhaseUpdateToNextBatch = false;
packages/shared/forks/ReactFeatureFlags.testing.js
+1
View File
@@ -49,6 +49,7 @@ export const disableNativeComponentFrames = false;
export const skipUnmountedBoundaries = false;
export const deletedTreeCleanUpLevel = 3;
export const enableSuspenseLayoutEffectSemantics = false;
export const enableFlipOffscreenUnhideOrder = false;
export const enableGetInspectorDataForInstanceInProduction = false;
export const enableNewReconciler = false;
export const deferRenderPhaseUpdateToNextBatch = false;
packages/shared/forks/ReactFeatureFlags.testing.www.js
+1
View File
@@ -49,6 +49,7 @@ export const disableNativeComponentFrames = false;
export const skipUnmountedBoundaries = true;
export const deletedTreeCleanUpLevel = 3;
export const enableSuspenseLayoutEffectSemantics = false;
export const enableFlipOffscreenUnhideOrder = false;
export const enableGetInspectorDataForInstanceInProduction = false;
export const enableNewReconciler = false;
export const deferRenderPhaseUpdateToNextBatch = false;
packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+1
View File
@@ -29,6 +29,7 @@ export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __
export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
export const enableTransitionTracing = __VARIANT__;
export const enableSymbolFallbackForWWW = __VARIANT__;
export const enableFlipOffscreenUnhideOrder = __VARIANT__;
// Enable this flag to help with concurrent mode debugging.
// It logs information to the console about React scheduling, rendering, and commit phases.
//
packages/shared/forks/ReactFeatureFlags.www.js
+1
View File
@@ -33,6 +33,7 @@ export const {
enableSyncDefaultUpdates,
enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
enableClientRenderFallbackOnTextMismatch,
enableFlipOffscreenUnhideOrder,
} = dynamicFeatureFlags;
// On WWW, __EXPERIMENTAL__ is used for a new modern build.