From 01f20ae4c31df6fd689388970e19e6e62c4f6665 Mon Sep 17 00:00:00 2001 From: intfoo Date: Mon, 3 Aug 2026 16:12:49 +0800 Subject: [PATCH] =?UTF-8?q?style(ListColumnCustomizer):=20=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3=20ref=20=E9=95=9C=E5=83=8F=E6=B3=A8=E9=87=8A=20+=20ex?= =?UTF-8?q?tTables=20=E7=A9=BA=E6=95=B0=E7=BB=84=E5=B8=B8=E9=87=8F?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit code review P3 反馈修正: 1) 注释原写"8个useCallback空依赖"不准确(addExtColumn依赖extColumnAlign), 改为"多数空依赖并注明例外"; 2) 注释原提"memo失效"但SortableActiveCol未memo, 改为"子组件无谓重渲染"; 3) extTables的`?? []`每次创建新空数组导致useMemo失效, 改用模块级EMPTY_EXT_TABLES常量。另: P3-4同类backdrop-blur排查StockPreviewDialog/TradeKlineModal均为居中弹窗(面板不透明覆盖中心, blur只影响边缘, K线不持续刷新), 影响远小于信息条抽屉, 不修改。 --- frontend/src/components/ListColumnCustomizer.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/ListColumnCustomizer.tsx b/frontend/src/components/ListColumnCustomizer.tsx index 5eb25aa..e672dc0 100644 --- a/frontend/src/components/ListColumnCustomizer.tsx +++ b/frontend/src/components/ListColumnCustomizer.tsx @@ -61,6 +61,9 @@ function isNumericFieldType(ft?: string): boolean { return true } +/** 模块级空数组常量：extSchema 未加载时用，避免 `?? []` 每次创建新引用导致 useMemo 失效。 */ +const EMPTY_EXT_TABLES: readonly { id: string; label: string; mode: string; columns: { name: string; label: string; type: string }[] }[] = [] + function SortableActiveCol({ col, onRemove, onConfig, configOpen, extTableLabel, extConfig, candleConfig: candlePanel, intradayConfig: intradayPanel, strategiesConfig, showStandaloneToggle, onToggleStandalone }: { col: ColumnConfig onRemove: (id: string) => void @@ -166,8 +169,9 @@ export function ListColumnCustomizer({ }) const backdrop = useDialogBackdrop(onClose) - // columns/onChange 用 ref 镜像，让下方 8 个 useCallback 空依赖， - // 避免 columns 每次变更都重建 callback 导致 SortableActiveCol 等 memo 失效。 + // columns/onChange 用 ref 镜像，让下方多数 useCallback 空依赖（addExtColumn 例外， + // 依赖 props.extColumnAlign）。callback 引用稳定后，columns 变更不再导致 + // SortableActiveCol 等子组件因 props 变化而无谓重渲染。 const columnsRef = useRef(columns) columnsRef.current = columns const onChangeRef = useRef(onChange) @@ -320,7 +324,7 @@ export function ListColumnCustomizer({ }) }, []) - const extTables = extSchema.data?.items ?? [] + const extTables = extSchema.data?.items ?? EMPTY_EXT_TABLES const extTableLabelMap = useMemo(() => new Map(extTables.map(t => [t.id, t.label])), [extTables]) const query = searchQuery.trim().toLowerCase()