Portal 是 React 提供的 ReactDOM.createPortal API，用于将子组件脱离当前 DOM 树、挂载到指定容器（如 body）中渲染，保持上下文与事件冒泡正常，仅改变 DOM 位置。
JavaScript 实现 Portal 的核心是 脱离当前 DOM 树、挂载到指定容器（如 body 或独立 div）中渲染子组件，常用于模态框、Tooltip、全局通知等需要“穿透层级”或“脱离布局流”的场景。它本身不改变组件逻辑，只改变渲染位置。
Portal 是什么？不是新语法，而是 React 的一个 API
Portal 是 React 提供的原生能力（ReactDOM.createPortal），不是浏览器标准或通用 JS 模式。纯 JavaScript（非 React）中没有内置 Portal 概念，但可模拟类似行为：手动创建元素、插入到目标容器、同步状态与事件。
- React 中用法简洁：
ReactDOM.createPortal(child, container)，返回一个 React Node - container 必须是真实 DOM 节点（如
document.getElementById('modal-root')） - 渲染后，DOM 结构出现在 container 内，但组件生命周期、上下文（Context）、事件冒泡仍正常工作（冒泡会跨过 portal 边界，继续向父组件树上传）
Portal 如何渲染？关键在 DOM 移动与 React 协调
React 并不真的“移动”已有 DOM，而是在 commit 阶段将 Portal 子树的 fiber 节点关联到目标 container，并由 ReactDOM 直接调用 appendChild / insertBefore 等原生 API 把生成的 DOM 插入指定位置。
- 首次渲染：React 创建子组件的真实 DOM 节点，不插入当前父节点，而是直接 append 到你传入的 container
- 更新时：React 对比 Portal 内部的虚拟 DOM，复用/更新/卸载对应 DOM 节点，始终维持在目标 container 中
- 卸载时：React 从 container 中移除所有 Portal 渲染的 DOM 节点
- 样式不受影响：CSS 作用域仍按 HTML 结构生效，但因位置变化，可能需注意 z-index、position、overflow 等布局相关属性
手写简易 Portal（纯 JS + HTML 模拟思路）
若不用 React，想实现类似效果，本质是：动态创建 DOM、挂载、绑定事件、响应数据变化。
立即学习“Java免费学习笔记（深入）”；
- 准备一个全局容器：
<div id="portal-root"></div>放在<body>底部 - 封装函数：
renderToPortal(htmlString, target = '#portal-root') - 内部执行：
document.querySelector(target).innerHTML = htmlString（简单版） - 进阶做法：用
document.createElement+element.addEventListener手动管理事件和状态，配合模板字符串或轻量模板引擎 - 注意清理：每次重绘前清空 container，或用 key 区分不同 portal 实例，避免残留
常见问题与注意事项
Portal 容易忽略但关键的细节：
- 无障碍（a11y）：Portal 内容不在语义 DOM 顺序中，需手动处理 focus 管理（如模态框打开后自动聚焦首个可交互元素）
- 样式隔离：外部 CSS 可能意外影响 Portal 内容，建议用 CSS Modules、CSS-in-JS 或加唯一 class 前缀
- 服务端渲染（SSR）：Node 环境无 document，Portal 容器需在客户端 hydrate 后才挂载，否则报错
- 事件冒泡边界：click 等事件会从 portal 内部向上冒泡，穿过 React 组件树，但不会“跳回”到 portal container 的兄弟节点 —— 冒泡路径仍是 React 父组件链，不是物理 DOM 链
基本上就这些。Portal 不是魔法，只是把渲染输出重定向；它的价值在于解耦渲染位置与组件结构，让 UI 更灵活可控。
