perf: 优化代码

web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx

@@ -103,7 +103,7 @@ export const VirtualizedMessageList: React.FC<VirtualizedMessageListProps> =
     const initScrollToIndex = () => {
       return {
         index: 0,
-        position: 'end',
+        position: 'end' as const,
       };
     };
 

web/src/components/DynamicVirtualizedList/DynamicSizeList.tsx

@@ -191,6 +191,10 @@ interface DynamicSizeListState {
   localOlderPostsToRender: [number, number];
   scrolledToInitIndex?: boolean;
 }
+type DynamicSizeListSnapshot = {
+  previousScrollTop: number;
+  previousScrollHeight: number;
+} | null;
 
 /**
  * 注意，该组件必须拥有一个loader
@@ -345,17 +349,15 @@ export default class DynamicSizeList extends PureComponent<
   getSnapshotBeforeUpdate(
     prevProps: DynamicSizeListProps,
     prevState: DynamicSizeListState
-  ) {
+  ): DynamicSizeListSnapshot {
-    if (
+    if (this._outerRef) {
+      const isChangedLocalOlderPostsToRender =
         prevState.localOlderPostsToRender[0] !==
           this.state.localOlderPostsToRender[0] ||
         prevState.localOlderPostsToRender[1] !==
-        this.state.localOlderPostsToRender[1]
+          this.state.localOlderPostsToRender[1];
-    ) {
-      if (!this._outerRef) {
-        return;
-      }
 
+      if (isChangedLocalOlderPostsToRender) {
         const element = this._outerRef;
         const previousScrollTop = element.scrollTop;
         const previousScrollHeight = element.scrollHeight;
@@ -364,15 +366,18 @@ export default class DynamicSizeList extends PureComponent<
           previousScrollHeight,
         };
       }
+    }
+
     return null;
   }
 
   componentDidUpdate(
     prevProps: DynamicSizeListProps,
     prevState: DynamicSizeListState,
-    snapshot: any
+    snapshot: DynamicSizeListSnapshot
   ) {
     if (this.state.scrolledToInitIndex) {
+      // 如果一定滚动到初始位置
       const {
         scrollDirection,
         scrollOffset,
@@ -432,6 +437,9 @@ export default class DynamicSizeList extends PureComponent<
       if (!this._outerRef) {
         return;
       }
+      if (!snapshot) {
+        return;
+      }
 
       const postlistScrollHeight = this._outerRef.scrollHeight;