17370845950

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、挂载、绑定事件、响应数据变化。

• 准备一个全局容器： 放在 底部
• 封装函数：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 更灵活可控。