perf: requestAnimationFrame 代替 setInternal , 性能问题

src/views/DesktopApp.jsx

@@ -18,7 +18,7 @@ import {
   Drawer,
 } from 'antd'
 import 'dayjs/locale/zh-cn'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useCallback, useRef } from 'react'
 import { Link, NavLink, Outlet, useHref } from 'react-router-dom'
 
 import '@/assets/App.css'
@@ -88,26 +88,46 @@ function DesktopApp() {
    * 标签页标题闪烁
    */
   const [isTitleVisible, setIsTitleVisible] = useState(true)
+
+  const start = useRef();
+
   useEffect(() => {
-    let interval
+    let animationFrameId;
-    if (totalNotify > 0) {
+
-      if ('setAppBadge' in navigator) {
+    const step = (timestamp) => {
-        navigator.setAppBadge(totalNotify).catch(() => {})
+      if (start.current === undefined) {
+        start.current = timestamp;
       }
-      interval = setInterval(() => {
+      const elapsed = timestamp - start.current;
+
+      if (elapsed > 1000) { // 2000ms = 2s
         document.title = isTitleVisible
           ? `🔔🔥💬【${totalNotify}条新消息】`
-          : '______________'
+          : '______________';
-        setIsTitleVisible(!isTitleVisible)
+        setIsTitleVisible(!isTitleVisible);
-      }, 500)
+        start.current = timestamp;
-    } else {
+      }
-      document.title = '销售平台'
+
-      if ('clearAppBadge' in navigator) {
+      if (totalNotify > 0) {
-        navigator.clearAppBadge().catch(() => {})
+        animationFrameId = requestAnimationFrame(step);
+      } else {
+        document.title = '销售平台';
       }
+    };
+
+    if (totalNotify > 0) {
+      if ('setAppBadge' in navigator) {
+        navigator.setAppBadge(totalNotify).catch(() => {});
+      }
+      animationFrameId = requestAnimationFrame(step);
     }
-    return () => clearInterval(interval)
+
-  }, [totalNotify, isTitleVisible])
+    return () => {
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+    };
+  }, [totalNotify, isTitleVisible]);
 
   return (
     <Layout>