跳转到主内容
websoft网络软件专家 - 深耕网络技术,打造实用软件!

如何防止父组件刷新时子组件下拉菜单意外关闭

当父组件因 tanstack query 频繁重渲染时,内联定义的 memo 包裹子组件会不断创建新函数引用,导致 dom 重新挂载、下拉菜单强制收起;正确做法是将 memo 包装提升至组件外部顶层作用域,确保组件类型稳定。 当父组件因 tanstack query 频繁重渲染时,内联定义的 memo 包裹子组件会不断创建新函数引用,导致 dom 重新挂载、下拉菜单强制收起;正确做法是将 memo 包装提升至组件外部顶层作用域,确保组件类型稳定。 在 React 中,memo 的核心作用是 对组件进行浅层 props 比较,避免不必要的重渲染 ——但它生效的前提是:该 memoized 组件必须是 同一个函数引用(same identity) 。一旦每次父组件渲染都重新声明 const MemoizedLogSelector = memo(LogSelector),React 就会认为这是一个全新的组件类型,从而触发卸载(unmount)→ 重建(remount)流程。而原生 的打开状态)。这是 React 函数组件中 memo 使用的经典陷阱,也是性能与体验优化的关键实践。

相关文章