From b45469c6476941ff2a0f1867e24caf7767f42f34 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 20 Sep 2022 16:16:59 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E5=86=85=E5=AE=B9=E5=AE=9A=E4=BD=8D=E6=95=88?=
 =?UTF-8?q?=E7=8E=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChatBox/ChatMessageList/Item.tsx          | 23 ++++---------------
 .../ChatBox/ChatMessageList/NormalList.tsx    |  2 +-
 .../ChatMessageList/VirtualizedList.tsx       |  2 +-
 3 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/client/web/src/components/ChatBox/ChatMessageList/Item.tsx b/client/web/src/components/ChatBox/ChatMessageList/Item.tsx
index 5a511d38..0a9caadd 100644
--- a/client/web/src/components/ChatBox/ChatMessageList/Item.tsx
+++ b/client/web/src/components/ChatBox/ChatMessageList/Item.tsx
@@ -9,10 +9,8 @@ import {
   useCachedUserInfo,
   MessageHelper,
 } from 'tailchat-shared';
-import { Avatar } from '@/components/Avatar';
 import { useRenderPluginMessageInterpreter } from './useRenderPluginMessageInterpreter';
 import { getMessageRender, pluginMessageExtraParsers } from '@/plugin/common';
-import { Icon } from '@/components/Icon';
 import { Divider, Dropdown } from 'antd';
 import { UserName } from '@/components/UserName';
 import clsx from 'clsx';
@@ -22,7 +20,7 @@ import { TcPopover } from '@/components/TcPopover';
 import { useMessageReactions } from './useMessageReactions';
 import { stopPropagation } from '@/utils/dom-helper';
 import { useUserInfoList } from 'tailchat-shared/hooks/model/useUserInfoList';
-import { AutoFolder } from 'tailchat-design';
+import { AutoFolder, Avatar, Icon } from 'tailchat-design';
 import './Item.less';
 
 /**
@@ -240,27 +238,16 @@ const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo((props) => {
 });
 ChatMessageItem.displayName = 'ChatMessageItem';
 
-function findMessageIndexWithId(
-  messages: ChatMessage[],
-  messageId: string
-): number {
-  return messages.findIndex((m) => m._id === messageId);
-}
-
 /**
  * 构造聊天项
  */
-export function buildMessageItemRow(
-  messages: ChatMessage[],
-  messageId: string
-) {
-  const index = findMessageIndexWithId(messages, messageId); // TODO: 这里是因为mattermost的动态列表传的id因此只能这边再用id找回，可以看看是否可以优化
-  if (index === -1) {
+export function buildMessageItemRow(messages: ChatMessage[], index: number) {
+  const message = messages[index];
+
+  if (message) {
     return <div />;
   }
 
-  const message = messages[index];
-
   let showDate = true;
   let showAvatar = true;
   const messageCreatedAt = new Date(message.createdAt ?? '');
diff --git a/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx b/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx
index 9efa1f53..c3428164 100644
--- a/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx
+++ b/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx
@@ -67,7 +67,7 @@ export const NormalMessageList: React.FC<MessageListProps> = React.memo(
       >
         <div>
           {props.messages.map((message, index, arr) =>
-            buildMessageItemRow(arr, message._id)
+            buildMessageItemRow(arr, index)
           )}
         </div>
       </div>
diff --git a/client/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx b/client/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx
index 6ad0de75..8d9388a1 100644
--- a/client/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx
+++ b/client/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx
@@ -83,7 +83,7 @@ export const VirtualizedMessageList: React.FC<MessageListProps> = React.memo(
     const itemContent = useMemoizedFn((virtuosoIndex: number) => {
       const index = virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
 
-      return buildMessageItemRow(props.messages, props.messages[index]._id);
+      return buildMessageItemRow(props.messages, index);
     });
 
     return (