Преглед изворни кода

perf (1.57.1 -> 1.57.2): 优化登录初始化流程,避免重复请求后端

- 在 AppInitializer 中使用 useRef 跟踪 userInfo 变化,防止不必要的重新初始化
- 在 Index 页面使用 useCallback 优化 handleInitialized 回调函数
- 添加调试日志用于监控组件渲染和状态变化
- 通过函数引用稳定性优化,减少子组件不必要的重渲染

改动文件:
- src/pages/index/AppInitializer.tsx
- src/pages/index/index.tsx
dengdx пре 6 дана
родитељ
комит
01ef52f201
4 измењених фајлова са 28 додато и 5 уклоњено
  1. 15 0
      CHANGELOG.md
  2. 1 1
      package.json
  3. 6 2
      src/pages/index/AppInitializer.tsx
  4. 6 2
      src/pages/index/index.tsx

+ 15 - 0
CHANGELOG.md

@@ -3,6 +3,21 @@
 本项目的所有重要变更都将记录在此文件中.
 
 
+## [1.57.2] - 2026-01-07 10:24
+
+### 优化 (Optimized)
+
+- **优化登录初始化流程,避免重复请求后端** - 通过函数引用稳定性和状态跟踪减少不必要的后端请求
+  - 在 AppInitializer 中使用 useRef 跟踪 userInfo 变化,防止不必要的重新初始化
+  - 在 Index 页面使用 useCallback 优化 handleInitialized 回调函数
+  - 添加调试日志用于监控组件渲染和状态变化
+  - 通过函数引用稳定性优化,减少子组件不必要的重渲染
+
+**改动文件:**
+
+- src/pages/index/AppInitializer.tsx
+- src/pages/index/index.tsx
+
 ## [1.57.1] - 2026-01-06 19:45
 
 ### 修复 (Fixed)

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "zsis",
-  "version": "1.57.1",
+  "version": "1.57.2",
   "private": true,
   "description": "医学成像系统",
   "main": "main.js",

+ 6 - 2
src/pages/index/AppInitializer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { getPatientTypes } from '@/states/patientTypeSlice';
 import { getBodyParts } from '@/states/bodyPartSlice';
@@ -6,6 +6,7 @@ import { initializeProductState } from '@/states/productSlice';
 import { fetchRisConfigThunk } from '@/states/ris/risSyncSlice';
 import { versionUpdateService } from '@/services/VersionUpdateService';
 import type { RootState, AppDispatch } from '@/states/store';
+import { UserInfoState } from '@/states/user_info';
 
 interface AppInitializerProps {
   onInitialized: () => void;
@@ -14,8 +15,11 @@ interface AppInitializerProps {
 const AppInitializer: React.FC<AppInitializerProps> = ({ onInitialized }) => {
   const dispatch = useDispatch<AppDispatch>();
   const userInfo = useSelector((state: RootState) => state.userInfo);
-
+  const prev = useRef<UserInfoState>();
+  console.log('[AppInitializer] 组件渲染');
   useEffect(() => {
+    console.log('userInfo changed:', prev.current !== userInfo);
+    prev.current = userInfo;
     const fetchData = async () => {
       if (userInfo && userInfo.token) {
         // 首先执行版本检查

+ 6 - 2
src/pages/index/index.tsx

@@ -14,6 +14,7 @@ import { versionUpdateService } from '@/services/VersionUpdateService';
 import VersionUpdateModal from '@/components/VersionUpdateModal';
 import DownloadProgressModal from '@/components/DownloadProgressModal';
 
+
 const AppContent: React.FC = () => {
   const [initialized, setInitialized] = React.useState(false);
   const userInfo = useSelector((state: RootState) => state.userInfo);
@@ -26,7 +27,9 @@ const AppContent: React.FC = () => {
   const { status: updateStatus, versionInfo } = useSelector(
     (state: RootState) => state.versionUpdate
   );
-
+  const handleInitialized = React.useCallback(() => {
+    setInitialized(true);
+  }, []);
   // 当有新版本且状态为available时显示更新提示
   React.useEffect(() => {
     if (updateStatus === 'available' && versionInfo?.new_version_available) {
@@ -66,7 +69,7 @@ const AppContent: React.FC = () => {
   }
 
   if (!initialized) {
-    return <AppInitializer onInitialized={() => setInitialized(true)} />;
+    return <AppInitializer onInitialized={handleInitialized} />;
   }
 
   return (
@@ -91,6 +94,7 @@ const AppContent: React.FC = () => {
 };
 
 export default function Index() {
+  console.log('Index 页面渲染');
   useLoad(() => {
     console.log('Page loaded.');
   });