背景
对话框在前端开发应用中，是一种非常常用的界面模式。对话框作为一个独立的窗口，常常被用于信息的展示，输入信息，亦或者更多其他功能。但是项目的使用过程中，在某些场景下对话框用起来会有一些麻烦。例如：
场景一
如果想要在多个子组件（A、B）中控制一个对话框（C）的显示影藏，这个对话框必须在共有的父组件（MySalesOrders）中进行声明。
场景二
如果需要给对话框（C）传递参数，一般情况我们会使用 props 传入，意味着状态的管理必须也是子组件（A、B）的父组件或者更高一级进行管理和维护，但是其实这些状态可能只需要在子组件 A 或者 B 中维护。这种情况下，我们就需要自定义事件，将状态进行回传，比较麻烦。
const MySalesOrders: React.FC = () => {
const [visible, setVisible] = React.useState(false);
...
return (
<>
<A modalVisible={setVisible}/>
<B modalVisible={setVisible}/>
{
visible ? (
<C
...
/>
) : null
}
</>);
}
const A: React.FC = (props) => {
...
return (
<>
<Button
onClick={() => {
props.modalVisible(...)
}}
/>
</>);
}
const B: React.FC = (props) => {
...
return (
<>
<Button
onClick={() => {
props.modalVisible(...)
}}
/>
</>);
}
复制代码
场景三
一个展示的对话框，对话框在不同的模块可能只是提示文案不一样，需要在不同的地方多次导入定义。例如系统中常用的提示成功、提示失败的对话框。
我们通常会定义一个通用的组件，在父组件中定义，然后使用时唤起，但是如果我们需要在不同的页面使用，我们就需要在不同的页面组件中使用引入定义。
这些场景都是在我在实际开发中都会用到的，并且这些实现方法其实本身来说都是可以正常使用的，也没有什么问题。但是影藏了几个问题。
问题一：难以扩展
如果和 MySalesOrders 同级的组件也要访问这个对话框（C）？又或者， MySalesOrders 下面的某个深层级的孙子组件也要能对话框（C）？前者意味着代码需要重构，继续提升状态到 MySalesOrders 组件的父组件；后者意味着业务逻辑处理更复杂，需要通过层层的自定义事件回调来完成。
问题二：维护问题
同一个组件，需要在不同的地方多次的导入定义。在系统中增加了大量重复的代码。代码很快就会变得臃肿，且难以理解和维护。
问题的本质
对上诉问题来说，本质在于：在我们日常的项目中应该哪里定义去对话框？又该如何和对话框进行数据交互？
