React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React createPortal实现

React中createPortal的作用与实现原理

作者：香香甜甜圈

React.createPortal提供了一种解决方案,允许将子元素渲染到DOM树中的任意位置,同时保持其在React组件树中的上下文关系,感兴趣的可以了解一下

1. React中createPortal的作用解析

在React开发中，我们经常会遇到需要将子节点渲染到父组件DOM层次结构之外的场景。比如模态框(Modal)、通知提示(Toast)、全局弹窗等UI组件，它们往往需要突破当前组件的DOM容器限制。这正是React.createPortal的用武之地。

createPortal提供了一种将子元素渲染到DOM节点中不同位置的能力，同时保持这些子元素在React树中的上下文关系。这意味着：

举个实际例子：当你在一个深度嵌套的组件中触发Modal时，如果不使用portal，Modal可能会被父元素的overflow:hidden样式裁剪。而使用portal可以让Modal直接挂载到body下，同时保持所有React特性不变。

2. createPortal的核心工作原理

2.1 基本语法与参数

createPortal方法接收两个参数：

ReactDOM.createPortal(child, container)

典型使用方式：

import { createPortal } from 'react-dom';

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

2.2 与传统渲染方式的对比

传统React渲染是严格的父子DOM层级关系，而portal打破了这种限制：

特性常规渲染createPortal
DOM位置父组件内任意指定位置
事件冒泡按DOM树按React组件树
上下文访问正常正常
样式继承受父元素影响独立于目标容器

2.3 底层实现机制

当React遇到portal时：

  1. 会在内存中维护两棵树：React组件树和实际DOM树
  2. 渲染时检查portal目标容器是否存在
  3. 将子元素直接渲染到目标DOM节点
  4. 但所有React特性（状态、生命周期等）仍绑定到原组件

3. createPortal的典型应用场景

3.1 模态框(Modal)实现

这是portal最常用的场景。一个完整的Modal组件实现通常包含：

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;
  
  return createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>,
    document.body
  );
}

关键点：

3.2 全局通知系统

实现一个Toast通知系统：

const toastRoot = document.getElementById('toast-root');

function Toast({ message }) {
  return createPortal(
    <div className="toast">{message}</div>,
    toastRoot
  );
}

优势：

3.3 工具提示(Tooltip)

对于需要突破overflow:hidden限制的Tooltip：

function Tooltip({ children, content }) {
  const [target, setTarget] = useState(null);
  
  return (
    <>
      <span ref={setTarget}>{children}</span>
      {target && createPortal(
        <div className="tooltip">{content}</div>,
        document.body
      )}
    </>
  );
}

4. createPortal的高级用法与技巧

4.1 动态目标容器

portal的目标容器可以是动态的：

function DynamicPortal({ targetId, children }) {
  const [target, setTarget] = useState(null);
  
  useEffect(() => {
    setTarget(document.getElementById(targetId));
  }, [targetId]);

  if (!target) return null;
  
  return createPortal(children, target);
}

4.2 多portal协同

多个portal可以共享同一目标容器：

function NotificationCenter() {
  return (
    <>
      {notifications.map(notif => (
        createPortal(
          <Notification {...notif} />,
          document.getElementById('notifications')
        )
      ))}
    </>
  );
}

4.3 与Context配合

portal内的组件可以访问原位置的Context：

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return createPortal(
    <button className={theme}>Click me</button>,
    document.body
  );
}

5. 常见问题与解决方案

5.1 事件处理注意事项

portal中的事件会按照React树冒泡，而非DOM树：

function Parent() {
  const handleClick = () => {
    // 即使Modal渲染到body，点击Modal内容仍会触发此回调
  };
  
  return (
    <div onClick={handleClick}>
      <Modal />
    </div>
  );
}

解决方案：

5.2 SSR兼容性问题

服务端渲染时document不存在，需要特殊处理：

function SafePortal({ children, targetId }) {
  const [mounted, setMounted] = useState(false);
  
  useEffect(() => {
    setMounted(true);
  }, []);
  
  if (!mounted) return null;
  
  const target = document.getElementById(targetId);
  if (!target) return null;
  
  return createPortal(children, target);
}

5.3 样式隔离方案

portal内容不受目标容器样式影响，但可能需要：

// 在portal根元素添加隔离类名
createPortal(
  <div className="portal-root">
    {children}
  </div>,
  target
);

// CSS模块化或CSS-in-JS方案
import styles from './Modal.module.css';

createPortal(
  <div className={styles.modal}>{children}</div>,
  target
);

6. 性能优化与最佳实践

6.1 避免频繁创建/销毁portal

对于频繁切换的portal内容：

// 不好：频繁创建/销毁DOM节点
function TogglePortal({ show }) {
  return show ? createPortal(<div>Content</div>, target) : null;
}

// 更好：保持DOM存在，控制visibility
function TogglePortal({ show }) {
  return createPortal(
    <div style={{ display: show ? 'block' : 'none' }}>Content</div>,
    target
  );
}

6.2 内存泄漏预防

确保组件卸载时清理portal：

function TimerPortal() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    
    return () => clearInterval(timer);
  }, []);
  
  return createPortal(
    <div>Count: {count}</div>,
    document.body
  );
}

6.3 可访问性(A11Y)考虑

确保portal内容对屏幕阅读器友好：

createPortal(
  <div role="dialog" aria-labelledby="dialog-title">
    <h2 id="dialog-title">Modal Title</h2>
    {content}
  </div>,
  document.body
);

7. 与其他技术的对比与整合

7.1 与React 18新Root API的配合

React 18的createRoot可以与portal结合：

// 创建额外的React根
const portalRoot = createRoot(document.getElementById('portal-root'));

function MyComponent() {
  return (
    <>
      {createPortal(
        <div>Portal Content</div>,
        document.getElementById('portal-target')
      )}
    </>
  );
}

7.2 与第三方库的集成

例如与react-dnd配合：

function DraggablePortal() {
  const [{ isDragging }, drag] = useDrag({
    type: 'BOX',
    item: { id: 123 },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  });
  
  return createPortal(
    <div
      ref={drag}
      style={{ opacity: isDragging ? 0.5 : 1 }}
    >
      Drag me
    </div>,
    document.body
  );
}

7.3 与CSS框架的适配

例如Tailwind CSS中使用portal：

createPortal(
  <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
    <div className="bg-white p-4 rounded-lg">
      {children}
    </div>
  </div>,
  document.body
);

在大型React项目中，合理使用createPortal可以解决许多复杂的UI层级问题。我个人的经验是：对于需要突破布局限制的全局性UI组件，portal通常是比直接操作DOM更安全、更符合React理念的解决方案。但也要注意不要过度使用，只有在确实需要突破DOM层级时才考虑portal方案。

到此这篇关于React中createPortal的作用与实现原理的文章就介绍到这了,更多相关React createPortal实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文