React Portal 是什么？事件冒泡和使用场景怎么理解？

简化版

Portal 允许把子节点渲染到父组件 DOM 层级之外的位置，比如把弹窗渲染到 document.body。它常用于 Modal、Tooltip、Dropdown。虽然 DOM 位置变了，但 React 组件树关系不变，事件仍会按 React 树冒泡。

详细版

示例：

createPortal(
  <div className="modal">弹窗内容</div>,
  document.body
);

Portal 解决的是 DOM 层级和样式限制问题，比如父元素有 overflow: hidden、z-index、transform 导致弹窗被裁剪或层级不对。面试重点是：Portal 改变 DOM 挂载位置，不改变 React 组件树的逻辑关系。

完整版教学

一、Portal 解决 UI 浮层被 DOM 层级限制的问题

弹窗、下拉菜单、气泡提示常需要浮在页面上层。如果它们被渲染在某个普通父元素内部，可能被 overflow: hidden 裁剪，或者被复杂 z-index 层级压住。 Portal 让这些浮层可以渲染到更靠外的 DOM 节点。

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    <div className="modal">{children}</div>,
    document.body
  );
}

这样 Modal 组件仍然写在当前 React 组件里，但真实 DOM 会挂到 body 下。这让弹窗更容易脱离局部布局限制。

二、Portal 改变 DOM 位置，不改变 React 树关系

Portal 的关键点是：DOM 层级变了，React 组件树关系没变。父组件依然可以通过 props 给 Portal 内容传数据。 Context 也仍然可以被 Portal 内部读取。

<ThemeContext.Provider value="dark">
  <Modal>
    <Button />
  </Modal>
</ThemeContext.Provider>

即使 Modal DOM 渲染到了 document.body，Button 仍然能读到 ThemeContext。因为 Context 走的是 React 树，不是 DOM 树。这个点是 Portal 面试题里很高频的追问。

三、Portal 中事件按 React 树冒泡

Portal 的另一个重要特性是事件冒泡。虽然真实 DOM 不在父元素内部，但 React 合成事件会按照 React 组件树冒泡。所以父组件的点击处理仍可能收到 Portal 内部点击。

function Page() {
  return (
    <div onClick={() => console.log('page click')}>
      <Modal>
        <button>确定</button>
      </Modal>
    </div>
  );
}

点击 Modal 里的按钮，可能触发 page click。如果不希望这样，要在 Modal 内部调用 event.stopPropagation()。这解释了为什么弹窗遮罩和内容区经常需要分别处理点击冒泡。

四、Portal 常用于浮层组件

最典型场景是 Modal。其次是 Tooltip、Popover、Dropdown、Toast、全局 loading。它们都有共同特点：视觉上需要脱离当前布局流，但逻辑上仍属于当前组件。

适合 Portal：
  Modal、Tooltip、Dropdown、Toast、ContextMenu
不一定需要 Portal：
  普通卡片、表单项、列表项、页面内容区

场景	为什么适合 Portal
Modal	需要覆盖全屏并脱离父容器裁剪
Tooltip	需要突破 overflow 限制
Dropdown	需要处理层级和定位
Toast	通常挂到全局容器

如果只是普通组件，没有浮层和层级问题，Portal 反而会增加复杂度。

五、Portal 浮层要处理可访问性和滚动

弹窗不是只渲染到 body 就完事。还要处理焦点管理、键盘 ESC、滚动锁定、aria 属性、关闭后焦点恢复。这些细节决定用户体验。

打开弹窗：
  -> 锁定背景滚动
  -> 焦点进入弹窗
  -> ESC 可关闭
关闭弹窗：
  -> 恢复背景滚动
  -> 焦点回到触发按钮

一个真实 Modal 至少要考虑 4 件事：层级、遮罩、焦点、关闭。 Portal 只解决“挂到哪里”，不自动解决这些交互问题。

六、服务端渲染和测试要注意目标容器

Portal 依赖目标 DOM 容器。在 SSR 环境里，服务端没有 document，所以要避免在服务端直接访问。测试时也要确保容器存在。

const modalRoot = document.getElementById('modal-root');

return modalRoot ? createPortal(children, modalRoot) : null;

记忆钩子：Portal 是“DOM 搬家”，不是“React 断亲”；DOM 到 body，Context 和事件还认 React 父子关系。

这句话能同时记住 DOM 位置、Context、事件冒泡三个关键点。

七、常见误区与追问

误区：Portal 会切断 Context。 Context 依赖 React 树，Portal 不会切断 React 组件树关系。
误区：Portal 内事件按真实 DOM 父级冒泡。 React 合成事件会按 React 树冒泡，可能冒泡到逻辑父组件。
误区：用了 Portal 就自动解决弹窗所有问题。 Portal 只解决挂载位置，焦点、滚动、键盘和可访问性仍要处理。
追问：为什么 Modal 常挂到 body？ 为了脱离局部 overflow、定位上下文和 z-index 限制，方便全局遮罩。
追问：Portal 适合服务端渲染吗？ 可以用，但要避免服务端访问 document，通常在客户端确认容器后渲染。
追问：点击弹窗内容为什么触发了页面点击？ 因为 React 事件按组件树冒泡，需要在内容区阻止冒泡。

八、加强记忆

Portal 的核心是“视觉位置脱离，逻辑关系保留”。它把 DOM 渲染到别处，解决浮层层级和裁剪问题；但 Context、props、React 事件冒泡仍按组件树走。回答时用 Modal 举例，再补焦点、滚动和事件冒泡边界。

简化版

详细版