style(ListColumnCustomizer): 修正 ref 镜像注释 + extTables 空数组常量化

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线不持续刷新), 影响远小于信息条抽屉, 不修改。
This commit is contained in:
intfoo
2026-08-03 16:12:49 +08:00
parent 51192321b2
commit 01f20ae4c3
@@ -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()