Avoid indexOf() during unmounting a root in the hook (#7496)

* Avoid indexOf() during unmounting a root in the hook * Check for (Map|Set).prototype.keys
facebook · Aug 15, 2016 · 4847578 · 4847578
1 parent 09f0a06
commit 4847578
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 35 deletions.
diff --git a/src/isomorphic/hooks/ReactComponentTreeHook.js b/src/isomorphic/hooks/ReactComponentTreeHook.js
@@ -39,23 +39,40 @@ function isNative(fn) {
   }
 }
 
-var itemMap;
-var itemByKey;
-
-var canUseMap = (
+var canUseCollections = (
+  // Array.from
   typeof Array.from === 'function' &&
+  // Map
   typeof Map === 'function' &&
-  isNative(Map)
+  isNative(Map) &&
+  // Map.prototype.keys
+  Map.prototype != null &&
+  typeof Map.prototype.keys === 'function' &&
+  isNative(Map.prototype.keys) &&
+  // Set
+  typeof Set === 'function' &&
+  isNative(Set) &&
+  // Set.prototype.keys
+  Set.prototype != null &&
+  typeof Set.prototype.keys === 'function' &&
+  isNative(Set.prototype.keys)
 );
 
-if (canUseMap) {
+var itemMap;
+var rootIDSet;
+
+var itemByKey;
+var rootByKey;
+
+if (canUseCollections) {
   itemMap = new Map();
+  rootIDSet = new Set();
 } else {
   itemByKey = {};
+  rootByKey = {};
 }
 
 var unmountedIDs = [];
-var rootIDs = [];
 
 // Use non-numeric keys to prevent V8 performance issues:
 // https://github.com/facebook/react/pull/7232
@@ -67,20 +84,21 @@ function getIDFromKey(key) {
 }
 
 function get(id) {
-  if (canUseMap) {
+  if (canUseCollections) {
     return itemMap.get(id);
+  } else {
+    var key = getKeyFromID(id);
+    return itemByKey[key];
   }
-  var key = getKeyFromID(id);
-  return itemByKey[key];
 }
 
 function remove(id) {
-  if (canUseMap) {
+  if (canUseCollections) {
     itemMap.delete(id);
-    return;
+  } else {
+    var key = getKeyFromID(id);
+    delete itemByKey[key];
   }
-  var key = getKeyFromID(id);
-  delete itemByKey[key];
 }
 
 function create(id, element, parentID) {
@@ -92,12 +110,47 @@ function create(id, element, parentID) {
     isMounted: false,
     updateCount: 0,
   };
-  if (canUseMap) {
+
+  if (canUseCollections) {
     itemMap.set(id, item);
-    return;
+  } else {
+    var key = getKeyFromID(id);
+    itemByKey[key] = item;
+  }
+}
+
+function addRoot(id) {
+  if (canUseCollections) {
+    rootIDSet.add(id);
+  } else {
+    var key = getKeyFromID(id);
+    rootByKey[key] = true;
+  }
+}
+
+function removeRoot(id) {
+  if (canUseCollections) {
+    rootIDSet.delete(id);
+  } else {
+    var key = getKeyFromID(id);
+    delete rootByKey[key];
+  }
+}
+
+function getRegisteredIDs() {
+  if (canUseCollections) {
+    return Array.from(itemMap.keys());
+  } else {
+    return Object.keys(itemByKey).map(getIDFromKey);
+  }
+}
+
+function getRootIDs() {
+  if (canUseCollections) {
+    return Array.from(rootIDSet.keys());
+  } else {
+    return Object.keys(rootByKey).map(getIDFromKey);
   }
-  var key = getKeyFromID(id);
-  itemByKey[key] = item;
 }
 
 function purgeDeep(id) {
@@ -208,8 +261,9 @@ var ReactComponentTreeHook = {
   onMountComponent(id) {
     var item = get(id);
     item.isMounted = true;
-    if (item.parentID === 0) {
-      rootIDs.push(id);
+    var isRoot = item.parentID === 0;
+    if (isRoot) {
+      addRoot(id);
     }
   },
 
@@ -232,11 +286,9 @@ var ReactComponentTreeHook = {
       // got a chance to mount, but it still gets an unmounting event during
       // the error boundary cleanup.
       item.isMounted = false;
-      if (item.parentID === 0) {
-        var indexInRootIDs = rootIDs.indexOf(id);
-        if (indexInRootIDs !== -1) {
-          rootIDs.splice(indexInRootIDs, 1);
-        }
+      var isRoot = item.parentID === 0;
+      if (isRoot) {
+        removeRoot(id);
       }
     }
     unmountedIDs.push(id);
@@ -345,16 +397,9 @@ var ReactComponentTreeHook = {
     return item ? item.updateCount : 0;
   },
 
-  getRootIDs() {
-    return rootIDs;
-  },
+  getRegisteredIDs,
 
-  getRegisteredIDs() {
-    if (canUseMap) {
-      return Array.from(itemMap.keys());
-    }
-    return Object.keys(itemByKey).map(getIDFromKey);
-  },
+  getRootIDs,
 };
 
 module.exports = ReactComponentTreeHook;
diff --git a/src/renderers/shared/hooks/__tests__/ReactComponentTreeHook-test.js b/src/renderers/shared/hooks/__tests__/ReactComponentTreeHook-test.js
@@ -1870,15 +1870,18 @@ describe('ReactComponentTreeHook', () => {
     });
   });
 
-  describe('in environment without Map and Array.from', () => {
+  describe('in environment without Map, Set and Array.from', () => {
     var realMap;
+    var realSet;
     var realArrayFrom;
 
     beforeEach(() => {
       realMap = global.Map;
+      realSet = global.Set;
       realArrayFrom = Array.from;
 
       global.Map = undefined;
+      global.Set = undefined;
       Array.from = undefined;
 
       jest.resetModuleRegistry();
@@ -1893,6 +1896,7 @@ describe('ReactComponentTreeHook', () => {
 
     afterEach(() => {
       global.Map = realMap;
+      global.Set = realSet;
       Array.from = realArrayFrom;
     });