请解释 React 中 Portals（传送门）的概念，并列举至少两个使用场景，说明它们如何解决特定 UI 布局或事件处理问题。
考察说明
考察对 React Portals 机制的理解及其在实际 UI 场景中的应用能力。
回答思路
- 【回答框架 1】Portals 是 React 提供的一种将子节点渲染到父组件 DOM 树之外的机制，通过 ReactDOM.createPortal(child, container) 实现，其中 child 是 React 元素，container 是 DOM 元素。Portals 仍然遵循 React 的上下文和事件冒泡（合成事件）机制，但 DOM 结构独立。
- 【回答框架 2】典型应用场景一：模态对话框（Modal），避免父组件的 overflow: hidden 或 z-index 层级问题，确保模态框在视觉和层级上显示在最上层。使用 Portals 将模态框内容渲染到 document.body 下，同时保留 React 组件树中的逻辑关系。
- 【回答框架 3】典型应用场景二：全局通知（Toast）或悬浮提示（Tooltip），这些 UI 需要脱离局部容器的裁剪或溢出隐藏，Portals 可以将它们渲染到页面任意位置，如 body 末尾，便于控制定位和层级。
- 【回答框架 4】另外，当遇到父组件设置了 transform 或 filter 等属性影响固定定位时，Portals 也能帮助规避，使元素相对于视口正确固定。
- 【关键点 1】Portals 通过 ReactDOM.createPortal 将子元素渲染到指定 DOM 节点，但事件和上下文仍遵循 React 树。
- 【关键点 2】解决模态框和弹出层的裁剪、层级和定位问题。
- 【关键点 3】事件冒泡（合成事件）会沿着 React 组件树传播，而非真实 DOM 树。
- 【易错点 1】不要混淆 Portals 与 iframe，Portals 不创建独立的 React 上下文。
- 【易错点 2】使用 Portals 时注意事件委托，若在 document 上监听原生事件，可能影响性能或行为。
- 【易错点 3】服务端渲染时，createPortal 在客户端才可用，需处理兼容。