深入理解ant-design/pro-components中ModalForm的onOpenChange触发机制

问题现象分析

在使用ant-design/pro-components的ModalForm组件时，开发者可能会遇到一个看似奇怪的现象：当同时使用open和onOpenChange控制ModalForm的开关状态时，打开操作会触发两次onOpenChange回调，而关闭操作则只触发一次。这种现象在表单对话框的开发中可能会引起一些意外的副作用。

问题根源探究

经过深入分析，这种现象的根本原因在于ModalForm组件的控制流设计。当开发者同时使用了open属性和trigger属性来控制弹窗时，实际上创建了两个可能触发状态变化的路径：

1. 通过trigger元素（如按钮）的点击事件触发
2. 通过open属性的变化触发

当用户点击trigger元素时，组件内部会首先触发一次onOpenChange回调，然后在回调中开发者通常会调用setOpen来更新状态。这个状态更新又会触发第二次onOpenChange回调，因为open属性发生了变化。

解决方案

针对这个问题，社区提出了几种有效的解决方案：

方案一：状态变化判断

在onOpenChange回调中添加状态判断逻辑，只有当实际状态发生变化时才执行相关操作：

const [open, setOpen] = useState(false);

const onOpenChange = (isOpen: boolean) => {
  setOpen(isOpen);
  if (isOpen && !open) {
    // 仅在真正打开时执行的逻辑
  }
}

这种方法简单有效，通过比较新旧状态值来避免重复执行。

方案二：统一控制方式

更彻底的解决方案是统一控制方式，避免同时使用open和trigger两种控制机制。可以选择：

1. 完全通过open属性控制，不使用trigger
2. 或者完全通过trigger控制，不使用open属性

这样可以避免控制流的冲突，从根本上解决问题。

最佳实践建议

在实际开发中，建议遵循以下原则：

1. 对于简单的弹窗场景，优先使用trigger方式，让组件内部管理状态
2. 对于需要精确控制的复杂场景，使用open属性方式，但避免同时使用trigger
3. 在onOpenChange回调中总是考虑状态变化的幂等性，确保逻辑可以安全地多次执行
4. 对于需要在弹窗打开时执行的初始化逻辑，考虑使用modalProps中的afterOpenChange回调

组件设计思考

从组件设计的角度来看，这种现象实际上反映了状态管理的边界问题。优秀的组件设计应该明确区分"受控"和"非受控"模式，并清晰地定义每种模式下的行为预期。ant-design/pro-components在这方面提供了灵活性，但也要求开发者理解其内部机制。

理解这些底层机制不仅能帮助我们解决眼前的问题，还能在遇到类似组件时快速定位问题本质，提高开发效率。