Add getUpdateCount() to ReactComponentTreeDevtool
It is necessary to exclude just mounted components from wasted calculation.
Dan Abramov committed
Apr 29, 2016 at 21:52 UTC
bc241bfcfef0fb54f6b8436bcf12c402102f565e
4 files changed
+59
src/isomorphic/ReactDebugTool.js
+1
@@ -72,6 +72,7 @@ function resetMeasurements() {
72
tree[id] = {
73
displayName: ReactComponentTreeDevtool.getDisplayName(id),
74
text: ReactComponentTreeDevtool.getText(id),
75
+ updateCount: ReactComponentTreeDevtool.getUpdateCount(id),
76
childIDs: ReactComponentTreeDevtool.getChildIDs(id),
77
// Text nodes don't have owners but this is close enough.
78
ownerID: ownerID || ReactComponentTreeDevtool.getOwnerID(parentID),
src/isomorphic/devtools/ReactComponentTreeDevtool.js
+10
@@ -25,6 +25,7 @@ function updateTree(id, update) {
25
childIDs: [],
26
displayName: 'Unknown',
27
isMounted: false,
28
+ updateCount: 0,
29
};
30
}
31
update(tree[id]);
@@ -95,6 +96,10 @@ var ReactComponentTreeDevtool = {
96
rootIDs.push(id);
97
},
98
99
+ onUpdateComponent(id) {
100
+ updateTree(id, item => item.updateCount++);
101
+ },
102
+
103
onUnmountComponent(id) {
104
updateTree(id, item => item.isMounted = false);
105
rootIDs = rootIDs.filter(rootID => rootID !== id);
@@ -136,6 +141,11 @@ var ReactComponentTreeDevtool = {
141
return item ? item.text : null;
142
},
143
144
+ getUpdateCount(id) {
145
+ var item = tree[id];
146
+ return item ? item.updateCount : 0;
147
+ },
148
+
149
getRootIDs() {
150
return rootIDs;
151
},
src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js
+25
@@ -1697,6 +1697,31 @@ describe('ReactComponentTreeDevtool', () => {
1697
});
1698
});
1699
1700
+ it('reports update counts', () => {
1701
+ var node = document.createElement('div');
1702
+
1703
+ ReactDOM.render(<div className="a" />, node);
1704
+ var divID = ReactComponentTreeDevtool.getRootIDs()[0];
1705
+ expect(ReactComponentTreeDevtool.getUpdateCount(divID)).toEqual(0);
1706
+
1707
+ ReactDOM.render(<span className="a" />, node);
1708
+ var spanID = ReactComponentTreeDevtool.getRootIDs()[0];
1709
+ expect(ReactComponentTreeDevtool.getUpdateCount(divID)).toEqual(0);
1710
+ expect(ReactComponentTreeDevtool.getUpdateCount(spanID)).toEqual(0);
1711
+
1712
+ ReactDOM.render(<span className="b" />, node);
1713
+ expect(ReactComponentTreeDevtool.getUpdateCount(divID)).toEqual(0);
1714
+ expect(ReactComponentTreeDevtool.getUpdateCount(spanID)).toEqual(1);
1715
+
1716
+ ReactDOM.render(<span className="c" />, node);
1717
+ expect(ReactComponentTreeDevtool.getUpdateCount(divID)).toEqual(0);
1718
+ expect(ReactComponentTreeDevtool.getUpdateCount(spanID)).toEqual(2);
1719
+
1720
+ ReactDOM.unmountComponentAtNode(node);
1721
+ expect(ReactComponentTreeDevtool.getUpdateCount(divID)).toEqual(0);
1722
+ expect(ReactComponentTreeDevtool.getUpdateCount(spanID)).toEqual(2);
1723
+ });
1724
+
1725
it('does not report top-level wrapper as a root', () => {
1726
var node = document.createElement('div');
1727
src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js
+23
@@ -1685,6 +1685,29 @@ describe('ReactComponentTreeDevtool', () => {
1685
});
1686
});
1687
1688
+ it('reports update counts', () => {
1689
+ ReactNative.render(<View />, 1);
1690
+ var viewID = ReactComponentTreeDevtool.getRootIDs()[0];
1691
+ expect(ReactComponentTreeDevtool.getUpdateCount(viewID)).toEqual(0);
1692
+
1693
+ ReactNative.render(<Image />, 1);
1694
+ var imageID = ReactComponentTreeDevtool.getRootIDs()[0];
1695
+ expect(ReactComponentTreeDevtool.getUpdateCount(viewID)).toEqual(0);
1696
+ expect(ReactComponentTreeDevtool.getUpdateCount(imageID)).toEqual(0);
1697
+
1698
+ ReactNative.render(<Image />, 1);
1699
+ expect(ReactComponentTreeDevtool.getUpdateCount(viewID)).toEqual(0);
1700
+ expect(ReactComponentTreeDevtool.getUpdateCount(imageID)).toEqual(1);
1701
+
1702
+ ReactNative.render(<Image />, 1);
1703
+ expect(ReactComponentTreeDevtool.getUpdateCount(viewID)).toEqual(0);
1704
+ expect(ReactComponentTreeDevtool.getUpdateCount(imageID)).toEqual(2);
1705
+
1706
+ ReactNative.unmountComponentAtNode(1);
1707
+ expect(ReactComponentTreeDevtool.getUpdateCount(viewID)).toEqual(0);
1708
+ expect(ReactComponentTreeDevtool.getUpdateCount(imageID)).toEqual(2);
1709
+ });
1710
+
1711
it('does not report top-level wrapper as a root', () => {
1712
ReactNative.render(<View><Image /></View>, 1);
1713
expect(getRootDisplayNames()).toEqual(['View']);