chore: fix warnings and remove some useless code (#2795)

Author: erha19

packages/components/src/recycle-list/RecycleList.tsx

@@ -269,7 +269,7 @@ export const RecycleList: React.FC<IRecycleListProps> = ({
     };
     useEffect(() => {
       if (rowRoot.current && listRef.current) {
-        observer.current = new MutationObserver((mutations, observer) => {
+        observer.current = new MutationObserver(() => {
           setItemSize();
         });
         const observerOption = {

packages/components/src/recycle-tree/RecycleTree.tsx

@@ -1,6 +1,6 @@
 import fuzzy from 'fuzzy';
-import React, { useEffect, createRef } from 'react';
-import { FixedSizeList, VariableSizeList, shouldComponentUpdate, ListProps } from 'react-window';
+import React, { useEffect, createRef, useMemo } from 'react';
+import { FixedSizeList, VariableSizeList, ListProps } from 'react-window';
 
 import {
   DisposableCollection,
@@ -900,24 +900,28 @@ export class RecycleTree extends React.Component<IRecycleTreeProps> {
       }
     }, []);
 
-    const setSize = supportDynamicHeights
-      ? () => {
-          let size = 0;
-          if (wrapRef.current) {
-            const ref = wrapRef.current;
-            size = Array.from(ref.children).reduce(
-              (pre, cur: HTMLElement) => pre + cur.getBoundingClientRect().height,
-              0,
-            );
-          }
-          if (size) {
-            this.dynamicSizeMap.set(index, size);
-            this.layoutItem();
-          }
-
-          return Math.max(size, RecycleTree.DEFAULT_ITEM_HEIGHT);
-        }
-      : () => {};
+    const setSize = useMemo(
+      () =>
+        supportDynamicHeights
+          ? () => {
+              let size = 0;
+              if (wrapRef.current) {
+                const ref = wrapRef.current;
+                size = Array.from(ref.children).reduce(
+                  (pre, cur: HTMLElement) => pre + cur.getBoundingClientRect().height,
+                  0,
+                );
+              }
+              if (size) {
+                this.dynamicSizeMap.set(index, size);
+                this.layoutItem();
+              }
+
+              return Math.max(size, RecycleTree.DEFAULT_ITEM_HEIGHT);
+            }
+          : () => {},
+      [supportDynamicHeights],
+    );
 
     const itemStyle = overflow === 'ellipsis' ? style : { ...style, width: 'auto', minWidth: '100%' };
 
@@ -930,7 +934,6 @@ export class RecycleTree extends React.Component<IRecycleTreeProps> {
           template={template}
           hasPrompt={!!this.promptHandle && !this.promptHandle.destroyed}
           expanded={CompositeTreeNode.is(item) ? (item as CompositeTreeNode).expanded : void 0}
-          setSize={setSize}
         >
           {children as INodeRenderer}
         </NodeRendererWrap>
@@ -942,7 +945,6 @@ export class RecycleTree extends React.Component<IRecycleTreeProps> {
     if (!this.props.supportDynamicHeights) {
       return;
     }
-    // (this.listRef?.current as VariableSizeList<any>).resetAfterIndex(0);
     // eslint-disable-next-line no-unsafe-optional-chaining
     if (this.listRef && this.listRef?.current && '_getRangeToRender' in this.listRef?.current) {
       // _getRangeToRender 是 react-window 的内部方法，用于获取可视区域的下标范围

packages/components/src/recycle-tree/TreeNodeRendererWrap.ts

@@ -39,7 +39,6 @@ export interface INodeRendererWrapProps {
   depth: number;
   expanded?: boolean;
   hasPrompt?: boolean;
-  setSize: () => void;
   children: INodeRenderer;
 }
 

packages/extension-manager/src/browser/vsx-extension.view.tsx

@@ -71,11 +71,11 @@ export const VSXExtensionView = observer(() => {
       {activeKey === TabActiveKey.MARKETPLACE && (
         <div className={styles.extensions_view}>
           <Progress loading={loading} />
-          {vsxExtensionService.extensions.map((e) => (
+          {vsxExtensionService.extensions.map((e: VSXExtension, index: number) => (
             <Extension
+              key={`${index}:${e.namespace}-${e.name}`}
               onClick={onClick}
               onInstall={onInstall}
-              key={`${e.namespace}-${e.name}`}
               extension={e}
               type={ExtensionViewType.MARKETPLACE}
               installedExtensions={vsxExtensionService.installedExtensions}
@@ -86,11 +86,11 @@ export const VSXExtensionView = observer(() => {
       )}
       {activeKey === TabActiveKey.INSTALLED && (
         <div className={styles.extensions_view}>
-          {vsxExtensionService.installedExtensions.map((e) => (
+          {vsxExtensionService.installedExtensions.map((e: VSXExtension, index: number) => (
             <Extension
+              key={`${index}:${e.namespace}-${e.name}`}
               onClick={onClick}
               onInstall={onInstall}
-              key={`${e.namespace}-${e.name}`}
               extension={e}
               type={ExtensionViewType.INSTALLED}
               openVSXRegistry={vsxExtensionService.openVSXRegistry}