♻️ refactor(StyleContext): modernize context architecture and eliminate route transition flicker
## Breaking Changes - Remove backward compatibility layer for old action types - StyleContext is no longer exported, use useStyle hook instead ## Major Improvements - **Architecture**: Replace useState with useReducer for complex state management - **Performance**: Add debounced resize handling and batch updates via BATCH_UPDATE action - **DX**: Export useStyle hook and styleActions for type-safe usage - **Memory**: Use useMemo to cache context value and prevent unnecessary re-renders ## Bug Fixes - **UI**: Eliminate padding flicker when navigating to /console/chat* and /console/playground routes - **Logic**: Remove redundant localStorage operations and state synchronization ## Implementation Details - Define ACTION_TYPES and ROUTE_PATTERNS constants for better maintainability - Add comprehensive JSDoc documentation for all functions - Extract custom hooks: useWindowResize, useRouteChange, useMobileSiderAutoHide - Calculate shouldInnerPadding directly in PageLayout based on pathname to prevent async updates - Integrate localStorage saving logic into SET_SIDER_COLLAPSED reducer case - Remove SET_INNER_PADDING action as it's no longer needed ## Updated Components - PageLayout.js: Direct padding calculation based on route - HeaderBar.js: Use new useStyle hook and styleActions - SiderBar.js: Remove redundant localStorage calls - LogsTable.js: Remove unused StyleContext import - Playground/index.js: Migrate to new API ## Performance Impact - Reduced component re-renders through optimized context structure - Eliminated unnecessary effect dependencies and state updates - Improved route transition smoothness with synchronous padding calculation
This commit is contained in:
@@ -1,21 +1,13 @@
|
||||
import React, { useContext, useEffect, useState, useRef } from 'react';
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import {
|
||||
Card,
|
||||
Col,
|
||||
Row,
|
||||
Form,
|
||||
Button,
|
||||
Typography,
|
||||
Space,
|
||||
RadioGroup,
|
||||
Radio,
|
||||
Modal,
|
||||
Banner,
|
||||
} from '@douyinfe/semi-ui';
|
||||
import { API, showError, showNotice, timestamp2string } from '../../helpers';
|
||||
import { StatusContext } from '../../context/Status';
|
||||
import { marked } from 'marked';
|
||||
import { StyleContext } from '../../context/Style/index.js';
|
||||
import { API, showError, showNotice } from '../../helpers';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
IconHelpCircle,
|
||||
@@ -24,9 +16,7 @@ import {
|
||||
} from '@douyinfe/semi-icons';
|
||||
|
||||
const Setup = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [statusState] = useContext(StatusContext);
|
||||
const [styleState, styleDispatch] = useContext(StyleContext);
|
||||
const { t } = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selfUseModeInfoVisible, setUsageModeInfoVisible] = useState(false);
|
||||
const [setupStatus, setSetupStatus] = useState({
|
||||
|
||||
Reference in New Issue
Block a user