新增 addEventListener 方式兜底组件代码可能出现的遗漏清除回调或不及时导致组件卸载后回调仍然触发的问题

packages/semi-ui/_base/baseComponent.tsx

@@ -8,6 +8,7 @@ import { DefaultAdapter } from '@douyinfe/semi-foundation/base/foundation';
 import { VALIDATE_STATUS } from '@douyinfe/semi-foundation/base/constants';
 import getDataAttr from '@douyinfe/semi-foundation/utils/getDataAttr';
 import { ArrayElement } from './base';
+import { without } from "lodash";
 
 const { hasOwnProperty } = Object.prototype;
 
@@ -19,14 +20,71 @@ export interface BaseProps {
     children?: ReactNode | undefined | any
 }
 
+
+export enum SemiUsedEvent {
+    Click = "click",
+    MouseDown = "mousedown",
+    MouseUp = "mouseup",
+    Scroll = "scroll",
+    TouchEnd = "touchend",
+    Resize = "resize",
+    KeyDown = "keydown",
+    TouchMove = "touchmove"
+}
+
+type SemiEventTarget = typeof window | typeof document;
+
+type Callback = (e: Event) => void
+
+let isInited = false;
+
 // eslint-disable-next-line
 export default class BaseComponent<P extends BaseProps = {}, S = {}> extends Component<P, S> {
     static propTypes = {};
-
     static defaultProps = {};
+    static windowEventWeakMap: Record<string, WeakRef<Callback>[]> = {}
+    static documentEventWeakMap: Record<string, WeakRef<Callback & {_function?: Callback}>[]> = {}
+    static finalizationRegistry: FinalizationRegistry<{
+        target: SemiEventTarget;
+        weakRef: WeakRef<Callback & {_function?: Callback}>;
+        eventName: SemiUsedEvent
+    }>
+    static initEventListener = () => {
+        if (!isInited) {
+            Object.values(SemiUsedEvent).forEach((eventName) => {
+                [[BaseComponent.windowEventWeakMap, window], [BaseComponent.documentEventWeakMap, document]].forEach(([eventWeakMap, target])=>{
+                    eventWeakMap[eventName] = [];
+                    (target as SemiEventTarget).addEventListener(eventName, (e) => {
+                        eventWeakMap[eventName]?.forEach((ref: WeakRef<Callback & {_function?: Callback}>) => {
+                            const cb = ref.deref();
+                            cb?._function(e);
+                        });
+                    });
+                });
+            });
+            BaseComponent.finalizationRegistry = new FinalizationRegistry(BaseComponent.onEventCallbackGC);
+            isInited = true;
+        }
+
+    }
+
+    static onEventCallbackGC = ({ target, weakRef, eventName }: {
+        target: SemiEventTarget;
+        weakRef: WeakRef<Callback & {_function?: Callback}>;
+        eventName: SemiUsedEvent
+    }) => {
+        let eventWeakMap: Record<string, WeakRef<Callback>[]>;
+        if (target === window) {
+            eventWeakMap = BaseComponent.windowEventWeakMap;
+        } else if (target === document) {
+            eventWeakMap = BaseComponent.documentEventWeakMap;
+        }
+        eventWeakMap[eventName] = without(eventWeakMap[eventName] ?? [], weakRef);
+    }
 
     cache: any;
     foundation: any;
+    componentIsMounted = true;
 
     constructor(props: P) {
         super(props);
@@ -39,6 +97,7 @@ export default class BaseComponent<P extends BaseProps = {}, S = {}> extends Com
     }
 
     componentWillUnmount(): void {
+        this.componentIsMounted = false;
         this.foundation && typeof this.foundation.destroy === 'function' && this.foundation.destroy();
         this.cache = {};
     }
@@ -56,7 +115,7 @@ export default class BaseComponent<P extends BaseProps = {}, S = {}> extends Com
             getProps: () => this.props, // eslint-disable-line
             getState: key => this.state[key], // eslint-disable-line
             getStates: () => this.state, // eslint-disable-line
-            setState: (states, cb) => this.setState({ ...states } as S, cb), // eslint-disable-line
+            setState: (states, cb) => this.setState({...states} as S, cb), // eslint-disable-line
             getCache: key => key && this.cache[key], // eslint-disable-line
             getCaches: () => this.cache, // eslint-disable-line
             setCache: (key, value) => key && (this.cache[key] = value), // eslint-disable-line
@@ -84,4 +143,27 @@ export default class BaseComponent<P extends BaseProps = {}, S = {}> extends Com
     getDataAttr(props?: any) {
         return getDataAttr(props);
     }
+
+    hookedAddEventListener = (target: SemiEventTarget, eventName: SemiUsedEvent, callback: (Callback) & {_function?: Callback}) => {
+        BaseComponent.initEventListener();
+        let eventWeakMap: Record<string, WeakRef<(e: Event) => void>[]>;
+        if (target === window) {
+            eventWeakMap = BaseComponent.windowEventWeakMap;
+        } else if (target === document) {
+            eventWeakMap = BaseComponent.documentEventWeakMap;
+        }
+        callback._function = (e)=>{
+            if (this.componentIsMounted) {
+                callback(e);
+            }
+        };
+        const weakRef = new WeakRef(callback);
+        eventWeakMap[eventName]?.push(weakRef);
+        BaseComponent.finalizationRegistry.register(this, {
+            target,
+            weakRef,
+            eventName
+        });
+    }
+
 }

packages/semi-ui/_utils/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { cloneDeepWith, set, get } from 'lodash';
+import {cloneDeepWith, set, get} from 'lodash';
 import warning from '@douyinfe/semi-foundation/utils/warning';
-import { findAll } from '@douyinfe/semi-foundation/utils/getHighlight';
-import { isHTMLElement } from '@douyinfe/semi-foundation/utils/dom';
+import {findAll} from '@douyinfe/semi-foundation/utils/getHighlight';
+import {isHTMLElement} from '@douyinfe/semi-foundation/utils/dom';
 import semiGlobal from "./semi-global";
+
 /**
  * stop propagation
  *
@@ -22,7 +23,7 @@ export function stopPropagation(e: React.MouseEvent | React.FocusEvent<HTMLEleme
 
 /**
  * use in Table, Form, Navigation
- * 
+ *
  * skip clone function and react element
  */
 export function cloneDeep<T>(value: T): T;
@@ -81,16 +82,16 @@ export function cloneDeep(value: any, customizer?: (value: any) => any) {
  * @return  {Array<object>}
  */
 export const getHighLightTextHTML = ({
-    sourceString = '',
-    searchWords = [],
-    option = { autoEscape: true, caseSensitive: false }
-}: GetHighLightTextHTMLProps) => {
-    const chunks: HighLightTextHTMLChunk[] = findAll({ sourceString, searchWords, ...option });
+                                         sourceString = '',
+                                         searchWords = [],
+                                         option = {autoEscape: true, caseSensitive: false}
+                                     }: GetHighLightTextHTMLProps) => {
+    const chunks: HighLightTextHTMLChunk[] = findAll({sourceString, searchWords, ...option});
     const markEle = option.highlightTag || 'mark';
     const highlightClassName = option.highlightClassName || '';
     const highlightStyle = option.highlightStyle || {};
     return chunks.map((chunk: HighLightTextHTMLChunk, index: number) => {
-        const { end, start, highlight } = chunk;
+        const {end, start, highlight} = chunk;
         const text = sourceString.substr(start, end - start);
         if (highlight) {
             return React.createElement(
@@ -120,16 +121,22 @@ export interface RegisterMediaQueryOption {
  * @param {object} param param object
  * @returns function
  */
-export const registerMediaQuery = (media: string, { match, unmatch, callInInit = true }: RegisterMediaQueryOption): () => void => {
+export const registerMediaQuery = (media: string, {
+    match,
+    unmatch,
+    callInInit = true
+}: RegisterMediaQueryOption): () => void => {
     if (typeof window !== 'undefined') {
         const mediaQueryList = window.matchMedia(media);
+
         function handlerMediaChange(e: MediaQueryList | MediaQueryListEvent): void {
             if (e.matches) {
                 match && match(e);
             } else {
                 unmatch && unmatch(e);
             }
         }
+
         callInInit && handlerMediaChange(mediaQueryList);
         if (Object.prototype.hasOwnProperty.call(mediaQueryList, 'addEventListener')) {
             mediaQueryList.addEventListener('change', handlerMediaChange);
@@ -140,6 +147,7 @@ export const registerMediaQuery = (media: string, { match, unmatch, callInInit =
     }
     return () => undefined;
 };
+
 export interface GetHighLightTextHTMLProps {
     sourceString?: string;
     searchWords?: string[];
@@ -206,7 +214,7 @@ export function getScrollbarWidth() {
 }
 
 export function getDefaultPropsFromGlobalConfig(componentName: string, semiDefaultProps: any = {}) {
-    const getFromGlobalConfig = ()=> semiGlobal?.config?.overrideDefaultProps?.[componentName] || {};
+    const getFromGlobalConfig = () => semiGlobal?.config?.overrideDefaultProps?.[componentName] || {};
     return new Proxy({
         ...semiDefaultProps,
     }, {

packages/semi-ui/anchor/index.tsx

@@ -262,6 +262,7 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
     }
 
     componentWillUnmount() {
+        super.componentWillUnmount();
         this.scrollContainer.removeEventListener('scroll', this.handler);
         this.scrollContainer.removeEventListener('scroll', this.clickHandler);
     }

packages/semi-ui/anchor/link.tsx

@@ -89,6 +89,7 @@ export default class Link extends BaseComponent<LinkProps, {}> {
     }
 
     componentWillUnmount() {
+        super.componentWillUnmount();
         this.handleRemoveLink();
     }
 

packages/semi-ui/autoComplete/index.tsx

@@ -329,9 +329,7 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
         this.foundation.init();
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     componentDidUpdate(prevProps: AutoCompleteProps<T>, prevState: AutoCompleteState) {
         if (!isEqual(this.props.data, prevProps.data)) {

packages/semi-ui/avatar/index.tsx

@@ -159,9 +159,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         }
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     onEnter(e: React.MouseEvent) {
         this.foundation.handleEnter(e);

packages/semi-ui/backtop/index.tsx

@@ -60,9 +60,7 @@ export default class BackTop extends BaseComponent<BackTopProps, BackTopState> {
         this.foundation.init();
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     get adapter(): BackTopAdapter {
         return {

packages/semi-ui/banner/index.tsx

@@ -89,9 +89,7 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
         this.foundation.init();
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     remove: React.MouseEventHandler = e => {
         e && e.stopPropagation();

packages/semi-ui/breadcrumb/index.tsx

@@ -121,9 +121,7 @@ class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
         this.foundation.init();
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     renderPopoverMore(restItem: Array<React.ReactNode>) {
         const { separator } = this.props;

packages/semi-ui/breadcrumb/item.tsx

@@ -79,9 +79,7 @@ export default class BreadcrumbItem extends BaseComponent<BreadcrumbItemProps, B
         this.foundation.init();
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     renderIcon = () => {
         const iconType = this.props.icon;

packages/semi-ui/calendar/dayCalendar.tsx

@@ -104,9 +104,7 @@ export default class DayCalendar extends BaseComponent<DayCalendarProps, DayCale
         }
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     checkWeekend = (val: Date) => this.foundation.checkWeekend(val);
 

packages/semi-ui/calendar/dayCol.tsx

@@ -61,9 +61,7 @@ export default class DayCol extends BaseComponent<DayColProps, DayColState> {
         this.foundation.initCurrTime();
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     get adapter(): CalendarAdapter<DayColProps, DayColState> {
         return {

packages/semi-ui/calendar/monthCalendar.tsx

@@ -140,9 +140,7 @@ export default class monthCalendar extends BaseComponent<MonthCalendarProps, Mon
         this.foundation.parseMonthlyEvents(itemLimit);
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     componentDidUpdate(prevProps: MonthCalendarProps, prevState: MonthCalendarState) {
         const prevEventKeys = prevState.cachedKeys;

packages/semi-ui/calendar/rangeCalendar.tsx

@@ -116,9 +116,7 @@ export default class RangeCalendar extends BaseComponent<RangeCalendarProps, Ran
         }
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     handleClick = (e: React.MouseEvent, val: [Date, number, number, number]) => {
         const { onClick } = this.props;

packages/semi-ui/calendar/weekCalendar.tsx

@@ -115,9 +115,7 @@ export default class WeekCalendar extends BaseComponent<WeekCalendarProps, WeekC
         }
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
 
     checkWeekend = (val: Date) => this.foundation.checkWeekend(val);

packages/semi-ui/carousel/index.tsx

@@ -122,9 +122,7 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
         }
     }
 
-    componentWillUnmount(): void {
-        this.foundation.destroy();
-    }
+
 
     play = (): void => {
         this.foundation.setForcePlay(true);
@@ -305,4 +303,4 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
     }
 }
 
-export default Carousel;
+export default Carousel;

packages/semi-ui/cascader/index.tsx

@@ -499,9 +499,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         this.foundation.init();
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     componentDidUpdate(prevProps: CascaderProps) {
         let isOptionsChanged = false;

packages/semi-ui/checkbox/checkboxGroup.tsx

@@ -98,9 +98,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
         }
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     onChange(evt: CheckboxEvent) {
         this.foundation.handleChange(evt);