Vue3 的 Teleport 与 Portal：对比 React 的 Portal，各自的优缺点是什么？

1. 从模态框场景看组件传送的必要性

想象这样一个场景：我们需要在页面顶部显示一个全屏遮罩的对话框组件，但当前组件被包裹在多层<div>容器中。由于CSS定位和层级的问题，对话框可能被父级容器的overflow: hidden或z-index意外裁剪或遮挡。这时候，"组件传送"技术便派上了大用场。

无论是Vue3的<Teleport>还是React的ReactDOM.createPortal，其本质都是允许我们将组件渲染到DOM树的不同位置，实现逻辑关系与视觉呈现的分离。这种技术特别适合处理全局弹窗、通知提示、悬浮操作栏等需要突破布局限制的场景。

2. Vue3 Teleport 技术详解与实战

2.1 基础用法示范

<!-- 示例技术栈：Vue3 + Composition API -->
<template>
  <div class="parent-container">
    <!-- 将模态框传送到body末尾 -->
    <Teleport to="body">
      <div class="modal-mask" v-if="showModal">
        <div class="modal-content">
          <h2>重要通知</h2>
          <button @click="showModal = false">关闭</button>
        </div>
      </div>
    </Teleport>

    <button @click="showModal = true">打开弹窗</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const showModal = ref(false);
</script>

<style scoped>
.parent-container {
  position: relative;
  z-index: 1;
  overflow: hidden; /* 可能意外裁剪子元素 */
}
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  /* 保证覆盖整个视口 */
}
</style>

此示例实现了：

• 点击按钮时在body末尾渲染模态框
• 避免父容器overflow属性和层级问题
• 保持组件逻辑的上下文一致性

2.2 进阶功能演示

动态目标切换：

<Teleport :to="isMobile ? '#mobile-root' : 'body'">
  <!-- 根据设备类型切换传送位置 -->
</Teleport>

<Teleport :to="targetElement"> 
  <!-- 支持传入DOM元素引用 -->
</Teleport>

禁用传送功能：

<Teleport :disabled="isDemoMode">
  <!-- 在演示模式中保持原位渲染 -->
</Teleport>

3. React Portal 技术剖析与实现

3.1 标准实现示例

// 示例技术栈：React 18 + Functional Components
import { useRef, useState } from 'react';
import ReactDOM from 'react-dom';

function ModalPortal() {
  const [showModal, setShowModal] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));

  return (
    <div className="parent-container">
      {showModal && ReactDOM.createPortal(
        <div className="modal-mask">
          <div className="modal-content">
            <h2>系统提示</h2>
            <button onClick={() => setShowModal(false)}>确认</button>
          </div>
        </div>,
        modalRoot.current || document.body
      )}

      <button onClick={() => setShowModal(true)}>展示弹窗</button>
    </div>
  );
}

实现特点：

• 手动控制Portal的挂载时机
• 需要处理目标元素可能不存在的容错逻辑
• 支持SSR环境的Hydration机制

3.2 高阶组件封装示例

function withPortal(WrappedComponent, targetSelector) {
  return function PortalWrapper(props) {
    const target = useMemo(() => 
      document.querySelector(targetSelector) || document.body
    , []);
    
    return ReactDOM.createPortal(
      <WrappedComponent {...props} />,
      target
    );
  };
}

// 使用示例
const EnhancedModal = withPortal(Modal, '#portal-root');

4. 核心技术对比与差异分析

4.1 语法实现差异

4.2 事件处理差异对比

Vue示例中的事件冒泡：

<Teleport to="#footer">
  <button @click="handleClick">按钮</button>
</Teleport>

<!-- 父组件仍然能捕获事件 -->
<div @click="handleBubble">
  <Teleport to="body">
    <!-- 触发父组件的handleBubble -->
  </Teleport>  
</div>

React的事件捕获特性：

function ParentComponent() {
  const handleBubble = () => console.log('事件冒泡');

  return (
    <div onClick={handleBubble}>
      {ReactDOM.createPortal(
        <button onClick={() => {}}>点击</button>,
        document.body
      )}
    </div>
  );
}
// 点击按钮时仍会触发父组件的点击处理

5. 应用场景深度讨论

5.1 通用适用场景

• 全局状态组件：如系统级通知、加载动画、授权弹窗
• 突破布局限制：需要绝对定位的悬浮工具栏
• 微前端架构：主应用与子应用间安全地共享UI元素
• 可访问性优化：将焦点管理组件置于DOM顶层

5.2 框架特有优势场景

Vue3 Teleport更适合：

1. 动态目标切换的响应式应用
2. 需要模板声明式管理的项目
3. 需要快速实现disabled切换的原型开发

React Portal更适合：

1. 需要精细控制Portal生命周期的场景
2. 与第三方UI库深度整合的情况
3. 涉及复杂状态管理的大型应用

6. 技术选型与注意事项

6.1 决策指标参考

• 团队熟悉度：已掌握框架的API特性
• 目标动态性：是否需要频繁切换挂载点
• SSR需求：服务端渲染的完善性支持
• 代码风格：偏好模板语法还是JSX

6.2 常见陷阱规避指南

1. 内存泄漏问题：

// React错误示例：未及时清理
function LeakyComponent() {
  ReactDOM.createPortal(<div>内容</div>, document.body);
  return null; // 导致反复创建Portal
}

2. 样式污染防范：

<Teleport to="#external-container">
  <!-- 添加作用域属性 -->
  <div data-portal="chat-widget">
    <style>
      /* 限制样式作用域 */
      [data-portal] .btn { color: red }
    </style>
  </div>
</Teleport>

3. Hydration处理：

// Next.js中解决SSR不匹配
if (typeof window !== 'undefined') {
  ReactDOM.createPortal(content, target)
}

7. 未来发展趋势展望

随着Web Components技术发展，未来可能出现的框架无关的标准化解决方案：

class PortalElement extends HTMLElement {
  connectedCallback() {
    this.appendChild(document.querySelector('#portal-content'));
  }
}
customElements.define('app-portal', PortalElement);

但这种原生方案在状态管理、事件处理等核心功能上仍存在诸多限制，预计在未来3-5年内，框架级解决方案仍将是主流选择。