请说明在 React 应用中设计一个可全局使用的 Dialog 组件的做法与要点。

回答思路

1. 【回答框架 1】全局 Dialog 的核心是挂载点与状态管理。挂载点通常在应用根节点下创建独立容器，如 body 下 div，避免被父级 overflow 或定位影响。状态管理可采用轻量全局 store，如 Redux、Zustand 或 Context 加自定义事件，使任意组件能触发弹窗。
2. 【回答框架 2】实现方案包括：高阶组件包裹触发组件；使用渲染函数如 render 方法动态挂载；或者基于 ReactDOM.createPortal 将弹窗 DOM 渲染至指定容器。createPortal 保证 DOM 结构在根节点下，同时保持 React 事件流和上下文。
3. 【回答框架 3】需处理关键点：弹窗内容的渲染方式，如字符串、VNode 或组件实例；关闭机制如遮罩点击或回调函数；生命周期管理，如挂载和卸载、动画过渡；以及多实例管理，如队列或堆栈。
4. 【回答框架 4】还需考虑无障碍，如焦点管理和键盘事件；样式覆盖，如 CSS 变量或主题；以及性能，如懒加载和按需渲染。
5. 【关键点 1】使用 ReactDOM.createPortal 将弹窗渲染到根节点下，避免样式或父级影响。
6. 【关键点 2】全局状态管理（如 Context、Redux）负责控制弹窗的显示与关闭，实现跨组件调用。
7. 【关键点 3】提供允许外部控制的配置，如 props 或回调，保持组件可控。
8. 【关键点 4】注意处理多个弹窗的优先级和堆叠顺序。
9. 【易错点 1】忽略遮罩点击误关或重复触发事件冒泡。
10. 【易错点 2】未管理弹窗卸载时的清理，导致内存泄漏或状态残留。
11. 【易错点 3】过度依赖全局状态，使得弹窗难以测试和复用。