maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

devtools: Remove ForwardRef/Memo from display name if `displayName` is set (#21952) 

* feat(devtools): Remove ForwardRef/Memo from display name if `displayName` is set

* Avoid potentially wasting work by inlining `functionName`
This commit is contained in:
Sebastian Silbermann 2022-07-25 09:02:12 +02:00 committed by GitHub
parent 49f8254d6d
commit b66936ece7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/react-devtools-shared/src/__tests__/profilingCharts-test.js vendored
View File

@ -125,8 +125,8 @@ describe('profiling charts', () => {
"actualDuration": 0, "actualDuration": 0,
"didRender": true, "didRender": true,
"id": 5, "id": 5,
"label": "Child key=\\"third\\" (<0.1ms of <0.1ms)", "label": "Memo(Child) key=\\"third\\" (<0.1ms of <0.1ms)",
"name": "Child", "name": "Memo(Child)",
"offset": 15, "offset": 15,
"selfDuration": 0, "selfDuration": 0,
"treeBaseDuration": 0, "treeBaseDuration": 0,
@ -135,8 +135,8 @@ describe('profiling charts', () => {
"actualDuration": 2, "actualDuration": 2,
"didRender": true, "didRender": true,
"id": 4, "id": 4,
"label": "Child key=\\"second\\" (2ms of 2ms)", "label": "Memo(Child) key=\\"second\\" (2ms of 2ms)",
"name": "Child", "name": "Memo(Child)",
"offset": 13, "offset": 13,
"selfDuration": 2, "selfDuration": 2,
"treeBaseDuration": 2, "treeBaseDuration": 2,
@ -145,8 +145,8 @@ describe('profiling charts', () => {
"actualDuration": 3, "actualDuration": 3,
"didRender": true, "didRender": true,
"id": 3, "id": 3,
"label": "Child key=\\"first\\" (3ms of 3ms)", "label": "Memo(Child) key=\\"first\\" (3ms of 3ms)",
"name": "Child", "name": "Memo(Child)",
"offset": 10, "offset": 10,
"selfDuration": 3, "selfDuration": 3,
"treeBaseDuration": 3, "treeBaseDuration": 3,
@ -176,8 +176,8 @@ describe('profiling charts', () => {
"actualDuration": 0, "actualDuration": 0,
"didRender": false, "didRender": false,
"id": 5, "id": 5,
"label": "Child key=\\"third\\"", "label": "Memo(Child) key=\\"third\\"",
"name": "Child", "name": "Memo(Child)",
"offset": 15, "offset": 15,
"selfDuration": 0, "selfDuration": 0,
"treeBaseDuration": 0, "treeBaseDuration": 0,
@ -186,8 +186,8 @@ describe('profiling charts', () => {
"actualDuration": 0, "actualDuration": 0,
"didRender": false, "didRender": false,
"id": 4, "id": 4,
"label": "Child key=\\"second\\"", "label": "Memo(Child) key=\\"second\\"",
"name": "Child", "name": "Memo(Child)",
"offset": 13, "offset": 13,
"selfDuration": 0, "selfDuration": 0,
"treeBaseDuration": 2, "treeBaseDuration": 2,
@ -196,8 +196,8 @@ describe('profiling charts', () => {
"actualDuration": 0, "actualDuration": 0,
"didRender": false, "didRender": false,
"id": 3, "id": 3,
"label": "Child key=\\"first\\"", "label": "Memo(Child) key=\\"first\\"",
"name": "Child", "name": "Memo(Child)",
"offset": 10, "offset": 10,
"selfDuration": 0, "selfDuration": 0,
"treeBaseDuration": 3, "treeBaseDuration": 3,
@ -267,20 +267,20 @@ describe('profiling charts', () => {
}, },
Object { Object {
"id": 3, "id": 3,
"label": "Child (Memo) key=\\"first\\" (3ms)", "label": "Memo(Child) (Memo) key=\\"first\\" (3ms)",
"name": "Child", "name": "Memo(Child)",
"value": 3, "value": 3,
}, },
Object { Object {
"id": 4, "id": 4,
"label": "Child (Memo) key=\\"second\\" (2ms)", "label": "Memo(Child) (Memo) key=\\"second\\" (2ms)",
"name": "Child", "name": "Memo(Child)",
"value": 2, "value": 2,
}, },
Object { Object {
"id": 5, "id": 5,
"label": "Child (Memo) key=\\"third\\" (<0.1ms)", "label": "Memo(Child) (Memo) key=\\"third\\" (<0.1ms)",
"name": "Child", "name": "Memo(Child)",
"value": 0, "value": 0,
}, },
] ]

6
packages/react-devtools-shared/src/__tests__/store-test.js vendored
View File

@ -1507,7 +1507,7 @@ describe('Store', () => {
<MyComponent> [ForwardRef] <MyComponent> [ForwardRef]
▾ <Anonymous> [ForwardRef] ▾ <Anonymous> [ForwardRef]
<MyComponent2> <MyComponent2>
<Custom> [ForwardRef] <Custom>
<MyComponent4> [Memo] <MyComponent4> [Memo]
▾ <MyComponent> [Memo] ▾ <MyComponent> [Memo]
<MyComponent> [ForwardRef] <MyComponent> [ForwardRef]
@ -1515,8 +1515,8 @@ describe('Store', () => {
<Baz> [Memo][withFoo][withBar] <Baz> [Memo][withFoo][withBar]
<Baz> [ForwardRef][withFoo][withBar] <Baz> [ForwardRef][withFoo][withBar]
<Cache> <Cache>
<memoRefOverride> [Memo] <memoRefOverride>
<forwardRefOverride> [ForwardRef] <forwardRefOverride>
`); `);
}); });

20
packages/react-devtools-shared/src/backend/renderer.js vendored
View File

@ -30,6 +30,7 @@ import {
import { import {
deletePathInObject, deletePathInObject,
getDisplayName, getDisplayName,
getWrappedDisplayName,
getDefaultComponentFilters, getDefaultComponentFilters,
getInObject, getInObject,
getUID, getUID,
@ -451,10 +452,11 @@ export function getInternalReactConstants(
case IndeterminateComponent: case IndeterminateComponent:
return getDisplayName(resolvedType); return getDisplayName(resolvedType);
case ForwardRef: case ForwardRef:
// Mirror https://github.com/facebook/react/blob/7c21bf72ace77094fd1910cc350a548287ef8350/packages/shared/getComponentName.js#L27-L37 return getWrappedDisplayName(
return ( elementType,
(type && type.displayName) || resolvedType,
getDisplayName(resolvedType, 'Anonymous') 'ForwardRef',
'Anonymous',
); );
case HostRoot: case HostRoot:
const fiberRoot = fiber.stateNode; const fiberRoot = fiber.stateNode;
@ -475,10 +477,12 @@ export function getInternalReactConstants(
return 'Lazy'; return 'Lazy';
case MemoComponent: case MemoComponent:
case SimpleMemoComponent: case SimpleMemoComponent:
return ( // Display name in React does not use `Memo` as a wrapper but fallback name.
(elementType && elementType.displayName) || return getWrappedDisplayName(
(type && type.displayName) || elementType,
getDisplayName(resolvedType, 'Anonymous') resolvedType,
'Memo',
'Anonymous',
); );
case SuspenseComponent: case SuspenseComponent:
return 'Suspense'; return 'Suspense';

27
packages/react-devtools-shared/src/utils.js vendored
View File

@ -101,6 +101,19 @@ export function getAllEnumerableKeys(
return keys; return keys;
} }
// Mirror https://github.com/facebook/react/blob/7c21bf72ace77094fd1910cc350a548287ef8350/packages/shared/getComponentName.js#L27-L37
export function getWrappedDisplayName(
outerType: mixed,
innerType: any,
wrapperName: string,
fallbackName?: string,
): string {
return (
(outerType: any).displayName ||
`${wrapperName}(${getDisplayName(innerType, fallbackName)})`
);
}
export function getDisplayName( export function getDisplayName(
type: Function, type: Function,
fallbackName: string = 'Anonymous', fallbackName: string = 'Anonymous',
@ -445,20 +458,6 @@ export function separateDisplayNameAndHOCs(
break; break;
} }
if (type === ElementTypeMemo) {
if (hocDisplayNames === null) {
hocDisplayNames = ['Memo'];
} else {
hocDisplayNames.unshift('Memo');
}
} else if (type === ElementTypeForwardRef) {
if (hocDisplayNames === null) {
hocDisplayNames = ['ForwardRef'];
} else {
hocDisplayNames.unshift('ForwardRef');
}
}
return [displayName, hocDisplayNames]; return [displayName, hocDisplayNames];
} }