diff --git a/src/guide/Guide.tsx b/src/guide/Guide.tsx
index 701ab6a15f..0b4274f9b4 100644
--- a/src/guide/Guide.tsx
+++ b/src/guide/Guide.tsx
@@ -6,7 +6,7 @@ import useConfig from '../hooks/useConfig';
 import Popup from '../popup';
 import { GuideCrossProps, StepPopupPlacement, TdGuideProps } from './type';
 import { addClass, removeClass, isFixed, getWindowScroll } from '../_util/dom';
-import { scrollToParentVisibleArea, getRelativePosition, getTargetElm, scrollToElm } from './utils';
+import { scrollToParentVisibleArea, getRelativePosition, getTargetElm, scrollToElm, useMount } from './utils';
 import setStyle from '../_common/js/utils/set-style';
 import useControlled from '../hooks/useControlled';
 import { guideDefaultProps } from './defaultProps';
@@ -183,14 +183,7 @@ const Guide = (props: GuideProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [innerCurrent]);
 
-  useEffect(() => {
-    initGuide();
-
-    return () => {
-      destroyGuide();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  useMount(initGuide, destroyGuide);
 
   const renderOverlayLayer = () =>
     createPortal(
diff --git a/src/guide/utils/index.ts b/src/guide/utils/index.ts
index ef6b33e57d..9a41070e43 100644
--- a/src/guide/utils/index.ts
+++ b/src/guide/utils/index.ts
@@ -2,6 +2,6 @@ import { scrollToParentVisibleArea } from './getScrollParent';
 import getRelativePosition from './getRelativePosition';
 import getTargetElm from './getTargetElm';
 import scrollToElm from './scrollToElm';
-import useWatch from './useWatch';
+import useMount from './useMount';
 
-export { scrollToParentVisibleArea, getRelativePosition, getTargetElm, scrollToElm, useWatch };
+export { scrollToParentVisibleArea, getRelativePosition, getTargetElm, scrollToElm, useMount };
diff --git a/src/guide/utils/useMount.ts b/src/guide/utils/useMount.ts
new file mode 100644
index 0000000000..4c6c5197fa
--- /dev/null
+++ b/src/guide/utils/useMount.ts
@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+
+export default function useMount(mount: () => void, unmount: () => void) {
+  const isMounted = useRef(true);
+
+  return useEffect(() => {
+    if (isMounted.current) {
+      isMounted.current = false;
+
+      return;
+    }
+
+    mount();
+
+    return unmount;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}
diff --git a/src/guide/utils/useWatch.ts b/src/guide/utils/useWatch.ts
deleted file mode 100644
index 72cca4e4c7..0000000000
--- a/src/guide/utils/useWatch.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export default function useWatch(value, fn, config = { immediate: false }) {
-  const oldValue = useRef();
-  const isFirst = useRef(false);
-  useEffect(() => {
-    if (isFirst.current) {
-      fn(value, oldValue.current);
-    } else {
-      isFirst.current = true;
-
-      // 是否要立即执行 fn 回调函数
-      if (config.immediate) {
-        fn(value, oldValue.current);
-      }
-    }
-
-    oldValue.current = value;
-  }, [config.immediate, fn, value]);
-}