fix(Guide): fix guide initial position in ssr (#2832)

* fix(Guide): fix guide initial position in ssr

* fix(Guide): fix guide inital position in ssr

src/guide/Guide.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useEffect, useRef, useState } from 'react';
 import isFunction from 'lodash/isFunction';
 import cx from 'classnames';
 import { createPortal } from 'react-dom';
@@ -12,6 +12,7 @@ import setStyle from '../_common/js/utils/set-style';
 import useControlled from '../hooks/useControlled';
 import { guideDefaultProps } from './defaultProps';
 import useDefaultProps from '../hooks/useDefaultProps';
+import useIsomorphicLayoutEffect from '../_util/useLayoutEffect';
 
 export type GuideProps = TdGuideProps;
 
@@ -88,7 +89,6 @@ const Guide: React.FC<GuideProps> = (originalProps) => {
 
   const showPopupGuide = () => {
     currentHighlightLayerElm.current = getTargetElm(currentStepInfo.element);
-
     setTimeout(() => {
       scrollToParentVisibleArea(currentHighlightLayerElm.current);
       setHighlightLayerPosition(highlightLayerRef.current);
@@ -104,6 +104,7 @@ const Guide: React.FC<GuideProps> = (originalProps) => {
   const showDialogGuide = () => {
     setTimeout(() => {
       currentHighlightLayerElm.current = dialogTooltipRef.current;
+
       scrollToParentVisibleArea(currentHighlightLayerElm.current);
       setHighlightLayerPosition(highlightLayerRef.current);
       scrollToElm(currentHighlightLayerElm.current);
@@ -179,7 +180,7 @@ const Guide: React.FC<GuideProps> = (originalProps) => {
     }
   };
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (innerCurrent >= 0 && innerCurrent < steps.length) {
       initGuide();
     } else {
@@ -189,13 +190,18 @@ const Guide: React.FC<GuideProps> = (originalProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [innerCurrent]);
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     initGuide();
 
-    return destroyGuide;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(
+    () => destroyGuide,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
   const renderOverlayLayer = () =>
     createPortal(
       <div ref={overlayLayerRef} className={`${prefixCls}__overlay`} style={{ zIndex: zIndex - 2 }} />,