refactor(Watermark): change useState to useRef (#52089)

components/watermark/useWatermark.ts

@@ -27,16 +27,16 @@ export default function useWatermark(
   removeWatermark: (container: HTMLElement) => void,
   isWatermarkEle: (ele: Node) => boolean,
 ] {
-  const [watermarkMap] = React.useState(() => new Map<HTMLElement, HTMLDivElement>());
+  const watermarkMap = React.useRef(new Map<HTMLElement, HTMLDivElement>());
 
   const appendWatermark = (base64Url: string, markWidth: number, container: HTMLElement) => {
     if (container) {
-      if (!watermarkMap.get(container)) {
+      if (!watermarkMap.current.get(container)) {
         const newWatermarkEle = document.createElement('div');
-        watermarkMap.set(container, newWatermarkEle);
+        watermarkMap.current.set(container, newWatermarkEle);
       }
 
-      const watermarkEle = watermarkMap.get(container)!;
+      const watermarkEle = watermarkMap.current.get(container)!;
 
       watermarkEle.setAttribute(
         'style',
@@ -55,20 +55,20 @@ export default function useWatermark(
       }
     }
 
-    return watermarkMap.get(container);
+    return watermarkMap.current.get(container);
   };
 
   const removeWatermark = (container: HTMLElement) => {
-    const watermarkEle = watermarkMap.get(container);
+    const watermarkEle = watermarkMap.current.get(container);
 
     if (watermarkEle && container) {
       container.removeChild(watermarkEle);
     }
 
-    watermarkMap.delete(container);
+    watermarkMap.current.delete(container);
   };
 
-  const isWatermarkEle = (ele: any) => Array.from(watermarkMap.values()).includes(ele);
+  const isWatermarkEle = (ele: any) => Array.from(watermarkMap.current.values()).includes(ele);
 
   return [appendWatermark, removeWatermark, isWatermarkEle];
 }