减少re-render

src/views/Conversations/ChatWindow.jsx

@@ -6,12 +6,7 @@ import InputBox from './Components/InputBox';
 import ConversationsList from './Components/ConversationsList';
 import CustomerProfile from './Components/CustomerProfile';
 
-import { useConversationState, useConversationDispatch } from '@/stores/ConversationContext';
-import { sentNewMessage } from '@/actions/ConversationActions';
-import { sentMsgTypeMapped } from '@/lib/msgUtils';
-
 import './Conversations.css';
-import { useAuthContext } from '@/stores/AuthContext.js';
 
 const { Sider, Content, Header, Footer } = Layout;
 
@@ -19,27 +14,14 @@ const { Sider, Content, Header, Footer } = Layout;
  *
  */
 const ChatWindow = () => {
-  const { loginUser } = useAuthContext();
+  console.log('chat window;;;;;;;;;;;;;;;;;;;;;;;;');
-  const { userId } = loginUser;
-  const { websocket, errors } = useConversationState();
-  const dispatch = useConversationDispatch();
-  console.log(errors, 'errors;;;;;;;;;;;;;;;;;;;;;;;;');
 
   useEffect(() => {
-    console.log(errors, 'errors 222;;;;;;;;;;;;;;;;;;;;;;;;');
+    console.log('chat window 222;;;;;;;;;;;;;;;;;;;;;;;;');
 
     return () => {};
   }, []);
 
-  const sendMessage = (msgObj) => {
-    console.log('sendMessage------------------', msgObj);
-    const contentToSend = sentMsgTypeMapped[msgObj.type].contentToSend(msgObj);
-    websocket.sendMessage({ ...contentToSend, opi_sn: userId });
-    const contentToRender = sentMsgTypeMapped[msgObj.type].contentToRender(msgObj);
-    console.log(contentToRender, 'contentToRender  sendMessage------------------');
-    dispatch(sentNewMessage(contentToRender));
-  };
-
   return (
     <Spin spinning={false} tip={'正在连接...'}>
       <Layout className='h-screen chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 198px)', height: 'calc(100% - 198px)' }}>
@@ -58,7 +40,7 @@ const ChatWindow = () => {
               </div>
             </Content>
             <Footer className='ant-layout-sider-light p-1'>
-              <InputBox onSend={(v) => sendMessage(v)} />
+              <InputBox />
             </Footer>
           </Layout>
         </Content>

src/views/Conversations/Components/InputBox.jsx

@@ -1,20 +1,34 @@
 import React, { useEffect, useState } from 'react';
 import { Input, Button, Tabs, List, Space, Popover, Flex } from 'antd';
 // import { Input } from 'react-chat-elements';
-import { useConversationState } from '@/stores/ConversationContext';
+import { useConversationState, useConversationDispatch } from '@/stores/ConversationContext';
+import { sentNewMessage } from '@/actions/ConversationActions';
+import { useAuthContext } from '@/stores/AuthContext';
 import { LikeOutlined, MessageOutlined, StarOutlined, SendOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons';
 import { cloneDeep, getNestedValue, isEmpty } from '@/utils/utils';
 import { v4 as uuid } from 'uuid';
-import { whatsappTemplatesParamMapped } from '@/lib/msgUtils';
+import { whatsappTemplatesParamMapped, sentMsgTypeMapped } from '@/lib/msgUtils';
 
-const InputBox = ({ onSend }) => {
+const InputBox = () => {
-  const { currentConversation, templates } = useConversationState();
+  const { loginUser } = useAuthContext();
+  const { userId } = loginUser;
+  const { websocket, currentConversation, templates } = useConversationState();
+  const dispatch = useConversationDispatch();
   const [textContent, setTextContent] = useState('');
 
   const talkabled = !isEmpty(currentConversation.sn);
 
+  const invokeSendMessage = (msgObj) => {
+    console.log('sendMessage------------------', msgObj);
+    const contentToSend = sentMsgTypeMapped[msgObj.type].contentToSend(msgObj);
+    websocket.sendMessage({ ...contentToSend, opi_sn: userId });
+    const contentToRender = sentMsgTypeMapped[msgObj.type].contentToRender(msgObj);
+    console.log(contentToRender, 'contentToRender  sendMessage------------------');
+    dispatch(sentNewMessage(contentToRender));
+  };
+
   const handleSendText = () => {
-    if (typeof onSend === 'function' && textContent.trim() !== '') {
+    if (textContent.trim() !== '') {
       const msgObj = {
         type: 'text',
         text: textContent,
@@ -24,14 +38,13 @@ const InputBox = ({ onSend }) => {
         date: new Date(),
         status: 'waiting',
       };
-      onSend(msgObj);
+      invokeSendMessage(msgObj);
       setTextContent('');
     }
   };
 
   const handleSendTemplate = (fromTemplate) => {
     console.log(fromTemplate, 'fromTemplate');
-    if (typeof onSend === 'function') {
       const _conversation = { ...cloneDeep(currentConversation) };
       const msgObj = {
         type: 'whatsappTemplate',
@@ -67,9 +80,8 @@ const InputBox = ({ onSend }) => {
         },
         template_origin: fromTemplate,
       };
-      onSend(msgObj);
+      invokeSendMessage(msgObj);
       setOpenTemplates(false);
-    }
   };
 
   const [openTemplates, setOpenTemplates] = useState(false);