From 98dcbab772213e23e87c0541bdac508efca6afcd Mon Sep 17 00:00:00 2001 From: yanxiong Date: Tue, 26 Sep 2023 20:56:50 +0800 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=9B=BE=E5=B1=82?= =?UTF-8?q?=20dataUpdate=20=E4=BA=8B=E4=BB=B6=E4=B8=8D=E8=A7=A6=E5=8F=91?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Layers/hooks/use-layer-event/index.ts | 62 +++++++++++-------- 1 file changed, 36 insertions(+), 26 deletions(-) diff --git a/src/components/Layers/hooks/use-layer-event/index.ts b/src/components/Layers/hooks/use-layer-event/index.ts index efc25184..1d966adf 100644 --- a/src/components/Layers/hooks/use-layer-event/index.ts +++ b/src/components/Layers/hooks/use-layer-event/index.ts @@ -1,6 +1,6 @@ -import { useTrackedEffect, useUnmount } from 'ahooks'; -import { useMemo } from 'react'; -import type { Layer, LayerEventCallback, LayerEventProps } from '../../../../types'; +import { useUnmount } from 'ahooks'; +import { useEffect, useMemo, useRef } from 'react'; +import type { Layer, LayerEventProps } from '../../../../types'; import { LayerEventMap } from './constant'; export const useLayerEvent = ( @@ -11,31 +11,41 @@ export const useLayerEvent = ( // LarkMap 事件名列表 const layerEventList = useMemo(() => Object.keys(layerEventMap), [layerEventMap]); - useTrackedEffect( - (changeIndexList: number[], previousDeps: LayerEventCallback[] = [], currentDeps: LayerEventCallback[] = []) => { - changeIndexList.forEach((index) => { - const eventName = layerEventMap[layerEventList[index]] as string; - const previousCallback = previousDeps[index]; - const currentCallback = currentDeps[index]; - // 分别注销旧的事件回调并绑定新的事件 - if (previousCallback) { - layer.off(eventName, previousCallback); - } - if (currentCallback) { - layer.on(eventName, currentCallback); - } - }); - }, - layerEventList.map((eventName) => props[eventName]), - ); + const operateLayerEvents = (on: boolean) => { + layerEventList.forEach((callbackName) => { + const eventName = layerEventMap[callbackName]; + const callback = props[callbackName]; - useUnmount(() => { - layerEventList.forEach((key) => { - const eventName = layerEventMap[key]; - const callback = props[key]; - if (eventName && callback) { - layer.off(eventName, callback); + if (callbackName && callback) { + console.log(on ? 'on' : 'off', eventName, callback); + layer[on ? 'on' : 'off'](eventName, callback); } }); + }; + + const bindLayerEvents = () => operateLayerEvents(true); + + const unbindLayerEvents = () => operateLayerEvents(false); + + const isFirstRef = useRef(true); + + if (isFirstRef.current) { + bindLayerEvents(); + } + + useEffect(() => { + if (isFirstRef.current) { + isFirstRef.current = false; + } else { + bindLayerEvents(); + } + return () => { + unbindLayerEvents(); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [layerEventList.map((eventName) => props[eventName])]); + + useUnmount(() => { + unbindLayerEvents(); }); }; From a9dc571936db544fec48a48953f29726759e3202 Mon Sep 17 00:00:00 2001 From: yanxiong Date: Wed, 27 Sep 2023 09:40:51 +0800 Subject: [PATCH 2/5] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=20useLayerEv?= =?UTF-8?q?ent=20=E4=BB=A3=E7=A0=81=E5=8F=8A=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Layers/hooks/use-layer-event/index.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/Layers/hooks/use-layer-event/index.ts b/src/components/Layers/hooks/use-layer-event/index.ts index 1d966adf..18d66894 100644 --- a/src/components/Layers/hooks/use-layer-event/index.ts +++ b/src/components/Layers/hooks/use-layer-event/index.ts @@ -11,24 +11,25 @@ export const useLayerEvent = ( // LarkMap 事件名列表 const layerEventList = useMemo(() => Object.keys(layerEventMap), [layerEventMap]); - const operateLayerEvents = (on: boolean) => { + // 绑定或解绑所有事件的回调函数 + const handleLayerEvents = (type: 'on' | 'off') => { layerEventList.forEach((callbackName) => { const eventName = layerEventMap[callbackName]; const callback = props[callbackName]; if (callbackName && callback) { - console.log(on ? 'on' : 'off', eventName, callback); - layer[on ? 'on' : 'off'](eventName, callback); + layer[type](eventName, callback); } }); }; - const bindLayerEvents = () => operateLayerEvents(true); + const bindLayerEvents = () => handleLayerEvents('on'); - const unbindLayerEvents = () => operateLayerEvents(false); + const unbindLayerEvents = () => handleLayerEvents('off'); const isFirstRef = useRef(true); + // 保证图层初始化后同步执行事件绑定，而不是在 useEffect 中异步绑定事件 if (isFirstRef.current) { bindLayerEvents(); } From e3242e97bb8771078974d67a4d590b27cdd2f789 Mon Sep 17 00:00:00 2001 From: yanxiong Date: Wed, 27 Sep 2023 09:49:02 +0800 Subject: [PATCH 3/5] =?UTF-8?q?chore:=20=E5=8D=87=E7=BA=A7=E7=89=88?= =?UTF-8?q?=E6=9C=AC=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e37e3d87..a0007fb6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@antv/larkmap", - "version": "1.4.4", + "version": "1.4.5", "description": "A React toolkit for geospatial visualization based on L7", "license": "MIT", "main": "lib/index.js", From dfb9c2cd14bf302ab0c12075f755f9dca28e4635 Mon Sep 17 00:00:00 2001 From: heiyexing <496845051@qq.com> Date: Wed, 27 Sep 2023 10:17:16 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20useLayerEvent?= =?UTF-8?q?=20=E7=BB=91=E5=AE=9A=E8=A7=A3=E7=BB=91=E8=A7=A6=E5=8F=91?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Layers/hooks/use-layer-event/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Layers/hooks/use-layer-event/index.ts b/src/components/Layers/hooks/use-layer-event/index.ts index 18d66894..d2ca4310 100644 --- a/src/components/Layers/hooks/use-layer-event/index.ts +++ b/src/components/Layers/hooks/use-layer-event/index.ts @@ -44,7 +44,7 @@ export const useLayerEvent = ( unbindLayerEvents(); }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [layerEventList.map((eventName) => props[eventName])]); + }, layerEventList.map((eventName) => props[eventName])); useUnmount(() => { unbindLayerEvents(); From 37e9f5435da14793fd4084fb74f3ca5812d40094 Mon Sep 17 00:00:00 2001 From: heiyexing <496845051@qq.com> Date: Wed, 27 Sep 2023 10:46:01 +0800 Subject: [PATCH 5/5] =?UTF-8?q?chore:=20=E5=8D=87=E7=BA=A7=E7=89=88?= =?UTF-8?q?=E6=9C=AC=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/version.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/version.ts b/src/version.ts index 1808eb32..23427810 100644 --- a/src/version.ts +++ b/src/version.ts @@ -1 +1 @@ -export default '1.4.3'; +export default '1.4.5';