清理派生状态 Effect

UE-DND · UE-DND · commit 95351f96e00e · 2026-03-28T12:53:00.000+08:00
diff --git a/src/components/file/FileList.tsx b/src/components/file/FileList.tsx
@@ -64,13 +64,7 @@ const FileList = React.memo<FileListProps>(
     const [showAlphabetIndex, setShowAlphabetIndex] = React.useState(false);
     const [highlightedIndex, setHighlightedIndex] = React.useState<number | null>(null);
     const highlightTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
-
-    // 当预览状态变化时，自动关闭字母索引
-    React.useEffect(() => {
-      if (isPreviewActive) {
-        setShowAlphabetIndex(false);
-      }
-    }, [isPreviewActive]);
+    const visibleAlphabetIndex = showAlphabetIndex && !isPreviewActive;
 
     // 计算每个文件项的高度（包括间距）
     // 这个计算需要与 FileListItem 的实际高度保持一致
@@ -390,7 +384,7 @@ const FileList = React.memo<FileListProps>(
           <AlphabetIndex
             contents={contents}
             onScrollToIndex={handleScrollToIndex}
-            visible={showAlphabetIndex}
+            visible={visibleAlphabetIndex}
           />
         </Box>
       </Box>
diff --git a/src/components/interactions/SearchDrawer/hooks/useSearchDrawerInit.ts b/src/components/interactions/SearchDrawer/hooks/useSearchDrawerInit.ts
@@ -1,7 +1,6 @@
-import { useEffect, useRef } from "react";
+import { useCallback } from "react";
 
 interface UseSearchDrawerInitProps {
-  open: boolean;
   currentPath: string;
   search: {
     setKeyword: (value: string) => void;
@@ -19,44 +18,34 @@ const SEARCH_INPUT_ID = "repo-search-keyword";
 
 /**
  * 搜索抽屉初始化 Hook
- * 处理打开/关闭时的状态重置和自动填充逻辑
+ * 返回打开完成后的初始化处理函数
  */
 export const useSearchDrawerInit = ({
-  open,
   currentPath,
   search,
   setPathPrefix,
   setExtensionInput,
   setFiltersExpanded,
-}: UseSearchDrawerInitProps): void => {
-  const previousOpenRef = useRef(false);
-
-  useEffect(() => {
-    const wasOpen = previousOpenRef.current;
-
-    if (open && !wasOpen) {
-      // 初始化搜索索引（懒加载）
-      search.initializeIndex();
-
-      // 重置所有筛选条件
-      search.setKeyword("");
-      search.setBranchFilter([]);
-      search.setExtensionFilter([]);
-      setExtensionInput("");
-      search.clearResults();
-      setFiltersExpanded(false);
-
-      // 自动填充当前路径
-      const trimmedCurrentPath = currentPath.trim();
-      setPathPrefix(trimmedCurrentPath.length > 0 ? trimmedCurrentPath : "");
-
-      // 聚焦搜索框
-      setTimeout(() => {
-        const input = document.getElementById(SEARCH_INPUT_ID) as HTMLInputElement | null;
-        input?.focus();
-      }, 100);
-    }
-
-    previousOpenRef.current = open;
-  }, [open, currentPath, setPathPrefix, search, setExtensionInput, setFiltersExpanded]);
-};
+}: UseSearchDrawerInitProps): (() => void) =>
+  useCallback(() => {
+    // 初始化搜索索引（懒加载）
+    search.initializeIndex();
+
+    // 重置所有筛选条件
+    search.setKeyword("");
+    search.setBranchFilter([]);
+    search.setExtensionFilter([]);
+    setExtensionInput("");
+    search.clearResults();
+    setFiltersExpanded(false);
+
+    // 自动填充当前路径
+    const trimmedCurrentPath = currentPath.trim();
+    setPathPrefix(trimmedCurrentPath.length > 0 ? trimmedCurrentPath : "");
+
+    // 聚焦搜索框
+    setTimeout(() => {
+      const input = document.getElementById(SEARCH_INPUT_ID) as HTMLInputElement | null;
+      input?.focus();
+    }, 100);
+  }, [currentPath, search, setExtensionInput, setFiltersExpanded, setPathPrefix]);
diff --git a/src/components/interactions/SearchDrawer/index.tsx b/src/components/interactions/SearchDrawer/index.tsx
@@ -52,14 +52,7 @@ export const SearchDrawer: React.FC<SearchDrawerProps> = ({ open, onClose }) =>
   const { selectFile } = usePreviewContext();
 
   // 解构搜索相关状态
-  const {
-    branchFilter,
-    availableBranches,
-    indexStatus,
-    pathPrefix,
-    refreshIndexStatus,
-    setPathPrefix,
-  } = search;
+  const { branchFilter, availableBranches, indexStatus, pathPrefix, refreshIndexStatus } = search;
   const { enabled, loading, error, ready, indexedBranches, lastUpdatedAt } = indexStatus;
 
   // 使用自定义 hooks
@@ -80,11 +73,10 @@ export const SearchDrawer: React.FC<SearchDrawerProps> = ({ open, onClose }) =>
   });
 
   // 初始化逻辑
-  useSearchDrawerInit({
-    open,
+  const handleDialogEntered = useSearchDrawerInit({
     currentPath,
     search,
-    setPathPrefix,
+    setPathPrefix: search.setPathPrefix,
     setExtensionInput,
     setFiltersExpanded,
   });
@@ -163,6 +155,11 @@ export const SearchDrawer: React.FC<SearchDrawerProps> = ({ open, onClose }) =>
               m: isSmallScreen ? 2 : 3,
             },
           },
+          transition: {
+            onEntered: () => {
+              handleDialogEntered();
+            },
+          },
         }}
       >
         <DialogTitle
diff --git a/src/components/layout/ToolbarButtons.tsx b/src/components/layout/ToolbarButtons.tsx
@@ -92,14 +92,8 @@ const ToolbarButtons: React.FC<ToolbarButtonsProps> = ({
   const storedRefreshStateRef = useRef<RefreshSessionState | null>(null);
   const branchValueRef = useRef(currentBranch);
   const pathValueRef = useRef(currentPath);
-
-  useEffect(() => {
-    branchValueRef.current = currentBranch;
-  }, [currentBranch]);
-
-  useEffect(() => {
-    pathValueRef.current = currentPath;
-  }, [currentPath]);
+  branchValueRef.current = currentBranch;
+  pathValueRef.current = currentPath;
 
   const buildRefreshSessionState = useCallback(
     (): RefreshSessionState => ({
diff --git a/src/hooks/github/useBranchManagement.ts b/src/hooks/github/useBranchManagement.ts
@@ -32,10 +32,7 @@ export function useBranchManagement(): BranchManagementState {
   const [branchError, setBranchError] = useState<string | null>(null);
 
   const currentBranchRef = useRef<string>(currentBranch);
-
-  useEffect(() => {
-    currentBranchRef.current = currentBranch;
-  }, [currentBranch]);
+  currentBranchRef.current = currentBranch;
 
   const mergeBranchList = useCallback((branchesToMerge: string[]) => {
     setBranches((prev) => {
diff --git a/src/hooks/github/useContentLoading.ts b/src/hooks/github/useContentLoading.ts
@@ -39,14 +39,6 @@ export function useContentLoading(path: string, branch: string): ContentLoadingS
   const forceRefreshRef = useRef<boolean>(false);
   const revalidateKeyRef = useRef<string | null>(null);
 
-  useEffect(() => {
-    currentPathRef.current = path;
-  }, [path]);
-
-  useEffect(() => {
-    currentBranchRef.current = branch;
-  }, [branch]);
-
   const buildContentsSignature = useCallback((data: GitHubContent[]): string => {
     if (data.length === 0) {
       return "";
@@ -55,10 +47,10 @@ export function useContentLoading(path: string, branch: string): ContentLoadingS
     return data.map((item) => `${item.path}:${item.sha}:${item.type}`).join("|");
   }, []);
 
-  useEffect(() => {
-    contentsRef.current = contents;
-    lastSignatureRef.current = buildContentsSignature(contents);
-  }, [contents, buildContentsSignature]);
+  currentPathRef.current = path;
+  currentBranchRef.current = branch;
+  contentsRef.current = contents;
+  lastSignatureRef.current = buildContentsSignature(contents);
 
   const displayError = useCallback((message: string) => {
     setError(message);
diff --git a/src/hooks/github/usePathManagement.ts b/src/hooks/github/usePathManagement.ts
@@ -61,14 +61,8 @@ export function usePathManagement(branch: string): PathManagementState {
   const currentBranchRef = useRef<string>(branch);
   const isRefreshInProgressRef = useRef(false);
   const refreshTargetPathRef = useRef<string | null>(null);
-
-  useEffect(() => {
-    currentPathRef.current = currentPath;
-  }, [currentPath]);
-
-  useEffect(() => {
-    currentBranchRef.current = branch;
-  }, [branch]);
+  currentPathRef.current = currentPath;
+  currentBranchRef.current = branch;
 
   const setCurrentPath = useCallback((path: string, direction: NavigationDirection = "none") => {
     if (isRefreshInProgressRef.current && refreshTargetPathRef.current !== null) {
diff --git a/src/hooks/github/useReadmeContent.ts b/src/hooks/github/useReadmeContent.ts
@@ -36,17 +36,18 @@ export function useReadmeContent(
   const readmeRequestControllerRef = useRef<AbortController | null>(null);
   const readmeRequestIdRef = useRef<number>(0);
 
+  currentPathRef.current = currentPath;
+  loadingReadmeRef.current = loadingReadme;
+  readmeLoadedRef.current = readmeLoaded;
+  readmeContentRef.current = readmeContent;
+
   const cancelActiveReadmeRequest = useCallback(() => {
     if (readmeRequestControllerRef.current !== null) {
       readmeRequestControllerRef.current.abort();
       readmeRequestControllerRef.current = null;
     }
   }, []);
 
-  useEffect(() => {
-    currentPathRef.current = currentPath;
-  }, [currentPath]);
-
   useEffect(() => {
     if (currentBranchRef.current !== currentBranch) {
       cancelActiveReadmeRequest();
@@ -183,19 +184,6 @@ export function useReadmeContent(
     }
   }, [cancelActiveReadmeRequest, contents, currentBranch, loadReadmeContent]);
 
-  // 同步加载状态到 ref，避免将其加入主 effect 依赖
-  useEffect(() => {
-    loadingReadmeRef.current = loadingReadme;
-  }, [loadingReadme]);
-
-  useEffect(() => {
-    readmeLoadedRef.current = readmeLoaded;
-  }, [readmeLoaded]);
-
-  useEffect(() => {
-    readmeContentRef.current = readmeContent;
-  }, [readmeContent]);
-
   return {
     readmeContent,
     loadingReadme,
diff --git a/src/hooks/github/useRepoSearch/useRepoSearch.ts b/src/hooks/github/useRepoSearch/useRepoSearch.ts
diff --git a/src/hooks/github/useRepoSearch/utils.test.ts b/src/hooks/github/useRepoSearch/utils.test.ts
diff --git a/src/hooks/github/useRepoSearch/utils.ts b/src/hooks/github/useRepoSearch/utils.ts
