MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

React Portal 技术在组件中的应用

2022-11-113.9k 阅读

React Portal 基础概念

在 React 应用开发中，React Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀方式。简单来说，正常情况下 React 组件树的渲染是在特定的 DOM 容器内，从根组件开始层层渲染。而 Portal 打破了这种常规的渲染路径，可以将组件渲染到 DOM 树中完全不同的位置。

想象一个场景，在一个复杂的应用界面中，有一个模态框组件。如果按照常规的 React 组件渲染方式，模态框组件会在其所在的父组件层级的 DOM 结构内渲染。但有时，为了样式布局、事件处理等方面的便利，我们希望模态框能够渲染到整个文档的 body 标签下，而不是被嵌套在特定的父组件 DOM 结构中。这就是 React Portal 发挥作用的地方。

Portal 的核心使用方法是通过 ReactDOM.createPortal(child, container) 这个 API。其中，child 是任何可渲染的 React 子元素，比如一个 React 组件、字符串、数字等。container 则是一个 DOM 元素，代表要渲染到的目标容器。

创建简单的 React Portal

下面通过一个简单的代码示例来展示如何创建 React Portal。首先，我们创建一个新的 React 项目。假设使用 create - react - app 脚手架工具，在命令行中执行：

npx create - react - app portal - demo
cd portal - demo

接下来，我们在 src 目录下创建一个新的组件 PortalComponent.js，代码如下：

import React from'react';
import ReactDOM from'react - dom';

const PortalComponent = () => {
    const portalElement = document.getElementById('portal - root');
    return ReactDOM.createPortal(
        <div className="portal - content">
            <p>This is content rendered via React Portal.</p>
        </div>,
        portalElement
    );
};

export default PortalComponent;

在上述代码中，我们首先获取了一个 id 为 portal - root 的 DOM 元素，这个元素需要提前在 HTML 文件中创建。然后，使用 ReactDOM.createPortal 将包含一段文本的 div 元素渲染到这个 DOM 元素中。

接着，我们在 App.js 中引入并使用这个组件：

import React from'react';
import PortalComponent from './PortalComponent';
import './App.css';

function App() {
    return (
        <div className="App">
            <h1>React Portal Demo</h1>
            <PortalComponent />
        </div>
    );
}

export default App;

最后，在 public/index.html 文件中添加 portal - root 元素：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf - 8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device - width, initial - scale = 1" />
    <meta name="theme - color" content="#000000" />
    <meta name="description" content="Web site created using create - react - app" />
    <link rel="apple - touch - icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="portal - root"></div>
</body>

</html>

通过上述步骤，我们就完成了一个简单的 React Portal 的创建与使用。在这个示例中，PortalComponent 的内容虽然是在 App 组件中被调用，但实际上它渲染到了 id 为 portal - root 的 DOM 元素下，脱离了 App 组件正常的 DOM 渲染层级。

React Portal 的事件冒泡机制

理解 React Portal 的事件冒泡机制对于正确使用它至关重要。尽管 Portal 可以将组件渲染到 DOM 树的不同位置，但在事件处理方面，它依然遵循 React 的事件冒泡规则。

当一个事件在 Portal 渲染的元素上触发时，事件会像在常规 React 组件中一样冒泡到包含 React 树的祖先组件，而不是冒泡到 DOM 层次结构中的祖先元素。

为了更好地理解，我们对前面的示例进行扩展。在 PortalComponent.js 中添加一个按钮，并为其添加点击事件处理：

import React from'react';
import ReactDOM from'react - dom';

const PortalComponent = ({ onButtonClick }) => {
    const portalElement = document.getElementById('portal - root');
    return ReactDOM.createPortal(
        <div className="portal - content">
            <p>This is content rendered via React Portal.</p>
            <button onClick={onButtonClick}>Click me in Portal</button>
        </div>,
        portalElement
    );
};

export default PortalComponent;

在 App.js 中定义点击事件处理函数并传递给 PortalComponent：

import React from'react';
import PortalComponent from './PortalComponent';
import './App.css';

function App() {
    const handleButtonClick = () => {
        console.log('Button in Portal was clicked!');
    };
    return (
        <div className="App">
            <h1>React Portal Demo</h1>
            <PortalComponent onButtonClick={handleButtonClick} />
        </div>
    );
}

export default App;

在这个例子中，当点击 PortalComponent 中的按钮时，尽管按钮实际渲染在 portal - root 这个 DOM 元素下，远离 App 组件的正常 DOM 层级，但点击事件依然能够冒泡到 App 组件中定义的 handleButtonClick 函数，这是因为 React 的事件系统是基于组件树而不是 DOM 树来处理事件冒泡的。

然而，需要注意的是，如果在 DOM 层面直接添加事件监听器到 portal - root 元素或其祖先元素，那么这些事件监听器会按照传统的 DOM 事件冒泡规则触发，与 React 的事件系统相互独立。例如，如果在 public/index.html 中为 portal - root 元素添加一个原生的 click 事件监听器：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf - 8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device - width, initial - scale = 1" />
    <meta name="theme - color" content="#000000" />
    <meta name="description" content="Web site created using create - react - app" />
    <link rel="apple - touch - icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="portal - root"></div>
    <script>
        document.getElementById('portal - root').addEventListener('click', function () {
            console.log('Clicked on portal - root in DOM');
        });
    </script>
</body>

</html>

此时，当点击 PortalComponent 中的按钮时，会同时触发 React 组件树中的 handleButtonClick 函数和 DOM 层面添加的事件监听器。这就要求开发者在使用 React Portal 时，要清晰地区分 React 事件系统和原生 DOM 事件系统，以避免不必要的冲突和错误。

React Portal 在模态框中的应用

模态框是 React Portal 应用的一个典型场景。在一个复杂的单页应用中，模态框通常需要覆盖整个页面，并且在视觉和交互上要与页面其他部分隔离开。使用 React Portal 可以很方便地实现这一点。

我们创建一个简单的模态框组件 Modal.js：

import React from'react';
import ReactDOM from'react - dom';

const Modal = ({ isOpen, onClose, children }) => {
    if (!isOpen) return null;
    const portalElement = document.getElementById('modal - portal - root');
    return ReactDOM.createPortal(
        <div className="modal - overlay">
            <div className="modal - content">
                <button className="modal - close - button" onClick={onClose}>Close</button>
                {children}
            </div>
        </div>,
        portalElement
    );
};

export default Modal;

在上述代码中，Modal 组件接收 isOpen、onClose 和 children 三个属性。isOpen 用于控制模态框是否显示，onClose 是关闭模态框的回调函数，children 则是模态框内部的内容。当 isOpen 为 true 时，通过 ReactDOM.createPortal 将模态框内容渲染到 id 为 modal - portal - root 的 DOM 元素下。

在 App.js 中使用这个模态框组件：

import React, { useState } from'react';
import Modal from './Modal';
import './App.css';

function App() {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const openModal = () => {
        setIsModalOpen(true);
    };
    const closeModal = () => {
        setIsModalOpen(false);
    };
    return (
        <div className="App">
            <h1>React Portal Modal Demo</h1>
            <button onClick={openModal}>Open Modal</button>
            <Modal isOpen={isModalOpen} onClose={closeModal}>
                <p>This is the content inside the modal.</p>
            </Modal>
        </div>
    );
}

export default App;

同时，在 public/index.html 中添加 modal - portal - root 元素：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf - 8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device - width, initial - scale = 1" />
    <meta name="theme - color" content="#000000" />
    <meta name="description" content="Web site created using create - react - app" />
    <link rel="apple - touch - icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="modal - portal - root"></div>
</body>

</html>

通过这种方式，模态框能够渲染到页面的顶层，不会受到 App 组件内部 DOM 结构和样式的干扰，并且可以方便地进行样式设计，例如设置半透明的遮罩层等。同时，模态框内部的事件（如关闭按钮的点击事件）也能按照 React 的事件机制正常处理。

React Portal 在全局提示框中的应用

全局提示框也是 React Portal 常用的场景之一。全局提示框通常用于在应用的任何位置显示临时性的消息，如成功提示、错误提示等。由于提示框需要在整个应用的顶层显示，并且不希望其 DOM 结构嵌套在特定组件内部，React Portal 成为了理想的实现方式。

我们创建一个全局提示框组件 Toast.js：

import React from'react';
import ReactDOM from'react - dom';

const Toast = ({ message, isVisible, onClose }) => {
    if (!isVisible) return null;
    const portalElement = document.getElementById('toast - portal - root');
    return ReactDOM.createPortal(
        <div className="toast - container">
            <div className="toast - message">{message}</div>
            <button className="toast - close - button" onClick={onClose}>Close</button>
        </div>,
        portalElement
    );
};

export default Toast;

在 App.js 中使用这个提示框组件：

import React, { useState } from'react';
import Toast from './Toast';
import './App.css';

function App() {
    const [isToastVisible, setIsToastVisible] = useState(false);
    const showToast = () => {
        setIsToastVisible(true);
    };
    const hideToast = () => {
        setIsToastVisible(false);
    };
    return (
        <div className="App">
            <h1>React Portal Toast Demo</h1>
            <button onClick={showToast}>Show Toast</button>
            <Toast message="This is a sample toast message." isVisible={isToastVisible} onClose={hideToast} />
        </div>
    );
}

export default App;

同样，在 public/index.html 中添加 toast - portal - root 元素：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf - 8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device - width, initial - scale = 1" />
    <meta name="theme - color" content="#000000" />
    <meta name="description" content="Web site created using create - react - app" />
    <link rel="apple - touch - icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="toast - portal - root"></div>
</body>

</html>

通过这种方式，全局提示框可以独立于 App 组件的 DOM 结构进行渲染，无论应用的其他部分如何变化，提示框都能稳定地显示在页面的特定位置（通过 CSS 样式设置）。而且，提示框的显示与隐藏以及关闭按钮的交互都可以通过 React 的状态和事件机制方便地控制。

React Portal 在下拉菜单中的应用

下拉菜单在很多 Web 应用中是常见的交互组件。当使用 React 开发下拉菜单时，有时会遇到样式和交互上的问题，特别是当父组件有复杂的样式或布局限制时。React Portal 可以帮助解决这些问题，将下拉菜单渲染到更合适的 DOM 位置。

我们创建一个简单的下拉菜单组件 Dropdown.js：

import React, { useState } from'react';
import ReactDOM from'react - dom';

const Dropdown = () => {
    const [isOpen, setIsOpen] = useState(false);
    const portalElement = document.getElementById('dropdown - portal - root');
    const toggleDropdown = () => {
        setIsOpen(!isOpen);
    };
    return (
        <div className="dropdown - trigger" onClick={toggleDropdown}>
            Click to open dropdown
            {isOpen && ReactDOM.createPortal(
                <div className="dropdown - menu">
                    <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                    </ul>
                </div>,
                portalElement
            )}
        </div>
    );
};

export default Dropdown;

在 App.js 中引入并使用这个下拉菜单组件：

import React from'react';
import Dropdown from './Dropdown';
import './App.css';

function App() {
    return (
        <div className="App">
            <h1>React Portal Dropdown Demo</h1>
            <Dropdown />
        </div>
    );
}

export default App;

在 public/index.html 中添加 dropdown - portal - root 元素：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf - 8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device - width, initial - scale = 1" />
    <meta name="theme - color" content="#000000" />
    <meta name="description" content="Web site created using create - react - app" />
    <link rel="apple - touch - icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="dropdown - portal - root"></div>
</body>

</html>

通过这种方式，下拉菜单的内容可以渲染到与触发按钮不同的 DOM 位置，避免了因父组件样式和布局对下拉菜单的限制。同时，通过 React 的状态管理和事件处理，下拉菜单的显示与隐藏操作能够自然流畅地实现。

React Portal 与 CSS 样式的关系

当使用 React Portal 时，正确处理 CSS 样式是非常重要的。由于 Portal 将组件渲染到不同的 DOM 位置，这可能会影响到样式的继承和作用域。

对于模态框、全局提示框等通过 Portal 渲染的组件，通常需要使用独立的 CSS 类来设置样式，以避免与其他组件的样式冲突。例如，在模态框的例子中，modal - overlay、modal - content、modal - close - button 等类都是专门为模态框定义的。

.modal - overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background - color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify - content: center;
    align - items: center;
}

.modal - content {
    background - color: white;
    padding: 20px;
    border - radius: 5px;
    box - shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.modal - close - button {
    position: absolute;
    top: 10px;
    right: 10px;
    background - color: transparent;
    border: none;
    font - size: 16px;
    cursor: pointer;
}

在处理下拉菜单等组件时，同样要注意 CSS 样式的隔离。通过为 Portal 渲染的组件定义独特的 CSS 类，可以确保样式只作用于该组件，而不会对其他部分产生意外影响。

另外，由于 Portal 组件可能渲染到 DOM 树的不同层级，在设置定位相关的样式（如 position: fixed、position: absolute）时，需要特别小心。这些定位属性是相对于最近的具有 position: relative 或 position: absolute 的祖先元素的。如果 Portal 渲染到了一个新的 DOM 位置，可能会改变定位的参考对象，从而导致样式不符合预期。在这种情况下，可能需要调整 CSS 样式，确保组件在新的 DOM 位置上显示正确。

React Portal 的性能考虑

虽然 React Portal 为我们提供了强大的功能，但在使用时也需要考虑性能问题。每次使用 ReactDOM.createPortal 都会创建一个新的 Portal 实例，这可能会带来一定的性能开销。

特别是在频繁渲染和更新的场景下，如果不合理使用 Portal，可能会导致性能下降。例如，在一个列表项中，每个列表项都使用 Portal 来渲染一些额外的内容，并且列表项会频繁地添加、删除或更新，这种情况下大量的 Portal 创建和销毁操作会影响性能。

为了优化性能，首先要确保只在必要的时候使用 Portal。如果一个组件可以通过常规的 React 渲染方式满足需求，就尽量避免使用 Portal。对于像模态框、全局提示框等不经常变化且需要独立 DOM 位置的组件，使用 Portal 是合适的。

另外，可以考虑使用 React.memo 或 shouldComponentUpdate 来优化 Portal 组件的渲染。如果 Portal 组件的 props 没有变化，就可以避免不必要的重新渲染。例如，在模态框组件中，如果 isOpen 和 children 等 props 没有改变，就可以阻止模态框组件重新渲染。

const Modal = React.memo(({ isOpen, onClose, children }) => {
    if (!isOpen) return null;
    const portalElement = document.getElementById('modal - portal - root');
    return ReactDOM.createPortal(
        <div className="modal - overlay">
            <div className="modal - content">
                <button className="modal - close - button" onClick={onClose}>Close</button>
                {children}
            </div>
        </div>,
        portalElement
    );
});

通过这种方式，可以减少不必要的渲染操作，提高应用的整体性能。

React Portal 的兼容性与注意事项

React Portal 在现代浏览器中具有良好的兼容性，但在一些较旧的浏览器中可能会遇到问题。特别是在使用 document.getElementById 等获取 DOM 元素的方法时，如果浏览器不支持某些特性，可能会导致 Portal 无法正常工作。

在使用 React Portal 时，还需要注意与其他 JavaScript 库或框架的兼容性。如果项目中同时使用了其他操作 DOM 的库，可能会与 React Portal 的 DOM 操作产生冲突。例如，如果一个库在全局范围内修改了 DOM 结构，可能会影响到 Portal 渲染的目标容器，导致 Portal 渲染失败或出现异常。

另外，在服务器端渲染（SSR）场景下使用 React Portal 需要特别小心。由于服务器端没有真实的 DOM 环境，ReactDOM.createPortal 在服务器端会抛出错误。为了在 SSR 项目中使用 Portal，可以采用条件渲染的方式，在客户端代码中再创建 Portal。例如：

import React from'react';
import ReactDOM from'react - dom';

const PortalComponent = () => {
    if (typeof window!== 'undefined') {
        const portalElement = document.getElementById('portal - root');
        return ReactDOM.createPortal(
            <div className="portal - content">
                <p>This is content rendered via React Portal.</p>
            </div>,
            portalElement
        );
    }
    return null;
};

export default PortalComponent;

通过这种方式，可以确保在服务器端渲染时不会因为 ReactDOM.createPortal 而报错，同时在客户端能够正常创建和使用 Portal。

此外，由于 Portal 改变了组件的渲染位置，在调试时可能会遇到一些困难。常规的 React 开发者工具可能无法直观地展示 Portal 组件在 DOM 中的实际位置。这时，可以借助浏览器的原生开发者工具，通过查找 Portal 渲染的目标 DOM 元素来定位和调试 Portal 组件。

总之，在使用 React Portal 时，需要充分考虑兼容性和各种注意事项，以确保应用在不同环境下都能稳定、高效地运行。