React Portal 是一种将子元素渲染到 DOM 中的特定位置 的技术，常用于解决组件层级嵌套过深导致的 DOM 操作问题。它通过 ReactDOM.createPortal() 方法实现，能够将内容“挂载”到父组件之外的节点上。

📌 核心用途

  • 突破层级限制：例如模态框、悬浮层等需要脱离当前组件树的 UI
  • 优化渲染性能：将不频繁更新的元素渲染到独立的 DOM 节点
  • 实现更灵活的布局：如将内容插入到 body 根节点或特定容器

🧩 基本用法

import ReactDOM from 'react-dom';

const Modal = ({ children }) => {
  return ReactDOM.createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('root') // 指定挂载目标
  );
};

📈 应用场景

场景 说明
模态框 将弹窗渲染到 body 根节点，避免影响父组件样式
侧边栏 实现与主内容区域分离的可拖拽组件
3D 渲染 将 WebGL 渲染内容挂载到独立容器以优化性能

📚 推荐阅读

React_Portal