refine structure

src/App.js

@@ -2,13 +2,13 @@ import React, { Component } from 'react';
 import cx from 'classnames';
 import './App.css';
 
-import loadJs from './loadScript';
-import { loadMap } from './api';
-import Map from './Map';
-import Marker from './Marker';
-import MassMarks from './MassMarks';
-import Polygon from './Polygon';
-import Polyline from './Polyline';
+import loadJs from './lib/loadScript';
+import { loadMap } from './lib/api';
+import Map from './lib/Map';
+import Marker from './lib/Marker';
+import MassMarks from './lib/MassMarks';
+import Polygon from './lib/Polygon';
+import Polyline from './lib/Polyline';
 
 class MarkerTest extends Component {
   constructor() {
@@ -125,17 +125,23 @@ class MarkerTest extends Component {
           >
           </Marker>
           }
+          {this.state.showMarker &&
           <Marker
             AMap={this.state.AMap}
             options={{
               icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
-              position: [116.406467, 39.908761],
-              content:'<div class="marker-route marker-marker-bus-from"></div>'
+              position: [116.385428, 39.92723],
+              content:'<div class="marker-route marker-marker-bus-from"></div>',
+              label: {
+                offset: this.state.AMap && new this.state.AMap.Pixel(-30, -30),
+                content: "我是marker的label标签"
+              }
             }}
             events={{
               click:this._logging
             }}
           />
+          }
           <Marker
             AMap={this.state.AMap}
             refer={(entity) => this.setState({carEntity: entity})}

src/Map.js → src/lib/Map.js

@@ -9,7 +9,7 @@ const debug = () => {};
 export class Map extends Component {
   static propTypes = {
     AMap: PropTypes.object,
-    refMap: PropTypes.func, // 类似ref的函数形式,可以让父组件调用_entity
+    refer: PropTypes.func, // 类似ref的函数形式,可以让父组件调用_entity
     options: PropTypes.object,
     events: PropTypes.object
     //   zoom: PropTypes.number, // 10, //设置地图显示的缩放级别
@@ -33,10 +33,10 @@ export class Map extends Component {
 
   componentDidMount() {
     debug(__com__, 'componentDidMount', this.refElement, this._entity);
-    let { AMap, refMap, options, events } = this.props;
+    let { AMap, options, events } = this.props;
     this._entity = createMap(AMap, this.refElement, options, events);
     if (this._entity) {
-      if (refMap) refMap(this._entity);
+      if (this.props.refer) this.props.refer(this._entity);
       this.setState({ __map__: this._entity });
     }
   }
@@ -51,11 +51,11 @@ export class Map extends Component {
 
   componentDidUpdate(prevProps) {
     debug(__com__, 'componentDidUpdate', this.refElement, this._entity);
-    let { AMap, refMap, options, events } = this.props;
+    let { AMap, options, events } = this.props;
     if (!this._entity) {
       this._entity = createMap(AMap, this.refElement, options, events);
       if (this._entity) {
-        if (refMap) refMap(this._entity);
+        if (this.props.refer) this.props.refer(this._entity);
         this.setState({ __map__: this._entity });
       }
       return;
@@ -74,12 +74,12 @@ export class Map extends Component {
   componentWillUnmount() {
     debug(__com__, 'componentWillUnmount', this.refElement, this._entity);
     if (this._entity) {
-      let { refMap } = this.props;
+      let { refer } = this.props;
       //   this._entity.clearMap();
       this._entity.destroy();
       //   delete this._entity;
       this._entity = null;
-      if (refMap) refMap(this._entity);
+      if (this.props.refer) this.props.refer(this._entity);
     }
   }
 
@@ -104,9 +104,19 @@ export class Map extends Component {
       return child;
     });
   }
-
+  // shouldComponentUpdate(nextProps, nextState) {
+  //   debug(__com__, 'shouldComponentUpdate', this.refElement, this._entity);
+  //   let { AMap: oldAMap, refer: oldRefer, options: oldOptions, events: oldEvents } = this.props;
+  //   let { AMap: newAMap, refer: newRefer, options: newOptions, events: newEvents } = nextProps;
+  //   if (oldAMap === newAMap && oldRefer === newRefer && oldOptions === newOptions && oldEvents === newEvents) {
+  //     debug(__com__, 'shouldComponentUpdate', false);
+  //     return false;
+  //   }
+  //   debug(__com__, 'shouldComponentUpdate', true);
+  //   return true;
+  // }
   render() {
-    debug(__com__, 'component render', this.refElement, this._entity);
+    debug(__com__, 'component render', this._entity);
     let {
       AMap,
       options,

src/Marker.js → src/lib/Marker.js

@@ -1,7 +1,7 @@
 import React, { Component, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { createMarker, updateMarker } from './api';
-const __component__ = 'Marker';
+const __com__ = 'Marker';
 //const debug = console.log;
 const debug = () => {};
 
@@ -24,15 +24,15 @@ export class Marker extends Component {
     super();
     this.refElement = null;
     this._entity = null;
-    debug(__component__, 'constructor', this._entity);
+    debug(__com__, 'constructor', this._entity);
   }
 
   componentWillMount() {
-    debug(__component__, 'componentWillMount', this.props.children, this._entity);
+    debug(__com__, 'componentWillMount', this.props.children, this._entity);
   }
 
   componentDidMount() {
-    debug(__component__, 'componentDidMount', this.props.children, this._entity);
+    debug(__com__, 'componentDidMount', this.props.children, this._entity);
     let { AMap, __map__, options, events, children } = this.props;
     //let opts = { ...(options || {}), map: __map__, content: children };
     let opts = { ...(options || {}), map: __map__ };
@@ -43,15 +43,15 @@ export class Marker extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    debug(__component__, 'componentWillReceiveProps', this.props.children, this._entity);
+    debug(__com__, 'componentWillReceiveProps', this.props.children, this._entity);
   }
 
   componentWillUpdate() {
-    debug(__component__, 'componentWillUpdate', this.props.children, this._entity);
+    debug(__com__, 'componentWillUpdate', this.props.children, this._entity);
   }
 
   componentDidUpdate(prevProps) {
-    debug(__component__, 'componentDidUpdate', this.props.children, this._entity);
+    debug(__com__, 'componentDidUpdate', this.props.children, this._entity);
     let { AMap, __map__, options, events, children } = this.props;
     //let opts = { ...(options || {}), map: __map__, content: children };
     let opts = { ...(options || {}), map: __map__ };
@@ -73,18 +73,30 @@ export class Marker extends Component {
   }
 
   componentWillUnmount() {
-    debug(__component__, 'componentWillUnmount', this.props.children, this._entity);
+    debug(__com__, 'componentWillUnmount', this.props.children, this._entity);
     if (this._entity) {
       //   this._entity.clearMap();
       this._entity.setMap(null);
       delete this._entity;
       //   delete this._entity;
       this._entity = null;
+      if (this.props.refer) this.props.refer(this._entity);
     }
   }
 
+  // shouldComponentUpdate(nextProps, nextState) {
+  //   debug(__com__, 'shouldComponentUpdate', this._entity);
+  //   let { AMap: oldAMap, refer: oldRefer, options: oldOptions, events: oldEvents } = this.props;
+  //   let { AMap: newAMap, refer: newRefer, options: newOptions, events: newEvents } = nextProps;
+  //   if (oldAMap === newAMap && oldRefer === newRefer && oldOptions === newOptions && oldEvents === newEvents) {
+  //     debug(__com__, 'shouldComponentUpdate', false);
+  //     return false;
+  //   }
+  //   debug(__com__, 'shouldComponentUpdate', true);
+  //   return true;
+  // }
   render() {
-    debug(__component__, 'render', this.props.children, this._entity);
+    debug(__com__, 'render', this.props.children, this._entity);
     let {
       AMap,
       options,

src/MassMarks.js → src/lib/MassMarks.js

@@ -69,6 +69,10 @@ export class MassMarks extends Component {
     }
   }
 
+  // shouldComponentUpdate(nextProps, nextState) {
+  //   debug(__com__, 'shouldComponentUpdate', this._entity);
+  //   return false;
+  // }
   render() {
     debug(__com__, 'render', this.props.children, this._entity);
     let {

src/Polygon.js → src/lib/Polygon.js

@@ -69,6 +69,10 @@ export class Polygon extends Component {
     }
   }
 
+  // shouldComponentUpdate(nextProps, nextState) {
+  //   debug(__com__, 'shouldComponentUpdate', this._entity);
+  //   return false;
+  // }
   render() {
     debug(__com__, 'render', this._entity);
     let {

src/Polyline.js → src/lib/Polyline.js

@@ -69,6 +69,10 @@ export class Polyline extends Component {
     }
   }
 
+  // shouldComponentUpdate(nextProps, nextState) {
+  //   debug(__com__, 'shouldComponentUpdate', this._entity);
+  //   return false;
+  // }
   render() {
     debug(__com__, 'render', this.props.children, this._entity);
     let {