feat(src): move instance creation in componentWillMount

* saves extra render step compared with componentDidMount * use ExecutionEnvironment to check canUseDOM * depends on fbjs@^0.3.1
tomchentw · Oct 13, 2015 · 91d5790 · 91d5790 · idolize · Oct 15, 2015
1 parent 818d7a0
commit 91d5790
Show file tree

Hide file tree

Showing 13 changed files with 97 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -79,6 +79,7 @@
     "tomchentw-npm-dev": "^3.1.0"
   },
   "dependencies": {
+    "fbjs": "^0.3.1",
     "google-maps-infobox": "^1.1.13",
     "invariant": "^2.1.1"
   },

diff --git a/src/Circle.js b/src/Circle.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as CircleCreator,
   circleDefaultPropTypes,
@@ -45,7 +49,10 @@ export default class Circle extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...circleProps} = this.props;
     const circle = CircleCreator._createCircle(mapHolderRef, circleProps);
 

diff --git a/src/DirectionsRenderer.js b/src/DirectionsRenderer.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as DirectionsRendererCreator,
   directionsRendererDefaultPropTypes,
@@ -41,7 +45,10 @@ export default class DirectionsRenderer extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...directionsRendererProps} = this.props;
     const directionsRenderer = DirectionsRendererCreator._createDirectionsRenderer(mapHolderRef, directionsRendererProps);
 

diff --git a/src/DrawingManager.js b/src/DrawingManager.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as DrawingManagerCreator,
   drawingManagerDefaultPropTypes,
@@ -37,7 +41,10 @@ export default class DrawingManager extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...drawingManagerProps} = this.props;
     const drawingManager = DrawingManagerCreator._createDrawingManager(mapHolderRef, drawingManagerProps);
 

diff --git a/src/InfoWindow.js b/src/InfoWindow.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as InfoWindowCreator,
   infoWindowDefaultPropTypes,
@@ -37,7 +41,10 @@ export default class InfoWindow extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, anchorHolderRef, ...infoWindowProps} = this.props;
     const infoWindow = InfoWindowCreator._createInfoWindow(mapHolderRef, infoWindowProps, anchorHolderRef);
 

diff --git a/src/Marker.js b/src/Marker.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as MarkerCreator,
   markerDefaultPropTypes,
@@ -59,7 +63,10 @@ export default class Marker extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...markerProps} = this.props;
     const marker = MarkerCreator._createMarker(mapHolderRef, markerProps);
 

diff --git a/src/OverlayView.js b/src/OverlayView.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as OverlayViewCreator,
   overlayViewDefaultPropTypes,
@@ -47,7 +51,10 @@ export default class OverlayView extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...overlayViewProps} = this.props;
     const overlayView = OverlayViewCreator._createOverlayView(mapHolderRef, overlayViewProps);
 

diff --git a/src/Polygon.js b/src/Polygon.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as PolygonCreator,
   polygonDefaultPropTypes,
@@ -41,7 +45,10 @@ export default class Polygon extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...polygonProps} = this.props;
     const polygon = PolygonCreator._createPolygon(mapHolderRef, polygonProps);
 

diff --git a/src/Polyline.js b/src/Polyline.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as PolylineCreator,
   polylineDefaultPropTypes,
@@ -39,7 +43,10 @@ export default class Polyline extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...polylineProps} = this.props;
     const polyline = PolylineCreator._createPolyline(mapHolderRef, polylineProps);
 

diff --git a/src/Rectangle.js b/src/Rectangle.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as RectangleCreator,
   rectangleDefaultPropTypes,
@@ -43,7 +47,10 @@ export default class Rectangle extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...rectangleProps} = this.props;
     const rectangle = RectangleCreator._createRectangle(mapHolderRef, rectangleProps);
 

diff --git a/src/SearchBox.js b/src/SearchBox.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as SearchBoxCreator,
   searchBoxDefaultPropTypes,
@@ -38,7 +42,10 @@ export default class SearchBox extends Component {
 
   state = {}
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, classes, style, ...searchBoxProps} = this.props;
 
     // Cannot create input via component - Google Maps will mess with React's internal state by detaching/attaching.

diff --git a/src/_Skeleton.js b/src/_Skeleton.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as SkeletonCreator,
   skeletonDefaultPropTypes,
@@ -33,7 +37,10 @@ export default class Skeleton extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...skeletonProps} = this.props;
     const skeleton = SkeletonCreator._createSkeleton(mapHolderRef, skeletonProps);
 

diff --git a/src/addons/InfoBox.js b/src/addons/InfoBox.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as InfoBoxCreator,
   infoBoxDefaultPropTypes,
@@ -41,7 +45,10 @@ export default class InfoBox extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...infoBoxProps} = this.props;
     const infoBox = InfoBoxCreator._createInfoBox(mapHolderRef, infoBoxProps);