React Portals

什么是React Portals

React Portals（React 门户）是 React 提供的一种机制，用于将组件渲染到 DOM 树中的不同位置，而不受组件层次结构的限制。它允许你将一个组件的渲染内容“传送”到 DOM 结构中的任何位置，通常用于处理一些特殊的 UI 布局需求，如弹出窗口、模态框、通知框等。

React Portals 的主要优势是它可以在组件树中的某一级组件上渲染内容，而不受该组件的父组件或祖先组件的影响。这在处理全局或跨层级的 UI 元素时非常有用，因为它不会破坏组件的层次结构。

作用

React Portals 的主要作用是允许你将组件的渲染内容渲染到 DOM 结构中的不同位置，而不受组件层次结构的限制。它有几个重要的应用场景和作用：

1. 处理全局 UI 元素： React Portals 允许你将 UI 元素渲染到应用的根 DOM 之外，这对于创建全局的 UI 元素非常有用，比如模态框、通知框、工具提示等。这些元素可以浮在应用的其他组件之上，而不会受到组件嵌套结构的影响。

2. 处理层叠上下文： 有些 CSS 样式属性（如z-index）会创建层叠上下文，限制了某些元素的显示顺序。使用 React Portals 可以将元素渲染到指定的 DOM 节点上，从而绕过这些层叠上下文的限制，实现更复杂的 UI 布局。

3. 处理复杂的 UI 布局： 在某些情况下，需要将组件的渲染内容插入到 DOM 结构的特定位置，以满足设计或布局需求。React Portals 允许你在不改变组件层次结构的情况下实现这些需求。

4. 提高可重用性： 使用 React Portals 可以将通用的 UI 组件（如模态框或通知框）封装为可重用的组件，使其可以在不同的应用中使用，并且不需要关心组件的放置位置。

原理

React Portals 的原理涉及到了 React 的虚拟 DOM以及底层的 DOM 操作。

1. 创建虚拟 DOM 树： 在 React 组件中，你可以使用 ReactDOM.createPortal 函数来创建一个 Portal。这个函数接受两个参数：要渲染的内容（通常是 React 元素）和目标 DOM 元素。

2. 将虚拟 DOM 渲染到目标 DOM 元素： 当你调用 ReactDOM.createPortal 时，React 会创建一个新的虚拟 DOM 子树，包括你传递的内容。然后，React 会使用底层的 DOM 操作，将这个虚拟 DOM 子树渲染到指定的目标 DOM 元素上，而不是按照通常的组件层次结构将其渲染到根 DOM 上。

3. 维护 React 组件的状态： Portal 内部的 React 组件仍然保持其正常的生命周期和状态管理。这意味着你可以在 Portal 内部使用状态、事件处理程序等 React 功能。

4. 脱离组件层次结构： Portal 允许你将内容渲染到组件树之外的位置，这意味着你可以创建全局的 UI 元素，如模态框、通知框等，而不受组件嵌套结构的限制。

5. 卸载和更新： 当 Portal 所在的组件被卸载时，Portal 也会被卸载，并且 Portal 内的状态会被正确地清理。Portal 内容的更新也会被处理，React 会确保内容在目标 DOM 元素上得到正确渲染。

使用

使用 React Portals，需要使用 ReactDOM.createPortal 函数将组件的渲染内容渲染到指定的 DOM 元素上。以下是使用 React Portals 的一般步骤：

1. 导入所需的模块： 首先，确保导入了 react 和 react-dom 模块。

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

2. 创建 Portal 组件： 创建一个 React 组件，这个组件将会用于包裹需要渲染的内容。通常，你可以在组件的 render 方法中使用 ReactDOM.createPortal 函数来定义 Portal 的渲染内容以及目标 DOM 元素。

class MyPortal extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个新的 DOM 元素用于 Portal
    this.portalElement = document.createElement('div');
    // 定义要渲染到 Portal 上的内容
    this.portalContent = (
      <div>
        <p>这是 Portal 中的内容</p>
      </div>
    );
  }

  componentDidMount() {
    // 将 Portal 内容渲染到指定的 DOM 元素上
    document.body.appendChild(this.portalElement);
    this.componentDidUpdate();
  }

  componentDidUpdate() {
    // 使用 ReactDOM.createPortal 将内容渲染到 Portal 上
    ReactDOM.createPortal(this.portalContent, this.portalElement);
  }

  componentWillUnmount() {
    // 在组件卸载时，清理 Portal
    document.body.removeChild(this.portalElement);
  }

  render() {
    // 不需要在组件的 render 方法中返回任何内容
    return null;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

3. 在应用中使用 Portal 组件： 在你的应用中，可以像使用普通的 React 组件一样使用 Portal 组件，并将其放置在组件树的合适位置。

function App() {
  return (
    <div>
      <h1>我的应用</h1>
      <MyPortal />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
1
2
3
4
5
6
7
8
9
10

在这个示例中，MyPortal 组件创建了一个 Portal，并将其内容渲染到了 document.body 中的新元素上。可以将 Portal 放置在任何组件中，不受组件层次结构的限制。

注意事项

在使用 React Portals 时，有一些注意事项和最佳实践需要考虑：

1. 合适的目标容器： 确保选择一个合适的 DOM 元素作为 Portal 的目标容器。通常，你会在组件的 componentDidMount 生命周期方法中将 Portal 添加到 DOM，而在 componentWillUnmount 中将其移除。

2. 避免滥用： 虽然 React Portals 提供了灵活性，但不应滥用它们。只有在必要的情况下使用 Portal，避免过度复杂的嵌套结构。

3. 层叠上下文： Portal 可能会破坏默认的 CSS 层叠上下文。如果你的 Portal 内容和其他元素有层叠关系，可能需要手动管理 z-index 或使用 CSS 属性来控制渲染顺序。

4. 事件处理： 由于 Portal 的内容可以渲染在组件树之外，因此事件处理可能会受到限制。确保事件处理程序适用于 Portal 内容，或者使用事件冒泡机制。

假设有一个应用，其中包含一个按钮，当点击按钮时，应该显示一个模态框（使用 Portal 渲染）。组件可能如下所示：

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

function Modal(props) {
  const { onClose } = props;

  return ReactDOM.createPortal(
    <div className="modal">
      <div className="modal-content">
        <p>这是模态框内容。</p>
        <button onClick={onClose}>关闭</button>
      </div>
    </div>,
    document.getElementById('modal-root')
  );
}

function App() {
  const [modalOpen, setModalOpen] = useState(false);

  const openModal = () => {
    setModalOpen(true);
  };

  const closeModal = () => {
    setModalOpen(false);
  };

  return (
    <div>
      <h1>一个例子</h1>
      <button onClick={openModal}>打开模态框</button>
      {modalOpen && <Modal onClose={closeModal} />}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在上面的示例中，模态框的内容是使用 Portal 渲染的，而 Portal 的目标容器是具有 id="modal-root" 的 DOM 元素。

问题： 模态框中有一个 “关闭” 按钮，但当你点击它时，事件处理程序可能会受到限制，因为模态框渲染在组件树之外。

解决方法： 为了确保事件能够正确地触发和处理，你可以使用事件冒泡机制。在这个示例中，你可以在 “关闭” 按钮上添加事件处理程序，当点击按钮时，事件会冒泡到 DOM 树中，然后在组件树中的父组件中进行处理。

function Modal(props) {
  const { onClose } = props;

  return ReactDOM.createPortal(
    <div className="modal">
      <div className="modal-content">
        <p>这是模态框内容。</p>
        <button onClick={onClose}>关闭</button>
      </div>
    </div>,
    document.getElementById('modal-root')
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13

在上述示例中，当点击模态框中的 “关闭” 按钮时，事件会冒泡回到包含模态框的组件（即 App 组件），然后在 App 组件中的 closeModal`处理函数中进行处理。

5. 样式隔离： Portal 可能会引入样式隔离的问题。确保 Portal 内容的样式不会干扰到应用中的其他组件，可以使用 CSS Modules 或其他样式隔离方法。

6. 性能考虑： Portal 可能会影响性能，因为它需要将内容渲染到不同的 DOM 元素上。在性能敏感的情况下，需要小心使用 Portal，确保不会导致性能问题。

7. 跨浏览器兼容性： Portal 在不同浏览器上的行为可能有所不同。在使用 Portal 时，要测试和验证在各种主流浏览器中的表现。