diff --git a/packages/semi-ui/_base/baseComponent.tsx b/packages/semi-ui/_base/baseComponent.tsx
index 2feeac6727..625ef26348 100644
--- a/packages/semi-ui/_base/baseComponent.tsx
+++ b/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
+        });
+    }
+
 }
diff --git a/packages/semi-ui/_utils/index.tsx b/packages/semi-ui/_utils/index.tsx
index c58761afd1..22b9c6bc7c 100644
--- a/packages/semi-ui/_utils/index.tsx
+++ b/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,9 +121,14 @@ 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);
@@ -130,6 +136,7 @@ export const registerMediaQuery = (media: string, { match, unmatch, callInInit =
                 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,
     }, {
diff --git a/packages/semi-ui/anchor/index.tsx b/packages/semi-ui/anchor/index.tsx
index 94aa8effc7..be03066c15 100644
--- a/packages/semi-ui/anchor/index.tsx
+++ b/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);
     }
diff --git a/packages/semi-ui/anchor/link.tsx b/packages/semi-ui/anchor/link.tsx
index 76280070e1..42fdcf8bfd 100644
--- a/packages/semi-ui/anchor/link.tsx
+++ b/packages/semi-ui/anchor/link.tsx
@@ -89,6 +89,7 @@ export default class Link extends BaseComponent<LinkProps, {}> {
     }
 
     componentWillUnmount() {
+        super.componentWillUnmount();
         this.handleRemoveLink();
     }
 
diff --git a/packages/semi-ui/autoComplete/index.tsx b/packages/semi-ui/autoComplete/index.tsx
index 3536e1aa91..47973e3dd4 100644
--- a/packages/semi-ui/autoComplete/index.tsx
+++ b/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)) {
diff --git a/packages/semi-ui/avatar/index.tsx b/packages/semi-ui/avatar/index.tsx
index d5c2eb75be..5692fb8a5d 100644
--- a/packages/semi-ui/avatar/index.tsx
+++ b/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);
diff --git a/packages/semi-ui/backtop/index.tsx b/packages/semi-ui/backtop/index.tsx
index 110ec98426..a16952d2ec 100644
--- a/packages/semi-ui/backtop/index.tsx
+++ b/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 {
diff --git a/packages/semi-ui/banner/index.tsx b/packages/semi-ui/banner/index.tsx
index be7e707a39..991a1a23c8 100644
--- a/packages/semi-ui/banner/index.tsx
+++ b/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();
diff --git a/packages/semi-ui/breadcrumb/index.tsx b/packages/semi-ui/breadcrumb/index.tsx
index fff17bbeac..dc3f478ff4 100644
--- a/packages/semi-ui/breadcrumb/index.tsx
+++ b/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;
diff --git a/packages/semi-ui/breadcrumb/item.tsx b/packages/semi-ui/breadcrumb/item.tsx
index fa05fdf58d..cd634913e8 100644
--- a/packages/semi-ui/breadcrumb/item.tsx
+++ b/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;
diff --git a/packages/semi-ui/calendar/dayCalendar.tsx b/packages/semi-ui/calendar/dayCalendar.tsx
index 4a44ffe1fd..e506e7ae93 100644
--- a/packages/semi-ui/calendar/dayCalendar.tsx
+++ b/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);
 
diff --git a/packages/semi-ui/calendar/dayCol.tsx b/packages/semi-ui/calendar/dayCol.tsx
index 9997cd94a2..357c3088f5 100644
--- a/packages/semi-ui/calendar/dayCol.tsx
+++ b/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 {
diff --git a/packages/semi-ui/calendar/monthCalendar.tsx b/packages/semi-ui/calendar/monthCalendar.tsx
index 5fd64aa079..ad71e44b32 100644
--- a/packages/semi-ui/calendar/monthCalendar.tsx
+++ b/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;
diff --git a/packages/semi-ui/calendar/rangeCalendar.tsx b/packages/semi-ui/calendar/rangeCalendar.tsx
index 9ab6da9c9b..6580a88147 100644
--- a/packages/semi-ui/calendar/rangeCalendar.tsx
+++ b/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;
diff --git a/packages/semi-ui/calendar/weekCalendar.tsx b/packages/semi-ui/calendar/weekCalendar.tsx
index 6f80352806..8ee0e77d99 100644
--- a/packages/semi-ui/calendar/weekCalendar.tsx
+++ b/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);
diff --git a/packages/semi-ui/carousel/index.tsx b/packages/semi-ui/carousel/index.tsx
index fc3ec33b66..fd85e13104 100644
--- a/packages/semi-ui/carousel/index.tsx
+++ b/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;
\ No newline at end of file
+export default Carousel;
diff --git a/packages/semi-ui/cascader/index.tsx b/packages/semi-ui/cascader/index.tsx
index 3ef609597e..804defad8d 100644
--- a/packages/semi-ui/cascader/index.tsx
+++ b/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;
diff --git a/packages/semi-ui/checkbox/checkboxGroup.tsx b/packages/semi-ui/checkbox/checkboxGroup.tsx
index e78ae6fa48..af3b9ba3d2 100644
--- a/packages/semi-ui/checkbox/checkboxGroup.tsx
+++ b/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);
diff --git a/packages/semi-ui/collapse/index.tsx b/packages/semi-ui/collapse/index.tsx
index 70e12f6747..9bc3d03f14 100644
--- a/packages/semi-ui/collapse/index.tsx
+++ b/packages/semi-ui/collapse/index.tsx
@@ -89,9 +89,7 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
         return state;
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     onChange = (activeKey: string, e: React.MouseEvent) => {
         this.foundation.handleChange(activeKey, e);
diff --git a/packages/semi-ui/datePicker/dateInput.tsx b/packages/semi-ui/datePicker/dateInput.tsx
index 6c83303f44..b1900dfe26 100644
--- a/packages/semi-ui/datePicker/dateInput.tsx
+++ b/packages/semi-ui/datePicker/dateInput.tsx
@@ -120,9 +120,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         this.foundation.init();
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     formatText(value: ValueType) {
         return value && (value as BaseValueType[]).length ? this.foundation.formatShowText(value as BaseValueType[]) : '';
diff --git a/packages/semi-ui/datePicker/month.tsx b/packages/semi-ui/datePicker/month.tsx
index a5fc1d30cd..4a4c39a3e4 100644
--- a/packages/semi-ui/datePicker/month.tsx
+++ b/packages/semi-ui/datePicker/month.tsx
@@ -88,9 +88,7 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
         this.foundation.init();
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     componentDidUpdate(prevProps: MonthProps, prevState: MonthState) {
         if (prevProps.month !== this.props.month) {
diff --git a/packages/semi-ui/empty/index.tsx b/packages/semi-ui/empty/index.tsx
index 2e207383ef..61e55eb1e4 100644
--- a/packages/semi-ui/empty/index.tsx
+++ b/packages/semi-ui/empty/index.tsx
@@ -57,6 +57,7 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
     }
 
     componentWillUnmount(): void {
+        super.componentWillUnmount();
         this.observer && this.observer.disconnect();
     }
 
diff --git a/packages/semi-ui/form/baseForm.tsx b/packages/semi-ui/form/baseForm.tsx
index ba6706036e..9008e5801a 100644
--- a/packages/semi-ui/form/baseForm.tsx
+++ b/packages/semi-ui/form/baseForm.tsx
@@ -153,9 +153,7 @@ class Form<Values extends Record<string, any> = any> extends BaseComponent<BaseF
         this.foundation.init();
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     get adapter(): BaseFormAdapter<BaseFormProps<Values>, BaseFormState, Values> {
         return {
diff --git a/packages/semi-ui/image/preview.tsx b/packages/semi-ui/image/preview.tsx
index a4055a7e72..3333ae443b 100644
--- a/packages/semi-ui/image/preview.tsx
+++ b/packages/semi-ui/image/preview.tsx
@@ -148,6 +148,7 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
             this.previewObserver.disconnect();
             this.previewObserver = null;
         }
+        super.componentWillUnmount();
     }
 
     handleVisibleChange = (newVisible: boolean) => {
@@ -235,4 +236,4 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
             </PreviewContext.Provider>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/packages/semi-ui/image/previewImage.tsx b/packages/semi-ui/image/previewImage.tsx
index 05b71324a7..2751dd37ef 100644
--- a/packages/semi-ui/image/previewImage.tsx
+++ b/packages/semi-ui/image/previewImage.tsx
@@ -79,6 +79,7 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
     }
 
     componentWillUnmount() {
+        super.componentWillUnmount();
         window.removeEventListener("resize", this.onWindowResize);
     }
 
@@ -165,4 +166,4 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
             </div>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/packages/semi-ui/image/previewInner.tsx b/packages/semi-ui/image/previewInner.tsx
index a20a84eecb..d67a3b4cdd 100644
--- a/packages/semi-ui/image/previewInner.tsx
+++ b/packages/semi-ui/image/previewInner.tsx
@@ -158,7 +158,7 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
                     headerDom && headerDom.contains(target) ||
                     footerDom && footerDom.contains(target) ||
                     leftIconDom && leftIconDom.contains(target) ||
-                    rightIconDom && rightIconDom.contains(target)  
+                    rightIconDom && rightIconDom.contains(target)
                 ) {
                     // Move in the operation area, return false
                     return false;
@@ -254,6 +254,7 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
     }
 
     componentWillUnmount() {
+        super.componentWillUnmount();
         this.foundation.clearTimer();
     }
 
@@ -320,12 +321,12 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
 
     // 为什么通过 addEventListener 注册 wheel 事件而不是使用 onWheel 事件？
     // 因为 Passive Event Listeners（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners）
-    // Passive Event Listeners 是一种优化技术，用于提高滚动性能。在默认情况下，浏览器会假设事件的监听器不会调用 
+    // Passive Event Listeners 是一种优化技术，用于提高滚动性能。在默认情况下，浏览器会假设事件的监听器不会调用
     // preventDefault() 方法来阻止事件的默认行为，从而允许进行一些优化操作，例如滚动平滑。
     // 对于 Image 而言，如果使用触控板，双指朝不同方向分开放大图片，则需要  preventDefault 防止页面整体放大。
     // Why register wheel event through addEventListener instead of using onWheel event？
-    // Because of Passive Event Listeners(an optimization technique used to improve scrolling performance. By default, 
-    // the browser will assume that event listeners will not call preventDefault() method to prevent the default behavior of the event, 
+    // Because of Passive Event Listeners(an optimization technique used to improve scrolling performance. By default,
+    // the browser will assume that event listeners will not call preventDefault() method to prevent the default behavior of the event,
     // allowing some optimization operations such as scroll smoothing.)
     // For Image, if we use the trackpad and spread your fingers in different directions to enlarge the image, we need to preventDefault
     // to prevent the page from being enlarged as a whole.
@@ -393,7 +394,7 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
             visible && <Portal
                 getPopupContainer={getPopupContainer}
                 style={wrapperStyle}
-            >  
+            >
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                 <div
                     className={previewWrapperCls}
diff --git a/packages/semi-ui/modal/Modal.tsx b/packages/semi-ui/modal/Modal.tsx
index f902b6934e..0ec4395d45 100644
--- a/packages/semi-ui/modal/Modal.tsx
+++ b/packages/semi-ui/modal/Modal.tsx
@@ -244,7 +244,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
 
     componentWillUnmount() {
         if (this.props.visible) {
-            this.foundation.destroy();
+            super.componentWillUnmount();
         } else {
             this.foundation.enabledBodyScroll();
         }
diff --git a/packages/semi-ui/modal/ModalContent.tsx b/packages/semi-ui/modal/ModalContent.tsx
index 4348f8a55c..4f1a28f5ea 100644
--- a/packages/semi-ui/modal/ModalContent.tsx
+++ b/packages/semi-ui/modal/ModalContent.tsx
@@ -5,7 +5,7 @@ import { cssClasses } from '@douyinfe/semi-foundation/modal/constants';
 import ConfigContext, { ContextValue } from '../configProvider/context';
 import Button from '../iconButton';
 import Typography from '../typography';
-import BaseComponent from '../_base/baseComponent';
+import BaseComponent, { SemiUsedEvent } from '../_base/baseComponent';
 import ModalContentFoundation, {
     ModalContentAdapter,
     ModalContentProps,
@@ -77,13 +77,11 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
             },
             addKeyDownEventListener: () => {
                 if (this.props.closeOnEsc) {
-                    document.addEventListener('keydown', this.foundation.handleKeyDown);
+                    this.hookedAddEventListener(document, SemiUsedEvent.KeyDown, this.foundation.handleKeyDown);
                 }
             },
             removeKeyDownEventListener: () => {
-                if (this.props.closeOnEsc) {
-                    document.removeEventListener('keydown', this.foundation.handleKeyDown);
-                }
+
             },
             getMouseState: () => this.state.dialogMouseDown,
             modalDialogFocus: () => {
@@ -123,8 +121,8 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
     }
 
     componentWillUnmount() {
+        super.componentWillUnmount();
         clearTimeout(this.timeoutId);
-        this.foundation.destroy();
     }
 
     onKeyDown = (e: React.MouseEvent) => {
diff --git a/packages/semi-ui/notification/notice.tsx b/packages/semi-ui/notification/notice.tsx
index ec7f901343..e2b4f2f232 100644
--- a/packages/semi-ui/notification/notice.tsx
+++ b/packages/semi-ui/notification/notice.tsx
@@ -87,9 +87,6 @@ class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
 
     context: ContextValue;
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
 
     renderTypeIcon() {
         const { type, icon } = this.props;
diff --git a/packages/semi-ui/pagination/index.tsx b/packages/semi-ui/pagination/index.tsx
index 4b0d321fda..9b75c67933 100644
--- a/packages/semi-ui/pagination/index.tsx
+++ b/packages/semi-ui/pagination/index.tsx
@@ -187,9 +187,6 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
         this.foundation.init();
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
 
     componentDidUpdate(prevProps: PaginationProps) {
         const pagerProps = {
diff --git a/packages/semi-ui/radio/radioGroup.tsx b/packages/semi-ui/radio/radioGroup.tsx
index e607e500c4..47d21c1f51 100644
--- a/packages/semi-ui/radio/radioGroup.tsx
+++ b/packages/semi-ui/radio/radioGroup.tsx
@@ -112,9 +112,6 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
         }
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
 
     get adapter(): RadioGroupAdapter {
         return {
diff --git a/packages/semi-ui/radio/radioInner.tsx b/packages/semi-ui/radio/radioInner.tsx
index bc43ce6984..3b3225f1ea 100644
--- a/packages/semi-ui/radio/radioInner.tsx
+++ b/packages/semi-ui/radio/radioInner.tsx
@@ -88,9 +88,6 @@ class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
         }
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
 
     blur() {
         this.inputEntity.blur();
diff --git a/packages/semi-ui/rating/index.tsx b/packages/semi-ui/rating/index.tsx
index 9e267d76c1..1c45c55233 100644
--- a/packages/semi-ui/rating/index.tsx
+++ b/packages/semi-ui/rating/index.tsx
@@ -197,9 +197,6 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
         this.foundation.init();
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
 
     onHover = (event: React.MouseEvent, index: number) => {
         this.foundation.handleHover(event, index);
diff --git a/packages/semi-ui/resizeObserver/index.tsx b/packages/semi-ui/resizeObserver/index.tsx
index 72039056a5..c546aa5011 100644
--- a/packages/semi-ui/resizeObserver/index.tsx
+++ b/packages/semi-ui/resizeObserver/index.tsx
@@ -44,6 +44,7 @@ export default class ReactResizeObserver extends BaseComponent<ReactResizeObserv
     }
 
     componentWillUnmount() {
+        super.componentWillUnmount();
         if (this.observer) {
             this.observer.disconnect();
             this.observer = null;
diff --git a/packages/semi-ui/scrollList/scrollItem.tsx b/packages/semi-ui/scrollList/scrollItem.tsx
index 63c9a61ff6..7ad7f8d880 100644
--- a/packages/semi-ui/scrollList/scrollItem.tsx
+++ b/packages/semi-ui/scrollList/scrollItem.tsx
@@ -114,11 +114,13 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
         };
     }
     componentWillUnmount() {
+        super.componentWillUnmount();
         if (this.props.cycled) {
             this.throttledAdjustList.cancel();
             this.debouncedSelect.cancel();
         }
     }
+
     componentDidMount() {
         this.foundation.init();
 
diff --git a/packages/semi-ui/select/index.tsx b/packages/semi-ui/select/index.tsx
index 1166ec5eb4..abeacf47c8 100644
--- a/packages/semi-ui/select/index.tsx
+++ b/packages/semi-ui/select/index.tsx
@@ -628,9 +628,6 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         this.selectID = this.props.id || getUuidShort();
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
 
     componentDidUpdate(prevProps: SelectProps, prevState: SelectState) {
         const prevChildrenKeys = React.Children.toArray(prevProps.children).map((child: any) => child.key);
diff --git a/packages/semi-ui/sideSheet/index.tsx b/packages/semi-ui/sideSheet/index.tsx
index 656eed92ab..bea5af7cae 100644
--- a/packages/semi-ui/sideSheet/index.tsx
+++ b/packages/semi-ui/sideSheet/index.tsx
@@ -181,7 +181,7 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
 
     componentWillUnmount() {
         if (this.props.visible) {
-            this.foundation.destroy();
+            super.componentWillUnmount();
         }
     }
 
diff --git a/packages/semi-ui/slider/index.tsx b/packages/semi-ui/slider/index.tsx
index af4e9868a2..6dcb4a83db 100644
--- a/packages/semi-ui/slider/index.tsx
+++ b/packages/semi-ui/slider/index.tsx
@@ -297,9 +297,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
         }
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
 
     renderHandle = () => {
         const { vertical, range, tooltipVisible, tipFormatter, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-valuetext': ariaValueText, getAriaValueText, disabled } = this.props;
diff --git a/packages/semi-ui/spin/index.tsx b/packages/semi-ui/spin/index.tsx
index 61e7587eb2..e20d9b7eb6 100644
--- a/packages/semi-ui/spin/index.tsx
+++ b/packages/semi-ui/spin/index.tsx
@@ -84,10 +84,6 @@ class Spin extends BaseComponent<SpinProps, SpinState> {
         };
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
-
     renderSpin() {
         const { indicator, tip } = this.props;
         const { loading } = this.state;
diff --git a/packages/semi-ui/switch/index.tsx b/packages/semi-ui/switch/index.tsx
index 8472d987ee..b30625f488 100644
--- a/packages/semi-ui/switch/index.tsx
+++ b/packages/semi-ui/switch/index.tsx
@@ -93,9 +93,6 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
         }
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
 
     get adapter(): SwitchAdapter<SwitchProps, SwitchState> {
         return {
diff --git a/packages/semi-ui/timePicker/Combobox.tsx b/packages/semi-ui/timePicker/Combobox.tsx
index 20afc180d0..a60eedea96 100644
--- a/packages/semi-ui/timePicker/Combobox.tsx
+++ b/packages/semi-ui/timePicker/Combobox.tsx
@@ -92,13 +92,6 @@ class Combobox extends BaseComponent<ComboboxProps, ComboboxState> {
         }
     }
 
-    componentWillUnmount() {
-        // this.foundation.destroy();
-    }
-
-    componentDidMount() {
-        // this.foundation.init();
-    }
 
     cacheRefCurrent = (key: string, current: ScrollItem<FormatOptionReturn> | ScrollItem<AMPMOptionItem>) => {
         if (key && typeof key === 'string') {
diff --git a/packages/semi-ui/toast/toast.tsx b/packages/semi-ui/toast/toast.tsx
index 4046253b30..ca241ef262 100644
--- a/packages/semi-ui/toast/toast.tsx
+++ b/packages/semi-ui/toast/toast.tsx
@@ -83,9 +83,6 @@ class Toast extends BaseComponent<ToastReactProps, ToastState> {
         this.foundation.init();
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
 
     close(e: React.MouseEvent) {
         this.foundation.close(e);
diff --git a/packages/semi-ui/tooltip/index.tsx b/packages/semi-ui/tooltip/index.tsx
index 3452ef3f23..2e8bb37d80 100644
--- a/packages/semi-ui/tooltip/index.tsx
+++ b/packages/semi-ui/tooltip/index.tsx
@@ -458,7 +458,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
 
     componentWillUnmount() {
         this.mounted = false;
-        this.foundation.destroy();
+        super.componentWillUnmount();
     }
 
     /**
diff --git a/packages/semi-ui/treeSelect/index.tsx b/packages/semi-ui/treeSelect/index.tsx
index 57d5f0f716..64b9c8eda6 100644
--- a/packages/semi-ui/treeSelect/index.tsx
+++ b/packages/semi-ui/treeSelect/index.tsx
@@ -770,9 +770,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         this.foundation.init();
     }
 
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
+
 
     renderSuffix = () => {
         const { suffix }: any = this.props;
diff --git a/packages/semi-ui/tsconfig.json b/packages/semi-ui/tsconfig.json
index 7bb36c6b44..f99edd3cb9 100644
--- a/packages/semi-ui/tsconfig.json
+++ b/packages/semi-ui/tsconfig.json
@@ -6,7 +6,7 @@
         "sourceMap": true,
         "allowJs": true,
         "module": "es6",
-        "lib": ["es7", "dom"],
+        "lib": ["es2021", "dom"],
         "moduleResolution": "node",
         "noImplicitAny": false,
         "jsx": "react",
diff --git a/packages/semi-ui/upload/index.tsx b/packages/semi-ui/upload/index.tsx
index 711c64c9b0..b15266035d 100644
--- a/packages/semi-ui/upload/index.tsx
+++ b/packages/semi-ui/upload/index.tsx
@@ -334,9 +334,6 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
         this.foundation.init();
     }
 
-    componentWillUnmount(): void {
-        this.foundation.destroy();
-    }
 
     onClick = (): void => {
         const { inputRef, props } = this;