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

Changed "Unknown" fallback displayName to "Anonymous". Added memo/forwardRef labels to Profiler charts.

Browse Source
This commit is contained in:
Brian Vaughn
2019-05-13 15:26:14 -07:00
parent 6b4c758338
commit 1723c5d316
12 changed files with 93 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/__tests__/__snapshots__/profiling-test.js.snap
+5
View File
@@ -1044,6 +1044,7 @@ Object {
"displayName": null,
"id": 1,
"key": null,
"type": 11,
},
2 => Object {
"children": Array [
@@ -1054,24 +1055,28 @@ Object {
"displayName": "Parent",
"id": 2,
"key": null,
"type": 5,
},
3 => Object {
"children": Array [],
"displayName": "Child",
"id": 3,
"key": "0",
"type": 5,
},
4 => Object {
"children": Array [],
"displayName": "Child",
"id": 4,
"key": "1",
"type": 5,
},
5 => Object {
"children": Array [],
"displayName": "Child",
"id": 5,
"key": null,
"type": 8,
},
},
},
src/__tests__/__snapshots__/profilingCharts-test.js.snap
+29 -9
View File
@@ -12,6 +12,7 @@ Object {
"key": null,
"parentID": 0,
"treeBaseDuration": 15,
"type": 11,
},
2 => Object {
"children": Array [
@@ -24,6 +25,7 @@ Object {
"key": null,
"parentID": 1,
"treeBaseDuration": 15,
"type": 5,
},
3 => Object {
"children": Array [],
@@ -32,6 +34,7 @@ Object {
"key": "first",
"parentID": 2,
"treeBaseDuration": 3,
"type": 8,
},
4 => Object {
"children": Array [],
@@ -40,6 +43,7 @@ Object {
"key": "second",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
5 => Object {
"children": Array [],
@@ -48,6 +52,7 @@ Object {
"key": "third",
"parentID": 2,
"treeBaseDuration": 0,
"type": 8,
},
},
"rootID": 1,
@@ -83,7 +88,7 @@ Object {
"actualDuration": 0,
"didRender": true,
"id": 5,
"label": "Child key=\\"third\\" (<0.1ms of <0.1ms)",
"label": "Child (Memo) key=\\"third\\" (<0.1ms of <0.1ms)",
"name": "Child",
"offset": 15,
"selfDuration": 0,
@@ -93,7 +98,7 @@ Object {
"actualDuration": 2,
"didRender": true,
"id": 4,
"label": "Child key=\\"second\\" (2ms of 2ms)",
"label": "Child (Memo) key=\\"second\\" (2ms of 2ms)",
"name": "Child",
"offset": 13,
"selfDuration": 2,
@@ -103,7 +108,7 @@ Object {
"actualDuration": 3,
"didRender": true,
"id": 3,
"label": "Child key=\\"first\\" (3ms of 3ms)",
"label": "Child (Memo) key=\\"first\\" (3ms of 3ms)",
"name": "Child",
"offset": 10,
"selfDuration": 3,
@@ -126,6 +131,7 @@ Object {
"key": null,
"parentID": 0,
"treeBaseDuration": 15,
"type": 11,
},
2 => Object {
"children": Array [
@@ -138,6 +144,7 @@ Object {
"key": null,
"parentID": 1,
"treeBaseDuration": 15,
"type": 5,
},
3 => Object {
"children": Array [],
@@ -146,6 +153,7 @@ Object {
"key": "first",
"parentID": 2,
"treeBaseDuration": 3,
"type": 8,
},
4 => Object {
"children": Array [],
@@ -154,6 +162,7 @@ Object {
"key": "second",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
5 => Object {
"children": Array [],
@@ -162,6 +171,7 @@ Object {
"key": "third",
"parentID": 2,
"treeBaseDuration": 0,
"type": 8,
},
},
"rootID": 1,
@@ -197,7 +207,7 @@ Object {
"actualDuration": 0,
"didRender": false,
"id": 5,
"label": "Child key=\\"third\\"",
"label": "Child (Memo) key=\\"third\\"",
"name": "Child",
"offset": 15,
"selfDuration": 0,
@@ -207,7 +217,7 @@ Object {
"actualDuration": 0,
"didRender": false,
"id": 4,
"label": "Child key=\\"second\\"",
"label": "Child (Memo) key=\\"second\\"",
"name": "Child",
"offset": 13,
"selfDuration": 0,
@@ -217,7 +227,7 @@ Object {
"actualDuration": 0,
"didRender": false,
"id": 3,
"label": "Child key=\\"first\\"",
"label": "Child (Memo) key=\\"first\\"",
"name": "Child",
"offset": 10,
"selfDuration": 0,
@@ -254,6 +264,7 @@ Object {
"key": null,
"parentID": 0,
"treeBaseDuration": 15,
"type": 11,
},
2 => Object {
"children": Array [
@@ -266,6 +277,7 @@ Object {
"key": null,
"parentID": 1,
"treeBaseDuration": 15,
"type": 5,
},
3 => Object {
"children": Array [],
@@ -274,6 +286,7 @@ Object {
"key": "first",
"parentID": 2,
"treeBaseDuration": 3,
"type": 8,
},
4 => Object {
"children": Array [],
@@ -282,6 +295,7 @@ Object {
"key": "second",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
5 => Object {
"children": Array [],
@@ -290,6 +304,7 @@ Object {
"key": "third",
"parentID": 2,
"treeBaseDuration": 0,
"type": 8,
},
},
"rootID": 1,
@@ -308,19 +323,19 @@ Object {
},
Object {
"id": 3,
"label": "Child key=\\"first\\" (3ms)",
"label": "Child (Memo) key=\\"first\\" (3ms)",
"name": "Child",
"value": 3,
},
Object {
"id": 4,
"label": "Child key=\\"second\\" (2ms)",
"label": "Child (Memo) key=\\"second\\" (2ms)",
"name": "Child",
"value": 2,
},
Object {
"id": 5,
"label": "Child key=\\"third\\" (<0.1ms)",
"label": "Child (Memo) key=\\"third\\" (<0.1ms)",
"name": "Child",
"value": 0,
},
@@ -340,6 +355,7 @@ Object {
"key": null,
"parentID": 0,
"treeBaseDuration": 15,
"type": 11,
},
2 => Object {
"children": Array [
@@ -352,6 +368,7 @@ Object {
"key": null,
"parentID": 1,
"treeBaseDuration": 15,
"type": 5,
},
3 => Object {
"children": Array [],
@@ -360,6 +377,7 @@ Object {
"key": "first",
"parentID": 2,
"treeBaseDuration": 3,
"type": 8,
},
4 => Object {
"children": Array [],
@@ -368,6 +386,7 @@ Object {
"key": "second",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
5 => Object {
"children": Array [],
@@ -376,6 +395,7 @@ Object {
"key": "third",
"parentID": 2,
"treeBaseDuration": 0,
"type": 8,
},
},
"rootID": 1,
src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
+14
View File
@@ -12,6 +12,7 @@ Object {
"key": null,
"parentID": 0,
"treeBaseDuration": 12,
"type": 11,
},
2 => Object {
"children": Array [
@@ -22,6 +23,7 @@ Object {
"key": null,
"parentID": 1,
"treeBaseDuration": 12,
"type": 5,
},
3 => Object {
"children": Array [],
@@ -30,6 +32,7 @@ Object {
"key": "0",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
},
"rootID": 1,
@@ -48,6 +51,7 @@ Object {
"key": null,
"parentID": 0,
"treeBaseDuration": 16,
"type": 11,
},
2 => Object {
"children": Array [
@@ -60,6 +64,7 @@ Object {
"key": null,
"parentID": 1,
"treeBaseDuration": 16,
"type": 5,
},
3 => Object {
"children": Array [],
@@ -68,6 +73,7 @@ Object {
"key": "0",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
4 => Object {
"children": Array [],
@@ -76,6 +82,7 @@ Object {
"key": "1",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
5 => Object {
"children": Array [],
@@ -84,6 +91,7 @@ Object {
"key": "2",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
},
"rootID": 1,
@@ -102,6 +110,7 @@ Object {
"key": null,
"parentID": 0,
"treeBaseDuration": 14,
"type": 11,
},
2 => Object {
"children": Array [
@@ -113,6 +122,7 @@ Object {
"key": null,
"parentID": 1,
"treeBaseDuration": 14,
"type": 5,
},
3 => Object {
"children": Array [],
@@ -121,6 +131,7 @@ Object {
"key": "0",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
4 => Object {
"children": Array [],
@@ -129,6 +140,7 @@ Object {
"key": "1",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
},
"rootID": 1,
@@ -147,6 +159,7 @@ Object {
"key": null,
"parentID": 0,
"treeBaseDuration": 10,
"type": 11,
},
2 => Object {
"children": Array [],
@@ -155,6 +168,7 @@ Object {
"key": null,
"parentID": 1,
"treeBaseDuration": 10,
"type": 5,
},
},
"rootID": 1,
src/backend/renderer.js
+6 -8
View File
@@ -459,10 +459,9 @@ export function attach(
return 'EventTarget';
}
case ForwardRef:
const functionName = getDisplayName(resolvedType.render, '');
return (
resolvedType.displayName ||
(functionName !== '' ? functionName : 'ForwardRef')
getDisplayName(resolvedType.render, 'Anonymous')
);
case HostRoot:
return null;
@@ -477,8 +476,7 @@ export function attach(
if (elementType.displayName) {
return elementType.displayName;
} else {
const displayName = type.displayName || type.name;
return displayName ? displayName : 'Memo';
return getDisplayName(type, 'Anonymous');
}
default:
const typeSymbol = getTypeSymbol(type);
@@ -1690,7 +1688,7 @@ export function attach(
const owners = [
{
displayName: getDisplayNameForFiber(fiber) || 'Unknown',
displayName: getDisplayNameForFiber(fiber) || 'Anonymous',
id,
},
];
@@ -1699,7 +1697,7 @@ export function attach(
let owner = _debugOwner;
while (owner !== null) {
owners.unshift({
displayName: getDisplayNameForFiber(owner) || 'Unknown',
displayName: getDisplayNameForFiber(owner) || 'Anonymous',
id: getFiberID(getPrimaryFiber(owner)),
});
owner = owner._debugOwner || null;
@@ -1794,7 +1792,7 @@ export function attach(
let owner = _debugOwner;
while (owner !== null) {
owners.push({
displayName: getDisplayNameForFiber(owner) || 'Unknown',
displayName: getDisplayNameForFiber(owner) || 'Anonymous',
id: getFiberID(getPrimaryFiber(owner)),
});
owner = owner._debugOwner || null;
@@ -2306,7 +2304,7 @@ export function attach(
}
child = child.child;
}
const name = preferredDisplayName || fallbackDisplayName || 'Unknown';
const name = preferredDisplayName || fallbackDisplayName || 'Anonymous';
const counter = rootDisplayNameCounter.get(name) || 0;
rootDisplayNameCounter.set(name, counter + 1);
const pseudoKey = `${name}:${counter}`;
src/devtools/store.js
+1
View File
@@ -720,6 +720,7 @@ export default class Store extends EventEmitter {
children: element.children.slice(0),
displayName: element.displayName,
key: element.key,
type: element.type,
});
element.children.forEach(childID =>
src/devtools/views/Components/SelectedElement.js
+1 -1
View File
@@ -304,7 +304,7 @@ function InspectedElementView({
{owners.map(owner => (
<OwnerView
key={owner.id}
displayName={owner.displayName || 'Unknown'}
displayName={owner.displayName || 'Anonymous'}
id={owner.id}
isInStore={store.containsElement(owner.id)}
/>
src/devtools/views/Profiler/CommitTreeBuilder.js
+3
View File
@@ -144,6 +144,7 @@ function recursivelyInitializeTree(
key: node.key,
parentID,
treeBaseDuration: ((initialTreeBaseDurations.get(id): any): number),
type: node.type,
});
node.children.forEach(childID =>
@@ -225,6 +226,7 @@ function updateTree(
key: null,
parentID: 0,
treeBaseDuration: 0, // This will be updated by a subsequent operation
type,
};
nodes.set(id, node);
@@ -259,6 +261,7 @@ function updateTree(
key,
parentID,
treeBaseDuration: 0, // This will be updated by a subsequent operation
type,
};
nodes.set(id, node);
src/devtools/views/Profiler/FlamegraphChartBuilder.js
+11 -3
View File
@@ -1,5 +1,6 @@
// @flow
import { ElementTypeForwardRef, ElementTypeMemo } from 'src/types';
import { formatDuration } from './utils';
import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
@@ -57,16 +58,23 @@ export function getChartData({
throw Error(`Could not find node with id "${id}" in commit tree`);
}
const { children, displayName, key, treeBaseDuration } = node;
const { children, displayName, key, treeBaseDuration, type } = node;
const actualDuration = actualDurations.get(id) || 0;
const selfDuration = selfDurations.get(id) || 0;
const didRender = actualDurations.has(id);
const name = displayName || 'Unknown';
const name = displayName || 'Anonymous';
const maybeKey = key !== null ? ` key="${key}"` : '';
let label = `${name}${maybeKey}`;
let maybeBadge = '';
if (type === ElementTypeForwardRef) {
maybeBadge = ' (ForwardRef)';
} else if (type === ElementTypeMemo) {
maybeBadge = ' (Memo)';
}
let label = `${name}${maybeBadge}${maybeKey}`;
if (didRender) {
label += ` (${formatDuration(selfDuration)}ms of ${formatDuration(
actualDuration
src/devtools/views/Profiler/RankedChartBuilder.js
+17 -4
View File
@@ -1,5 +1,6 @@
// @flow
import { ElementTypeForwardRef, ElementTypeMemo } from 'src/types';
import { formatDuration } from './utils';
import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
@@ -45,16 +46,28 @@ export function getChartData({
throw Error(`Could not find node with id "${id}" in commit tree`);
}
const { displayName, key, parentID, type } = node;
// Don't show the root node in this chart.
if (node.parentID === 0) {
if (parentID === 0) {
return;
}
const selfDuration = selfDurations.get(id) || 0;
maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
const name = node.displayName || 'Unknown';
const maybeKey = node.key !== null ? ` key="${node.key}"` : '';
const label = `${name}${maybeKey} (${formatDuration(selfDuration)}ms)`;
const name = displayName || 'Anonymous';
const maybeKey = key !== null ? ` key="${key}"` : '';
let maybeBadge = '';
if (type === ElementTypeForwardRef) {
maybeBadge = ' (ForwardRef)';
} else if (type === ElementTypeMemo) {
maybeBadge = ' (Memo)';
}
const label = `${name}${maybeBadge}${maybeKey} (${formatDuration(
selfDuration
)}ms)`;
chartNodes.push({
id,
label,
src/devtools/views/Profiler/types.js
+4
View File
@@ -1,5 +1,7 @@
// @flow
import type { ElementType } from 'src/types';
export type CommitTreeNodeFrontend = {|
id: number,
children: Array<number>,
@@ -7,6 +9,7 @@ export type CommitTreeNodeFrontend = {|
key: number | string | null,
parentID: number,
treeBaseDuration: number,
type: ElementType,
|};
export type CommitTreeFrontend = {|
@@ -61,6 +64,7 @@ export type ProfilingSnapshotNode = {|
children: Array<number>,
displayName: string | null,
key: number | string | null,
type: ElementType,
|};
export type ImportedProfilingData = {|
src/hydration.js
+1 -1
View File
@@ -272,7 +272,7 @@ export function getDisplayNameForReactElement(
if (typeof type === 'string') {
return type;
} else if (type != null) {
return getDisplayName(type, 'Unknown');
return getDisplayName(type, 'Anonymous');
} else {
return 'Element';
}
src/utils.js
+1 -1
View File
@@ -15,7 +15,7 @@ let encodedStringCache = new LRU({ max: 1000 });
export function getDisplayName(
type: Function,
fallbackName: string = 'Unknown'
fallbackName: string = 'Anonymous'
): string {
const nameFromCache = cachedDisplayNames.get(type);
if (nameFromCache != null) {