当父组件因 TanStack Query 频繁重渲染时，子下拉组件（如 <select>）会因函数组件重新定义而强制卸载重挂载，导致下拉菜单自动收起。核心解法是将 memo() 包裹后的子组件提升至组件外部作用域，确保其引用稳定。
当父组件因 tanstack query 频繁重渲染时，子下拉组件（如 `
在 React 中，memo 的作用是跳过对 props 未变化的子组件的重新渲染，但它无法生效的前提是：子组件本身必须是同一个函数引用。而原代码中：
function LogData(props: Props) {
// ❌ 错误：每次 LogData 渲染都创建新组件实例
const MemoizedLogSelector = memo(LogSelector);
return <MemoizedLogSelector selectedUrlMemo={theUrl} />;
}MemoizedLogSelector 被定义在 LogData 函数体内，意味着每次 LogData 执行（即每秒一次的 query 刷新），都会生成一个全新的 memo() 封装函数——即使逻辑完全相同，其内存地址也不同。React 将其视为“类型变更”，从而触发旧组件 unmount + 新组件 mount，导致原生 <select> 失去焦点、下拉面板强制关闭。
✅ 正确做法是将 memo 应用于子组件定义本身，并将其声明提升到模块顶层（即组件外部），确保其在整个应用生命周期中保持唯一引用：
// ✅ 正确：LogSelector 经 memo 封装且只定义一次
const MemoizedLogSelector = memo(function LogSelector({
selectedUrlMemo,
}: {
selectedUrlMemo: {
selectedUrl: number;
setSelectedUrl: React.Dispatch<React.SetStateAction<number>>;
};
}) {
console.log("✅ LogSelector rendered (only when props change)");
return (
<TextSelectInput
label="Log Select:"
labelFontSize="body1"
labelPlacement="row"
onChange={(value: number) => selectedUrlMemo.setSelectedUrl(value)}
onClear={() => {}}
options={[
{ label: "Message1", value: 0 },
{ label: "Message2", value: 1 },
{ label: "Message3", value: 2 },
]}
value={selectedUrlMemo.selectedUrl}
/>
);
});
function LogData(props: Props) {
const [selectedUrl, setSelectedUrl] = useState<number>(0);
// ✅ useMemo 确保对象引用稳定（可选但推荐）
const selectedUrlMemo = useMemo(
() => ({ selectedUrl, setSelectedUrl }),
[selectedUrl]
);
const { status, error, data, fetchStatus } = usePeriodicQuery(
logUrl[selectedUrl],
updateIntervalMs,
"myQuery",
isEnabled.current
);
return (
<>
<MemoizedLogSelector selectedUrlMemo={selectedUrlMemo} />
<TableContainer component={Paper}>
{/* 表格内容 */}
</TableContainer>
</>
);
}? 关键要点总结：
- memo 不是“防重渲染万能药”，它依赖组件引用不变性；
- 子组件（尤其是含原生表单控件的）应始终作为独立、稳定的模块导出或定义；
- 若 LogSelector 本身需接收复杂 props，建议进一步用 useMemo 包裹 options 或 value 等易变对象，避免浅比较失效；
- 对于更复杂的交互场景（如需跨刷新保留展开状态），可考虑使用 useRef + focus() 手动恢复焦点，但本例中仅修正 memo 位置已足够解决问题。
通过这一重构，LogSelector 将仅在 selectedUrlMemo 的 selectedUrl 或 setSelectedUrl 发生实际变化时才更新，彻底杜绝因父组件高频刷新导致的下拉中断体验。
