Headless UI 中 StrictMode 下嵌套对话框的关闭问题解析

问题背景

在使用 Headless UI 构建 React 应用时，开发者可能会遇到一个特定场景下的对话框交互问题：当应用在 React 的 StrictMode 下运行，并且初始渲染时就显示第一个对话框时，后续打开的第二个对话框会出现交互异常。

问题表现

具体表现为：

1. 应用启动时第一个对话框默认打开
2. 用户点击按钮打开第二个对话框
3. 尝试在第二个对话框中编辑输入字段时无法操作
4. 点击第二个对话框的标题时，错误的关闭了第二个对话框而非第一个

技术分析

这个问题本质上与 React 的生命周期管理和 Headless UI 的对话框状态管理有关。在 StrictMode 下，React 会故意双重调用某些生命周期方法和 hooks，以帮助开发者发现潜在问题。

当第一个对话框在组件挂载时就处于打开状态时，Headless UI 的内部状态管理可能会与 StrictMode 的双重渲染行为产生冲突，导致对话框的焦点管理和关闭逻辑出现异常。

解决方案

Headless UI 团队在最新版本中已经修复了这个问题。开发者可以通过以下方式解决：

1. 升级到最新版本的 Headless UI
2. 如果暂时无法升级，可以采用以下临时解决方案：
   • 使用 requestAnimationFrame 延迟对话框的打开
   • 在开发环境中暂时禁用 StrictMode（不推荐长期方案）

最佳实践

对于需要处理多个对话框的场景，建议：

1. 尽量避免在组件挂载时立即显示对话框
2. 如果必须初始显示，考虑使用 useEffect 配合状态管理
3. 对于复杂的对话框交互，确保测试覆盖 StrictMode 下的行为
4. 保持 Headless UI 库的及时更新

总结

这个问题展示了 React 的 StrictMode 如何帮助开发者发现潜在的副作用问题。Headless UI 团队积极响应并修复了这个问题，体现了该库对 React 最新特性的良好支持。开发者在使用时应当注意库版本的更新，并充分理解 StrictMode 对应用行为的影响。