Merge pull request #23 from heshan0131/performance-fix

Performance fix

Author: ibgreen

src/layers/layer-manager.js

@@ -36,6 +36,7 @@ export function matchLayers(oldLayers, newLayers) {
       assert(oldLayer !== newLayer, 'Matching layer is same');
       // Copy state
       newLayer.state = state;
+      state.layer = newLayer;
       // Keep a temporary ref to the old props, for prop comparison
       newLayer.oldProps = props;
       oldLayer.state = null;
@@ -51,6 +52,7 @@ export function initializeNewLayers(layers, {gl}) {
       // New layer, initialize it's state
       log(1, `initializing layer ${layer.props.id}`);
       layer.initializeLayer({gl});
+      layer.state.layer = layer;
     }
   }
 }

src/layers/layer.js

@@ -132,6 +132,10 @@ export default class Layer {
   shouldUpdate(oldProps, newProps) {
     // If any props have changed
     if (!areEqualShallow(newProps, oldProps)) {
+
+      if (newProps.data.length !== oldProps.data.length) {
+        this.setState({dataChanged: true});
+      }
       return true;
     }
     if (newProps.deepCompare && !isDeepEqual(newProps.data, oldProps.data)) {
@@ -146,7 +150,9 @@ export default class Layer {
   // Default implementation, all attributes will be updated
   willReceiveProps(newProps) {
     const {attributes} = this.state;
-    attributes.invalidateAll();
+    if (this.state.dataChanged){
+      attributes.invalidateAll();
+    }
   }
 
   // gl context still available
@@ -298,7 +304,6 @@ export default class Layer {
   updateAttributes(props) {
     const {attributes} = this.state;
     const numInstances = this.getNumInstances(props);
-
     // Figure out data length
     attributes.update({
       numInstances,
@@ -456,7 +461,7 @@ export default class Layer {
     // "Capture" state as it will be set to null when layer is disposed
     const {state} = this;
     const {primitive} = state;
-    const {self} = state;
+
     const drawType = primitive.drawType ?
       gl.get(primitive.drawType) : gl.POINTS;
 
@@ -468,20 +473,20 @@ export default class Layer {
 
       if (primitive.indices) {
         return () => extension.drawElementsInstancedANGLE(
-          drawType, numIndices, gl.UNSIGNED_SHORT, 0, self.getNumInstances()
+          drawType, numIndices, gl.UNSIGNED_SHORT, 0, state.layer.getNumInstances()
         );
       }
       // else if this.primitive does not have indices
       return () => extension.drawArraysInstancedANGLE(
-        drawType, 0, numVertices / 3, self.getNumInstances()
+        drawType, 0, numVertices / 3, state.layer.getNumInstances()
       );
     }
 
     if (this.state.primitive.indices) {
       return () => gl.drawElements(drawType, numIndices, gl.UNSIGNED_SHORT, 0);
     }
     // else if this.primitive does not have indices
-    return () => gl.drawArrays(drawType, 0, self.getNumInstances());
+    return () => gl.drawArrays(drawType, 0, state.layer.getNumInstances());
   }
 
   checkProp(property, propertyName) {

src/util.js

@@ -17,19 +17,31 @@ function* valueIterator(obj) {
 }
 
 function isPlainObject(o) {
-  return typeof o === 'object' && o.constructor === Object;
+  return o !== null && typeof o === 'object' && o.constructor === Object;
 }
 
 // Shallow compare
-
 export function areEqualShallow(a, b) {
+
+  if (a === b) {
+    return true;
+  }
+
+  if (typeof a !== 'object' || a === null || typeof b !== 'object' || b === null) {
+    return false;
+  }
+
+  if (Object.keys(a).length !== Object.keys(b).length) {
+    return false;
+  }
+
   for (const key in a) {
     if (!(key in b) || a[key] !== b[key]) {
       return false;
     }
   }
   for (const key in b) {
-    if (!(key in a) || a[key] !== b[key]) {
+    if (!(key in a)) {
       return false;
     }
   }