fix: fix treeview would not render (#2945)

* Revert "chore: optimize treeview re-render (#2833)"

This reverts commit d988f14.

* chore: use local state

* chore: ci

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

@@ -9,7 +9,7 @@ import React, {
   useCallback,
   useEffect,
   useMemo,
-  useRef,
+  useState,
 } from 'react';
 
 import { Injector } from '@opensumi/di';
@@ -38,8 +38,6 @@ export interface ExtensionTabBarTreeViewProps {
 
 export const ExtensionTabBarTreeView = observer(
   ({ viewState, model, dataProvider, treeViewId }: PropsWithChildren<ExtensionTabBarTreeViewProps>) => {
-    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), []);
@@ -52,13 +50,6 @@ export const ExtensionTabBarTreeView = observer(
       return !state.collapsed && !state.hidden;
     }, [accordionService]);
 
-    useEffect(() => {
-      const disposable = dataProvider.onDidChangeEmpty(() => {
-        isEmpty.current = dataProvider.isTreeEmpty;
-      });
-      return () => disposable.dispose();
-    }, []);
-
     const { height } = viewState;
     const { canSelectMany } = model.treeViewOptions || {};
     const wrapperRef: RefObject<HTMLDivElement> = createRef();
@@ -185,23 +176,6 @@ export const ExtensionTabBarTreeView = observer(
       [model],
     );
 
-    useEffect(() => {
-      let unmouted = false;
-      (async () => {
-        await model.whenReady;
-        if (model.treeModel && isVisible) {
-          await model.treeModel.ensureReady;
-        }
-        if (!unmouted) {
-          isReady.current = true;
-        }
-      })();
-      return () => {
-        unmouted = true;
-        model && model.removeNodeDecoration();
-      };
-    }, [model, isVisible]);
-
     useEffect(() => {
       const handleBlur = () => {
         model.handleTreeBlur();
@@ -222,9 +196,8 @@ export const ExtensionTabBarTreeView = observer(
         data-tree-view-id={treeViewId}
       >
         <TreeView
-          isReady={isReady.current}
-          isEmpty={isEmpty.current}
           height={height}
+          isVisible={isVisible}
           handleTreeReady={handleTreeReady}
           handleItemClicked={handleItemClicked}
           handleTwistierClick={handleTwistierClick}
@@ -237,6 +210,7 @@ export const ExtensionTabBarTreeView = observer(
           draggable={model.draggable}
           treeViewId={treeViewId}
           model={model}
+          dataProvider={dataProvider}
           decorationService={decorationService}
         />
       </div>
@@ -245,10 +219,10 @@ export const ExtensionTabBarTreeView = observer(
 );
 
 interface TreeViewProps {
-  isReady: boolean;
-  isEmpty: boolean;
+  isVisible: boolean;
   height: number;
   treeViewId: string;
+  dataProvider: TreeViewDataProvider;
   model: ExtensionTreeViewModel;
   handleTreeReady(handle: IRecycleTreeHandle): void;
   handleItemClicked(ev: MouseEvent, item: ExtensionTreeNode | ExtensionCompositeTreeNode, type: TreeNodeType): void;
@@ -265,8 +239,7 @@ interface TreeViewProps {
 
 function isTreeViewPropsEqual(prevProps: TreeViewProps, nextProps: TreeViewProps) {
   return (
-    prevProps.isReady === nextProps.isReady &&
-    prevProps.isEmpty === nextProps.isEmpty &&
+    prevProps.isVisible === nextProps.isVisible &&
     prevProps.model === nextProps.model &&
     prevProps.treeViewId === nextProps.treeViewId &&
     prevProps.height === nextProps.height
@@ -275,11 +248,11 @@ function isTreeViewPropsEqual(prevProps: TreeViewProps, nextProps: TreeViewProps
 
 const TreeView = memo(
   ({
-    isReady,
-    isEmpty,
     model,
     treeViewId,
     height,
+    isVisible,
+    dataProvider,
     handleTreeReady,
     handleItemClicked,
     handleTwistierClick,
@@ -292,6 +265,35 @@ const TreeView = memo(
     draggable,
     decorationService,
   }: TreeViewProps) => {
+    const [isReady, setIsReady] = useState<boolean>(false);
+    const [isEmpty, setIsEmpty] = useState(false);
+
+    useEffect(() => {
+      let unmouted = false;
+      (async () => {
+        await model.whenReady;
+        if (model.treeModel && isVisible) {
+          await model.treeModel.ensureReady;
+        }
+        if (!unmouted) {
+          setIsReady(true);
+        }
+      })();
+      return () => {
+        unmouted = true;
+        model && model.removeNodeDecoration();
+      };
+    }, [model, isVisible]);
+
+    useEffect(() => {
+      const disposable = dataProvider.onDidChangeEmpty(() => {
+        if (dataProvider.isTreeEmpty !== isEmpty) {
+          setIsEmpty(dataProvider.isTreeEmpty);
+        }
+      });
+      return () => disposable.dispose();
+    }, []);
+
     const renderTreeNode = useCallback(
       (props: INodeRendererProps) => (
         <TreeViewNode

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 = useRef<boolean>(false);
-  const isLoading = useRef<boolean>(true);
+  const [isReady, setIsReady] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<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) => {
-        isLoading.current = true;
+        setIsLoading(true);
         if (treeModel) {
           // 确保数据初始化完毕，减少初始化数据过程中多次刷新视图
           await treeModel.ensureReady;
         }
-        isLoading.current = false;
         setModel(treeModel);
+        setIsLoading(false);
       });
     }
   }, [isReady]);
@@ -264,28 +264,27 @@ 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],
+    [fileTreeModelService, disposableRef.current],
   );
 
   const handleTreeReady = useCallback(
@@ -366,8 +365,8 @@ export const FileTree = ({ viewState }: PropsWithChildren<{ viewState: ViewState
       onDrop={handleOuterDrop}
     >
       <FileTreeView
-        isLoading={isLoading.current}
-        isReady={isReady.current}
+        isLoading={isLoading}
+        isReady={isReady}
         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, useRef, createRef, RefObject, useEffect, useCallback, memo } from 'react';
+import React, { FC, useState, 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 = useRef<boolean>(false);
+  const [isReady, setIsReady] = useState<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;
       }
-      isReady.current = true;
+      setIsReady(true);
     })();
   }, []);
 
@@ -142,7 +142,7 @@ export const SCMResourceTree: FC<{
       data-name={TREE_FIELD_NAME}
     >
       <SCMTreeView
-        isReady={isReady.current}
+        isReady={isReady}
         model={model}
         height={height}
         onTreeReady={handleTreeReady}