perf: useLayoutEffect 替换 useEffect，改变销毁顺序，加一些 ts定义 (#347)

packages/circle/src/useCircle.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useLayoutEffect } from 'react';
 import { useVisiable, useEventProperties, useSettingProperties } from '@uiw/react-amap-utils';
 import { useMapContext } from '@uiw/react-amap-map';
 import { CircleProps } from '.';
@@ -8,20 +8,16 @@ export const useCircle = (props = {} as UseCircle) => {
   const { visiable, ...other } = props;
   const { map } = useMapContext();
   const [circle, setCircle] = useState<AMap.Circle>();
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (AMap && map && !circle) {
-      let instance: AMap.Circle = new AMap.Circle({ ...other });
+      const instance: AMap.Circle = new AMap.Circle({ ...other });
       map.add(instance);
       setCircle(instance);
+      return () => {
+        map && map.remove(instance);
+        setCircle(undefined);
+      };
     }
-    return () => {
-      setCircle((circle) => {
-        if (circle) {
-          map && map.remove(circle)
-        }
-        return undefined
-      })
-    };
   }, [map]);
 
   useVisiable(circle!, visiable);

packages/ellipse/src/useEllipse.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useLayoutEffect } from 'react';
 import { useVisiable, useEventProperties, useSettingProperties } from '@uiw/react-amap-utils';
 import { useMapContext } from '@uiw/react-amap-map';
 import { EllipseProps } from './';
@@ -8,7 +8,7 @@ export const useEllipse = (props = {} as UseEllipse) => {
   const { visiable, ...other } = props;
   const { map } = useMapContext();
   const [ellipse, setEllipse] = useState<AMap.Ellipse>();
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!AMap || !map) return;
     if (!ellipse) {
       let instance: AMap.Ellipse = new AMap.Ellipse({ ...other });

packages/info-window/src/useInfoWindow.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect } from 'react';
+import { useState, useMemo, useEffect, useLayoutEffect } from 'react';
 import { useEventProperties, useSettingProperties, usePortal } from '@uiw/react-amap-utils';
 import { useMapContext } from '@uiw/react-amap-map';
 import { InfoWindowProps } from '.';
@@ -11,7 +11,7 @@ export const useInfoWindow = (props = {} as UseInfoWindow) => {
   const [infoWindow, setInfoWindow] = useState<AMap.InfoWindow>();
   const { container, Portal } = usePortal();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!AMap || !map) return;
     if (!infoWindow) {
       const positionCenter = map.getCenter();
@@ -23,14 +23,14 @@ export const useInfoWindow = (props = {} as UseInfoWindow) => {
       if (isOpen) {
         instance.open(map, position || positionCenter);
       }
+      return () => {
+        if (instance) {
+          map && map.remove(instance);
+          setInfoWindow(undefined);
+        }
+      };
     }
-    return () => {
-      if (infoWindow) {
-        map && map.remove(infoWindow);
-        setInfoWindow(undefined);
-      }
-    };
-  }, [map, infoWindow]);
+  }, [map]);
 
   useEffect(() => {
     if (infoWindow) {

packages/label-marker/src/useLabelMarker.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useLayoutEffect } from 'react';
 import { useVisiable, useEventProperties, useSettingProperties } from '@uiw/react-amap-utils';
 import { useMapContext } from '@uiw/react-amap-map';
 import { LabelMarkerProps } from './';
@@ -20,7 +20,7 @@ export const useLabelMarker = (props: UseLabelMarker = {}) => {
   const [labelMarker, setLabelMarker] = useState<AMap.LabelMarker>();
   // const { container, Portal } = usePortal();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!labelMarker && map) {
       let initText = text;
       if (!text) {

packages/marker/src/useMarker.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useLayoutEffect } from 'react';
 import { useVisiable, useEventProperties, useSettingProperties, usePortal } from '@uiw/react-amap-utils';
 import { useMapContext } from '@uiw/react-amap-map';
 import { MarkerProps } from './';
@@ -10,24 +10,24 @@ export const useMarker = (props: UseMarker = {}) => {
   const [marker, setMarker] = useState<AMap.Marker>();
   const { container, Portal } = usePortal();
 
-  useEffect(() => {
-    if (!marker && map) {
+  useLayoutEffect(() => {
+    if (map && !marker) {
       if (props.children) {
         other.content = container;
       }
       let instance: AMap.Marker = new AMap.Marker({ ...other });
       map.add(instance);
       setMarker(instance);
+      return () => {
+        if (instance) {
+          // @fix [244] https://github.com/uiwjs/react-amap/issues/244
+          // typeof marker.remove === 'function' && marker.remove();
+          instance.setMap(null);
+          setMarker(undefined);
+        }
+      };
     }
-    return () => {
-      if (marker) {
-        // @fix [244] https://github.com/uiwjs/react-amap/issues/244
-        // typeof marker.remove === 'function' && marker.remove();
-        marker.setMap(null);
-        setMarker(undefined);
-      }
-    };
-  }, [map, marker]);
+  }, [map]);
 
   useVisiable(marker!, visiable);
   useSettingProperties<AMap.Marker, UseMarker>(marker!, props, [

packages/mass-marks/src/useMassMarks.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useLayoutEffect } from 'react';
 import { useVisiable, useEventProperties, useSettingProperties } from '@uiw/react-amap-utils';
 import { useMapContext } from '@uiw/react-amap-map';
 import { MassMarksProps } from './';
@@ -10,7 +10,7 @@ export const useMassMarks = (props = {} as UseMassMarks) => {
   const { opacity = 1, zIndex = 1111, style, data } = other || {};
   const [massMarks, setMassMarks] = useState<AMap.MassMarks>();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!AMap || !map) return;
     if (!massMarks) {
       let initStyle = style;

packages/polygon/src/usePolygon.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useLayoutEffect } from 'react';
 import { useVisiable, useEventProperties, useSettingProperties } from '@uiw/react-amap-utils';
 import { useMapContext } from '@uiw/react-amap-map';
 import { PolygonProps } from '.';
@@ -8,7 +8,7 @@ export const usePolygon = (props = {} as UsePolygon) => {
   const { visiable, ...other } = props;
   const { map } = useMapContext();
   const [polygon, setPolygon] = useState<AMap.Polygon>();
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!AMap || !map) return;
     if (!polygon) {
       let instance: AMap.Polygon = new AMap.Polygon({ ...other });

packages/polyline/src/usePolyline.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import { useVisiable, useEventProperties, useSettingProperties } from '@uiw/react-amap-utils';
 import { useMapContext } from '@uiw/react-amap-map';
 import { PolylineProps } from '.';
@@ -9,27 +9,27 @@ export function usePolyline(props = {} as UsePolyline) {
   const [polyline, setPolyline] = useState<AMap.Polyline>();
   const { visiable, ...other } = props;
   const { map } = useMapContext();
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (map && !polyline) {
       const instance: AMap.Polyline = new AMap.Polyline(other);
       map.add(instance);
       setPolyline(instance);
+      return () => {
+        if (instance) {
+          try {
+            map && map.remove(instance);
+          } catch (e) {}
+          // if (AMap.v) {
+          //   map && map.remove(polyline);
+          // } else {
+          //   // 暂不使用这个 API，这个不兼容 v1.4.xx，改用 map.remove API
+          //   map && map.removeLayer(polyline);
+          // }
+          setPolyline(undefined);
+        }
+      };
     }
-    return () => {
-      if (polyline) {
-        try {
-          map && map.remove(polyline);
-        } catch (e) {}
-        // if (AMap.v) {
-        //   map && map.remove(polyline);
-        // } else {
-        //   // 暂不使用这个 API，这个不兼容 v1.4.xx，改用 map.remove API
-        //   map && map.removeLayer(polyline);
-        // }
-        setPolyline(undefined);
-      }
-    };
-  }, [map, polyline]);
+  }, [map]);
 
   useEffect(() => {
     if (polyline) {

packages/rectangle/src/useRectangle.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useLayoutEffect } from 'react';
 import { useVisiable, useEventProperties, useSettingProperties } from '@uiw/react-amap-utils';
 import { useMapContext } from '@uiw/react-amap-map';
 import { RectangleProps } from '.';
@@ -8,7 +8,7 @@ export const useRectangle = (props = {} as UseRectangle) => {
   const { visiable, ...other } = props;
   const { map } = useMapContext();
   const [rectangle, setRectangle] = useState<AMap.Rectangle>();
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!AMap || !map) return;
     if (!rectangle) {
       let instance: AMap.Rectangle = new AMap.Rectangle({ ...other });

packages/text/src/useText.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useLayoutEffect } from 'react';
 import { useVisiable, useEventProperties, useSettingProperties, usePortal } from '@uiw/react-amap-utils';
 import { useMapContext } from '@uiw/react-amap-map';
 import { TextProps } from './';
@@ -9,7 +9,7 @@ export const useText = (props = {} as UseText) => {
   const [text, setText] = useState<AMap.Text>();
   const { map } = useMapContext();
   const { container, Portal } = usePortal();
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!AMap || !map) return;
     if (!text) {
       if (props.children) {

packages/types/src/maplayer.d.ts

@@ -238,7 +238,7 @@ declare namespace AMap {
     /** 获取热力图的属性信息 */
     getOptions(): HeatMapOptions;
     /** 设置热力图要叠加的地图实例，也可以在Map中的layers属性中设置为默认显示的图层 */
-    setMap(map: Map): void;
+    setMap(map: Map | null): void;
     /** 设置热力图层叠加层级 */
     setzIndex(zIndex: number): void;
     /** 获得热力图层叠加层级 */

packages/types/src/overlay.d.ts

@@ -851,7 +851,7 @@ declare namespace AMap {
     /** 获取多边形的面积（单位：平方米）（自v1.1 新增） */
     getArea(): number;
     /** 在指定地图上显示当前的多边形。参数取值为null时，在地图上移除当前多边形（自v1.2 新增） */
-    setMap(map: Map): void;
+    setMap(map: Map | null): void;
     /** 设置用户自定义属性，支持JavaScript API任意数据类型，如Polygon的id等 */
     setExtData(ext: any): void;
     /** 获取用户自定义属性 */
@@ -1103,7 +1103,7 @@ declare namespace AMap {
     getTop(): boolean;
     getzIndex(): number | undefined;;
     getMap(): Map | undefined;
-    setMap(map: Map): void;
+    setMap(map: Map | null): void;
     addTo(map: Map): void;
     add(map: Map): void;
     getPosition(): Vector | LngLat;
@@ -1235,7 +1235,7 @@ declare namespace AMap {
     getMaxZoom(): number;
     setAverageCenter(averageCenter: boolean): void;
     isAverageCenter(): boolean;
-    setMap(Map: Map): void;
+    setMap(Map: Map | null): void;
     getMap(): Map;
     getStyles(): any[];
     setStyles(Map: Map): void;
@@ -1287,7 +1287,7 @@ declare namespace AMap {
   class MassMarks extends MapEventListener<'touchstart' | 'touchend' | 'mousemove' | 'dbclick' | 'click' | 'complete' | 'mouseover' | 'mousedown' | 'mouseup' | 'mouseout'> {
     /** 官方文档示例，https://a.amap.com/jsapi/static/doc/index.html#massmarks **/
     constructor(data: MassMarkersDataOptions, opts?: Array<MassMarkersOptions> | MassMarkersOptions)
-    setMap(map: Map): void;
+    setMap(map: Map | null): void;
     getMap(): Map;
     getData(): MassMarkersDataOptions;
     setData(data: MassMarkersDataOptions): void;