优化组件性能

components/Circle.js

-import React, {PropTypes, Component} from 'react'
+import React, {PropTypes, PureComponent} from 'react'
 import {
   requireNativeComponent,
   ViewPropTypes,
@@ -7,7 +7,7 @@ import {
 } from 'react-native'
 import {LatLng} from './PropTypes'
 
-export default class Circle extends Component {
+export default class Circle extends PureComponent {
   static propTypes = {
     ...ViewPropTypes,
 

components/MapView.js

 // @flow
-import React, {Component, PropTypes} from 'react'
+import React, {PureComponent, PropTypes} from 'react'
 import {
   findNodeHandle,
   requireNativeComponent,
@@ -15,7 +15,7 @@ type Target = {
   rotation?: number,
 }
 
-export default class MapView extends Component {
+export default class MapView extends PureComponent {
   static propTypes = {
     ...ViewPropTypes,
 

components/Overlay.js

-import React, {PropTypes, Component} from 'react'
+import React, {PropTypes, PureComponent} from 'react'
 import {
   ViewPropTypes,
   UIManager,
@@ -6,7 +6,7 @@ import {
   requireNativeComponent,
 } from 'react-native'
 
-export default class Overlay extends Component {
+export default class Overlay extends PureComponent {
   static propTypes = {
     ...ViewPropTypes,
   }

components/Polygon.js

-import React, {PropTypes, Component} from 'react'
+import React, {PropTypes, PureComponent} from 'react'
 import {
   requireNativeComponent,
   ViewPropTypes,
@@ -7,7 +7,7 @@ import {
 } from 'react-native'
 import {LatLng} from './PropTypes'
 
-export default class Polygon extends Component {
+export default class Polygon extends PureComponent {
   static propTypes = {
     ...ViewPropTypes,
 
@@ -50,4 +50,4 @@ export default class Polygon extends Component {
   }
 }
 
-AMapPolygon = requireNativeComponent('AMapPolygon', Polygon)
+const AMapPolygon = requireNativeComponent('AMapPolygon', Polygon)

components/Polyline.js

-import React, {PropTypes, Component} from 'react'
+import React, {PropTypes, PureComponent} from 'react'
 import {
   processColor,
   requireNativeComponent,
@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import {LatLng} from './PropTypes'
 
-export default class Polyline extends Component {
+export default class Polyline extends PureComponent {
   static propTypes = {
     ...ViewPropTypes,
 

example/src/examples/circle.js

 import React, {Component} from 'react'
-import {StyleSheet} from 'react-native'
+import {StyleSheet, View} from 'react-native'
 import {MapView, Circle} from 'react-native-amap3d'
 
 export default class CircleExample extends Component {
@@ -7,6 +7,11 @@ export default class CircleExample extends Component {
     title: '绘制圆形',
   }
 
+  coordinate = {
+    latitude: 39.906901,
+    longitude: 116.397972,
+  }
+
   render() {
     return <MapView style={StyleSheet.absoluteFill}>
       <Circle
@@ -14,10 +19,7 @@ export default class CircleExample extends Component {
         strokeColor='rgba(0, 0, 255, 0.5)'
         fillColor='rgba(255, 0, 0, 0.5)'
         radius={10000}
-        coordinate={{
-          latitude: 39.906901,
-          longitude: 116.397972,
-        }}/>
+        coordinate={this.coordinate}/>
     </MapView>
   }
 }

example/src/examples/marker.js

@@ -77,7 +77,7 @@ export default class MarkerExample extends Component {
       <Marker
         icon={this._renderImageMarker}
         title='自定义图片'
-        description="Note the use of nativeOnly above. Sometimes you'll have some special properties that you need to expose for the native component, but don't actually want them as part of the API for the associated React component."
+        description="Sometimes you'll have some special properties that you need to expose for the native component, but don't actually want them as part of the API for the associated React component."
         coordinate={{
           latitude: 39.906901,
           longitude: 116.397972,

example/src/examples/polygon.js

@@ -7,13 +7,7 @@ export default class PolygonExample extends Component {
     title: '绘制多边形',
   }
 
-  render() {
-    return <MapView style={StyleSheet.absoluteFill}>
-      <Polygon
-        strokeWidth={5}
-        strokeColor='rgba(0, 0, 255, 0.5)'
-        fillColor='rgba(255, 0, 0, 0.5)'
-        coordinates={[
+  _coordinates = [
     {
       latitude: 39.806901,
       longitude: 116.397972,
@@ -26,7 +20,15 @@ export default class PolygonExample extends Component {
       latitude: 39.906901,
       longitude: 116.397972,
     },
-        ]}/>
+  ]
+
+  render() {
+    return <MapView style={StyleSheet.absoluteFill}>
+      <Polygon
+        strokeWidth={5}
+        strokeColor='rgba(0, 0, 255, 0.5)'
+        fillColor='rgba(255, 0, 0, 0.5)'
+        coordinates={this._coordinates}/>
     </MapView>
   }
 }

example/src/examples/polyline.js

@@ -7,12 +7,7 @@ export default class PolylineExample extends Component {
     title: '绘制折线',
   }
 
-  render() {
-    return <MapView style={StyleSheet.absoluteFill}>
-      <Polyline
-        width={5}
-        color='rgba(255, 0, 0, 0.5)'
-        coordinates={[
+  _line1 = [
     {
       latitude: 40.006901,
       longitude: 116.097972,
@@ -21,11 +16,9 @@ export default class PolylineExample extends Component {
       latitude: 40.006901,
       longitude: 116.597972,
     },
-        ]}/>
-      <Polyline
-        dashed
-        width={5}
-        coordinates={[
+  ]
+
+  _line2 = [
     {
       latitude: 39.906901,
       longitude: 116.097972,
@@ -34,13 +27,9 @@ export default class PolylineExample extends Component {
       latitude: 39.906901,
       longitude: 116.597972,
     },
-        ]}/>
-      <Polyline
-        gradient
-        width={5}
-        colors={['#f44336', '#2196f3', '#4caf50']}
-        onPress={() => Alert.alert('onPress')}
-        coordinates={[
+  ]
+
+  _line3 = [
     {
       latitude: 39.806901,
       longitude: 116.097972,
@@ -57,7 +46,26 @@ export default class PolylineExample extends Component {
       latitude: 39.806901,
       longitude: 116.597972,
     },
-        ]}/>
+  ]
+
+  _onPress = () => Alert.alert('onPress')
+
+  render() {
+    return <MapView style={StyleSheet.absoluteFill}>
+      <Polyline
+        width={5}
+        color='rgba(255, 0, 0, 0.5)'
+        coordinates={this._line1}/>
+      <Polyline
+        dashed
+        width={5}
+        coordinates={this._line2}/>
+      <Polyline
+        gradient
+        width={5}
+        colors={['#f44336', '#2196f3', '#4caf50']}
+        onPress={this._onPress}
+        coordinates={this._line3}/>
     </MapView>
   }
 }