Fix severe perf problems in component tree devtool (#6770)

One of the ReactMultiChildText tests renders 2145 roots (and even more components) and unmounts none of them. Now we don't loop through them all a bunch of times so the test takes 20 seconds instead of 60.

We should clean up instantiateReactComponent somehow so that the onSetDisplayName call isn't produced for the TopLevelWrapper, which should allow us to just store an array of unmountedIDs instead of a hash map so we at least don't have double maps. This change mirrors the old logic though.

Reviewers: @gaearon, @sebmarkbage
(cherry picked from commit 3cc733a)

src/isomorphic/devtools/ReactComponentTreeDevtool.js

@@ -14,7 +14,8 @@
 var invariant = require('invariant');
 
 var tree = {};
-var rootIDs = [];
+var unmountedIDs = {};
+var rootIDs = {};
 
 function updateTree(id, update) {
  if (!tree[id]) {
@@ -28,6 +29,10 @@ function updateTree(id, update) {
  isMounted: false,
  updateCount: 0,
  };
+ // TODO: We need to do this awkward dance because TopLevelWrapper "never
+ // gets mounted" but its display name gets set in instantiateReactComponent
+ // before its debug ID is set to 0.
+ unmountedIDs[id] = true;
  }
  update(tree[id]);
 }
@@ -99,10 +104,11 @@ var ReactComponentTreeDevtool = {
 
  onMountComponent(id) {
  updateTree(id, item => item.isMounted = true);
+ delete unmountedIDs[id];
  },
 
  onMountRootComponent(id) {
- rootIDs.push(id);
+ rootIDs[id] = true;
  },
 
  onUpdateComponent(id) {
@@ -111,7 +117,8 @@ var ReactComponentTreeDevtool = {
 
  onUnmountComponent(id) {
  updateTree(id, item => item.isMounted = false);
- rootIDs = rootIDs.filter(rootID => rootID !== id);
+ unmountedIDs[id] = true;
+ delete rootIDs[id];
  },
 
  purgeUnmountedComponents() {
@@ -120,9 +127,10 @@ var ReactComponentTreeDevtool = {
  return;
  }
 
- Object.keys(tree)
- .filter(id => !tree[id].isMounted)
- .forEach(purgeDeep);
+ for (var id in unmountedIDs) {
+ purgeDeep(id);
+ }
+ unmountedIDs = {};
  },
 
  isMounted(id) {
@@ -168,7 +176,7 @@ var ReactComponentTreeDevtool = {
  },
 
  getRootIDs() {
- return rootIDs;
+ return Object.keys(rootIDs);
  },
 
  getRegisteredIDs() {