perf: 已读状态: 不在当前页面时不更新

src/hooks/useVisibilityState.js

@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react';
+export function useVisibilityState() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      setIsVisible(document.visibilityState === 'visible');
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    handleVisibilityChange(); // Initial check on component mount
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, []);
+
+  return isVisible;
+}

src/views/Conversations/Online/MessagesWrapper.jsx

@@ -7,6 +7,7 @@ import { fetchCleanUnreadMsgCount, fetchMessages, MESSAGE_PAGE_SIZE } from '@/ac
 import { fetchOrderConversationsList,  } from '@/actions/ConversationActions';
 import { isEmpty } from '@/utils/commons';
 import useAuthStore from '@/stores/AuthStore';
+import useVisibilityState from '@/hooks/useVisibilityState';
 
 const MessagesWrapper = () => {
   const userId = useAuthStore((state) => state.loginUser.userId);
@@ -20,6 +21,7 @@ const MessagesWrapper = () => {
   const setMsgLoading = useConversationStore((state) => state.setMsgLoading);
 
   const refreshTotalNotify = useConversationStore(useShallow((state) => state.refreshTotalNotify));
+  const isVisible = useVisibilityState();
 
   const [longList, setLongList] = useState([]);
   const [longListLoading, setLongListLoading] = useState(false);
@@ -41,12 +43,12 @@ const MessagesWrapper = () => {
   }, [activeMessages]);
 
   useEffect(() => {
-    if (currentConversation.opi_sn && currentConversation.whatsapp_phone_number && activeMessages.length > 0) {
+    if (isVisible && currentConversation.opi_sn && currentConversation.whatsapp_phone_number && activeMessages.length > 0) {
       fetchCleanUnreadMsgCount({ opisn: currentConversation.opi_sn, whatsappid: currentConversation.whatsapp_phone_number });
       refreshTotalNotify();
     }
     return () => {};
-  }, [activeMessages.length]);
+  }, [activeMessages.length, isVisible]);
 
 
   const getFirstPageMessages = async (item) => {