feat(marker): 代码优化

src/hooks/usePropsReactive.ts

@@ -14,7 +14,19 @@ export function usePropsReactive<
 >(props: P, ins: Ins, { setterMap = {}, converterMap = {} }: Options = {}) {
   const prevProps = usePrevious(props) as P;
 
-  const onInstanceCreated = (instance: Ins) => {
+  useDeepCompareEffect(() => {
+    if (ins) {
+      reactivePropChange(props, true);
+    }
+  }, [props]);
+
+  useUnmount(() => {
+    if (ins && 'remove' in ins) {
+      ins.remove();
+    }
+  });
+
+  const onInstanceCreated = () => {
     reactivePropChange(props, false);
   };
 
@@ -29,7 +41,7 @@ export function usePropsReactive<
 
     try {
       Object.keys(nextProps).forEach((key) => {
-        /** 忽略事件绑定处理 */
+        /** 忽略事件 */
         if (isFunction(props[key]) && /^on[A-Z]/.test(key)) return;
 
         let willReactive = true;

src/marker/marker.tsx

@@ -2,29 +2,19 @@ import Mapbox from 'mapbox-gl';
 import { useGetState, usePortal } from '@pansy/react-hooks';
 import { forwardRef, useEffect, useImperativeHandle } from 'react';
 import { useMap } from '../hooks/useMap';
-import { useReact } from '../hooks/useReact';
+import { usePropsReactive } from '../hooks/usePropsReactive';
 import { useEvents } from '../hooks/useEvents';
 import { allProps, setterMap, converterMap } from './config';
 import { MarkerEventMap, MarkerEventList } from './constant';
 
-import type { MarkerProps, EventMapping, PropKey, MapboxMarker, MarkerOptions } from './types';
+import type { MarkerProps, PropKey, MapboxMarker, MarkerOptions } from './types';
 
 export const Marker = forwardRef<MapboxMarker, MarkerProps>((props, ref) => {
   const { map } = useMap();
   const { Portal, container } = usePortal();
   const [marker, setMarker, getMarker] = useGetState<MapboxMarker>();
 
-  // const { onInstanceCreated } = usePropsReactive(
-  //   props,
-  //   marker!,
-  //   {
-  //     setterMap,
-  //     converterMap
-  //   }
-  // );
-
-  const { onInstanceCreated } = useReact<MarkerProps, MapboxMarker, EventMapping>(props, {
-    ins: marker,
+  const { onInstanceCreated } = usePropsReactive(props, marker!, {
     setterMap,
     converterMap,
   });

src/marker/types.ts

@@ -24,7 +24,7 @@ export interface CustomizeEvents {
 export type EventMapping = { [T in keyof MarkerEvents]: string };
 
 export interface MarkerProps
-  extends MarkerOptions,
+  extends Omit<MarkerOptions, 'element' | 'className'>,
     Partial<MarkerEvents>,
     Partial<CustomizeEvents> {
   className?: string;