React可复用模态框两种实现方案：选型与技术疑问

哪种方案符合React的推荐实践？ #

React的核心思想是声明式编程，从这个角度看，方案1（父组件管理可见性状态）更贴合官方推荐的实践。这种模式下数据流清晰可追踪：父组件的showModal状态直接决定Modal是否渲染，所有状态变化都通过props传递，符合React单向数据流的设计原则。

但方案2（组件自身管理状态+暴露命令式方法）并非完全不可取，它的优势在于能减少父组件的状态冗余，尤其当页面存在多个独立Modal时，避免父组件被大量showModal1、showModal2这类状态变量污染。

具体选择要分场景：

• 如果Modal的显示/隐藏和父组件的业务逻辑强绑定（比如表单校验通过后弹窗、列表项点击后展示详情），优先用方案1，状态变化更可控；
• 如果是通用型、独立的Modal（比如全局提示弹窗、通用确认框），可以用方案2，让组件封装性更强。

两种方案是否存在性能差异？ #

两种方案的性能差异几乎可以忽略不计，不会对常规业务场景产生影响：

• 方案1中，父组件的showModal状态更新会触发父组件重渲染，但Modal只有在showModal为true时才会被渲染，额外开销很小；
• 方案2中，父组件调用ref的命令式方法不会触发父组件重渲染，只有Modal内部状态变化时才会触发自身重渲染，理论上在多Modal场景下略省一点性能，但实际感知不到。

除非你在页面中同时操作成百上千个Modal，否则不需要纠结性能差异。

使用refs实现是否存在潜在的Bug风险？ #

是的，方案2的命令式写法存在几个潜在风险：

1. ref.current为空的风险：如果Modal还未完成挂载、已经被卸载，或者在React并发模式下渲染被中断，调用modal.current.toggle()这类方法会抛出Cannot read properties of null的错误，必须在调用前加判断：

   <button onClick={() => modal.current?.toggle()}>Toggle Modal</button>
   

2. 状态变化不可追踪：Modal的可见性状态完全由自身管理，父组件无法直接感知状态变化。比如需要在Modal关闭后执行清理操作，方案1可以通过useEffect监听showModal状态，方案2则需要Modal额外提供onClose回调，否则容易出现逻辑不同步的问题。
3. 与React并发特性冲突：在React 18的并发模式下，命令式的ref操作可能会和React的异步渲染调度逻辑冲突，导致Modal的显示/隐藏时机不符合预期。
4. 测试难度提升：声明式代码的测试只需要验证状态变化后的渲染结果，而命令式代码需要模拟ref的调用，测试逻辑更复杂。

如果坚持使用方案2，建议给Modal添加onClose、onShow这类回调函数，让父组件能感知状态变化；同时始终在调用ref方法前检查ref.current是否存在。

内容的提问来源于stack exchange，提问作者nullptr