chore: optimize treeview re-render

packages/extension/src/browser/components/extension-tree-view.tsx

@@ -9,7 +9,7 @@ import React, {
   useCallback,
   useEffect,
   useMemo,
-  useState,
+  useRef,
 } from 'react';
 
 import { Injector } from '@opensumi/di';
@@ -38,8 +38,8 @@ export interface ExtensionTabBarTreeViewProps {
 
 export const ExtensionTabBarTreeView = observer(
   ({ viewState, model, dataProvider, treeViewId }: PropsWithChildren<ExtensionTabBarTreeViewProps>) => {
-    const [isReady, setIsReady] = useState<boolean>(false);
-    const [isEmpty, setIsEmpty] = useState(dataProvider.isTreeEmpty);
+    const isReady = useRef<boolean>(false);
+    const isEmpty = useRef<boolean>(dataProvider.isTreeEmpty);
     const layoutService = useInjectable<IMainLayoutService>(IMainLayoutService);
     const decorationService = useInjectable<IDecorationsService>(IDecorationsService);
     const accordionService = useMemo(() => layoutService.getViewAccordionService(treeViewId), []);
@@ -54,7 +54,7 @@ export const ExtensionTabBarTreeView = observer(
 
     useEffect(() => {
       const disposable = dataProvider.onDidChangeEmpty(() => {
-        setIsEmpty(dataProvider.isTreeEmpty);
+        isEmpty.current = dataProvider.isTreeEmpty;
       });
       return () => disposable.dispose();
     }, []);
@@ -193,7 +193,7 @@ export const ExtensionTabBarTreeView = observer(
           await model.treeModel.ensureReady;
         }
         if (!unmouted) {
-          setIsReady(true);
+          isReady.current = true;
         }
       })();
       return () => {
@@ -222,8 +222,8 @@ export const ExtensionTabBarTreeView = observer(
         data-tree-view-id={treeViewId}
       >
         <TreeView
-          isReady={isReady}
-          isEmpty={isEmpty}
+          isReady={isReady.current}
+          isEmpty={isEmpty.current}
           height={height}
           handleTreeReady={handleTreeReady}
           handleItemClicked={handleItemClicked}

packages/file-tree-next/src/browser/file-tree.tsx

@@ -46,8 +46,8 @@ export const FILE_TREE_FILTER_DELAY = 500;
 const FilterableRecycleTree = RecycleTreeFilterDecorator(RecycleTree);
 
 export const FileTree = ({ viewState }: PropsWithChildren<{ viewState: ViewState }>) => {
-  const [isReady, setIsReady] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const isReady = useRef<boolean>(false);
+  const isLoading = useRef<boolean>(true);
   const [outerActive, setOuterActive] = useState<boolean>(false);
   const [outerDragOver, setOuterDragOver] = useState<boolean>(false);
   const [model, setModel] = useState<TreeModel>();
@@ -142,13 +142,13 @@ export const FileTree = ({ viewState }: PropsWithChildren<{ viewState: ViewState
       // 首次初始化完成时，监听后续变化，适配工作区变化事件
       // 监听工作区变化
       fileTreeModelService.onFileTreeModelChange(async (treeModel) => {
-        setIsLoading(true);
+        isLoading.current = true;
         if (treeModel) {
           // 确保数据初始化完毕，减少初始化数据过程中多次刷新视图
           await treeModel.ensureReady;
         }
+        isLoading.current = false;
         setModel(treeModel);
-        setIsLoading(false);
       });
     }
   }, [isReady]);
@@ -264,27 +264,28 @@ export const FileTree = ({ viewState }: PropsWithChildren<{ viewState: ViewState
 
   const ensureIsReady = useCallback(
     async (token: CancellationToken) => {
+      isReady.current = false;
       await fileTreeModelService.whenReady;
       if (token.isCancellationRequested) {
         return;
       }
+      // 文件服务已经初始化完毕，但文件树数据仍需要加载
+      isReady.current = true;
       if (fileTreeModelService.treeModel) {
         // 确保数据初始化完毕，减少初始化数据过程中多次刷新视图
         await fileTreeModelService.treeModel.ensureReady;
-        setModel(fileTreeModelService.treeModel);
         if (token.isCancellationRequested) {
           return;
         }
+        setModel(fileTreeModelService.treeModel);
+        // 文件树数据加载完毕
+        isLoading.current = false;
         if (wrapperRef.current) {
           fileTreeService.initContextKey(wrapperRef.current);
         }
       }
-      setIsLoading(false);
-      if (!disposableRef.current?.disposed) {
-        setIsReady(true);
-      }
     },
-    [fileTreeModelService, disposableRef.current],
+    [fileTreeModelService],
   );
 
   const handleTreeReady = useCallback(
@@ -365,8 +366,8 @@ export const FileTree = ({ viewState }: PropsWithChildren<{ viewState: ViewState
       onDrop={handleOuterDrop}
     >
       <FileTreeView
-        isLoading={isLoading}
-        isReady={isReady}
+        isLoading={isLoading.current}
+        isReady={isReady.current}
         height={height}
         model={model}
         iconTheme={iconTheme}

packages/scm/src/browser/components/scm-resource-tree/index.tsx

@@ -1,6 +1,6 @@
 import clx from 'classnames';
 import { observer } from 'mobx-react-lite';
-import React, { FC, useState, createRef, RefObject, useEffect, useCallback, memo } from 'react';
+import React, { FC, useState, useRef, createRef, RefObject, useEffect, useCallback, memo } from 'react';
 
 import { RecycleTree, IRecycleTreeHandle, TreeNodeType, TreeModel } from '@opensumi/ide-components';
 import { isOSX } from '@opensumi/ide-core-browser';
@@ -20,7 +20,7 @@ export const SCMResourceTree: FC<{
   width: number;
   height: number;
 }> = observer(({ height }) => {
-  const [isReady, setIsReady] = useState<boolean>(false);
+  const isReady = useRef<boolean>(false);
   const [model, setModel] = useState<TreeModel>();
 
   const wrapperRef: RefObject<HTMLDivElement> = createRef();
@@ -39,7 +39,7 @@ export const SCMResourceTree: FC<{
         // 这里需要重新取一下treeModel的值确保为最新的TreeModel
         await scmTreeModelService.treeModel.ensureReady;
       }
-      setIsReady(true);
+      isReady.current = true;
     })();
   }, []);
 
@@ -142,7 +142,7 @@ export const SCMResourceTree: FC<{
       data-name={TREE_FIELD_NAME}
     >
       <SCMTreeView
-        isReady={isReady}
+        isReady={isReady.current}
         model={model}
         height={height}
         onTreeReady={handleTreeReady}