From 64d8cfc08e514e13b4e5226523b17f5ecdca7cba Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 20 Sep 2022 15:54:39 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96AutoFold=20=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1,=20=E7=A1=AE=E4=BF=9D=E5=9C=A8=E9=95=BF=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E6=97=B6=E5=87=8F=E5=B0=91=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../design/components/AutoFolder/index.tsx    | 55 +++++++++++--------
 .../ChatMessageList/VirtualizedList.tsx       |  9 ++-
 2 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/client/packages/design/components/AutoFolder/index.tsx b/client/packages/design/components/AutoFolder/index.tsx
index 1d451142..0cff0685 100644
--- a/client/packages/design/components/AutoFolder/index.tsx
+++ b/client/packages/design/components/AutoFolder/index.tsx
@@ -1,3 +1,4 @@
+import { useMemoizedFn } from 'node_modules/tailchat-shared';
 import React, {
   PropsWithChildren,
   useEffect,
@@ -12,31 +13,28 @@ interface AutoFolderProps extends PropsWithChildren {
   backgroundColor?: string;
 }
 export const AutoFolder: React.FC<AutoFolderProps> = React.memo((props) => {
-  const { maxHeight, showFullText = 'More', backgroundColor = 'white' } = props;
-  const [isShowFull, setIsShowFull] = useState(false);
+  const { showFullText = 'More', backgroundColor = 'white' } = props;
+  const [isShowFullBtn, setIsShowFullBtn] = useState(false); // 是否显示展示所有内容的按钮
+  const [isShowFull, setIsShowFull] = useState(false); // 是否点击按钮展示所有
   const contentRef = useRef<HTMLDivElement>(null);
 
-  const observer = useMemo(
-    () =>
-      new window.ResizeObserver((entries) => {
-        if (entries[0]) {
-          const { height } = entries[0].contentRect;
-          if (height > maxHeight) {
-            setIsShowFull(false);
-
-            observer.disconnect(); // 触发一次则解除连接
-          } else {
-            setIsShowFull(true);
-          }
-        }
-      }),
-    []
-  );
-
   useEffect(() => {
     if (!contentRef.current) {
       return;
     }
+
+    const observer = new window.ResizeObserver((entries) => {
+      if (entries[0]) {
+        const { height } = entries[0].contentRect;
+
+        if (height > maxHeight) {
+          setIsShowFull(false);
+          setIsShowFullBtn(true);
+
+          observer.disconnect(); // 触发一次则解除连接
+        }
+      }
+    });
     observer.observe(contentRef.current);
 
     return () => {
@@ -44,17 +42,30 @@ export const AutoFolder: React.FC<AutoFolderProps> = React.memo((props) => {
     };
   }, []);
 
+  const maxHeight = useMemo(() => {
+    if (isShowFull) {
+      return 'none';
+    } else {
+      return props.maxHeight;
+    }
+  }, [isShowFull, props.maxHeight]);
+
+  const handleClickShowFullBtn = useMemoizedFn(() => {
+    setIsShowFullBtn(false);
+    setIsShowFull(true);
+  });
+
   return (
     <div
       style={{
-        maxHeight: isShowFull ? 'none' : maxHeight,
+        maxHeight,
         overflow: 'hidden',
         position: 'relative',
       }}
     >
       <div ref={contentRef}>{props.children}</div>
 
-      {!isShowFull && (
+      {isShowFullBtn && (
         <div
           style={{
             position: 'absolute',
@@ -66,7 +77,7 @@ export const AutoFolder: React.FC<AutoFolderProps> = React.memo((props) => {
             backgroundImage: `linear-gradient(rgba(0,0,0,0), ${backgroundColor})`,
             padding: '4px 0',
           }}
-          onClick={() => setIsShowFull(true)}
+          onClick={handleClickShowFullBtn}
         >
           {showFullText}
         </div>
diff --git a/client/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx b/client/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx
index a60a1ed4..6ad0de75 100644
--- a/client/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx
+++ b/client/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx
@@ -76,11 +76,15 @@ export const VirtualizedMessageList: React.FC<MessageListProps> = React.memo(
       }
     );
 
-    const itemContent = (virtuosoIndex: number) => {
+    const computeItemKey = useMemoizedFn((index: number, item: ChatMessage) => {
+      return item?._id ?? index;
+    });
+
+    const itemContent = useMemoizedFn((virtuosoIndex: number) => {
       const index = virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
 
       return buildMessageItemRow(props.messages, props.messages[index]._id);
-    };
+    });
 
     return (
       <Virtuoso
@@ -88,6 +92,7 @@ export const VirtualizedMessageList: React.FC<MessageListProps> = React.memo(
         ref={listRef}
         firstItemIndex={PREPEND_OFFSET - numItemsPrepended}
         initialTopMostItemIndex={Math.max(props.messages.length - 1, 0)}
+        computeItemKey={computeItemKey}
         totalCount={props.messages.length}
         overscan={{
           main: 450,