perf(playground): optimize config loading and saving to reduce console spam

- Cache initial config using useRef to prevent repeated loadConfig() calls
- Fix useEffect dependencies to only trigger on actual config changes
- Modify debouncedSaveConfig dependency from function reference to actual config values
- Update handleConfigReset to use DEFAULT_CONFIG directly instead of reloading
- Prevent excessive console logging during chat interactions and frequent re-renders

This resolves the issue where console was flooded with:
"配置已从本地存储加载" and "配置已保存到本地存储" messages,
especially during active chat sessions where logs appeared every second.

Fixes: Frequent config load/save operations causing performance issues
This commit is contained in:
Apple\Apple
2025-05-30 22:29:02 +08:00
parent 4ae8bf2f71
commit b548c6c827
3 changed files with 26 additions and 21 deletions

View File

@@ -1,9 +1,14 @@
import { useState, useCallback, useRef } from 'react';
import { useState, useCallback, useRef, useEffect } from 'react';
import { DEFAULT_MESSAGES, DEFAULT_CONFIG, DEBUG_TABS } from '../utils/constants';
import { loadConfig, saveConfig } from '../components/playground/configStorage';
export const usePlaygroundState = () => {
const savedConfig = loadConfig();
// 使用 ref 缓存初始配置,只加载一次
const initialConfigRef = useRef(null);
if (!initialConfigRef.current) {
initialConfigRef.current = loadConfig();
}
const savedConfig = initialConfigRef.current;
// 基础配置状态
const [inputs, setInputs] = useState(savedConfig.inputs || DEFAULT_CONFIG.inputs);
@@ -92,11 +97,10 @@ export const usePlaygroundState = () => {
}, []);
const handleConfigReset = useCallback(() => {
const defaultConfig = loadConfig();
setInputs(defaultConfig.inputs);
setParameterEnabled(defaultConfig.parameterEnabled);
setSystemPrompt(defaultConfig.systemPrompt);
setShowDebugPanel(defaultConfig.showDebugPanel);
setInputs(DEFAULT_CONFIG.inputs);
setParameterEnabled(DEFAULT_CONFIG.parameterEnabled);
setSystemPrompt(DEFAULT_CONFIG.systemPrompt);
setShowDebugPanel(DEFAULT_CONFIG.showDebugPanel);
}, []);
return {