React Portals

简介: 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. 导入所需的模块: 首先,确保导入了 reactreact-dom 模块。


import React from 'react';
import ReactDOM from 'react-dom';
  1. 创建 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. 在应用中使用 Portal 组件: 在你的应用中,可以像使用普通的 React 组件一样使用 Portal 组件,并将其放置在组件树的合适位置。
function App() {
  return (
    <div>
      <h1>我的应用</h1>
      <MyPortal />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

在这个示例中,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'));

在上面的示例中,模态框的内容是使用 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')
  );
}

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

  1. 样式隔离: Portal 可能会引入样式隔离的问题。确保 Portal 内容的样式不会干扰到应用中的其他组件,可以使用 CSS Modules 或其他样式隔离方法。
  2. 性能考虑: Portal 可能会影响性能,因为它需要将内容渲染到不同的 DOM 元素上。在性能敏感的情况下,需要小心使用 Portal,确保不会导致性能问题。
  3. 跨浏览器兼容性: Portal 在不同浏览器上的行为可能有所不同。在使用 Portal 时,要测试和验证在各种主流浏览器中的表现。
目录
相关文章
React-其它内容-Portals 和 React-父子组件通讯-类组件
React-其它内容-Portals 和 React-父子组件通讯-类组件
51 0
|
JavaScript 前端开发 容器
react 组件进阶之 Portals
Portals 翻译为门户,但是感觉不对。作用类似插槽,但是不是vue 里面的插槽哦,有点像vue3 里面的 teleport,两者的作用都是将对于的虚拟dom 插入到真实dom的某个位置上。这里不讲两者的区别,只讲 Portals 的用法
react 组件进阶之 Portals
|
缓存 JSON 前端开发
《精通react/vue组件设计》之配合React Portals实现一个功能强大的抽屉(Drawer)组件
本文是笔者写组件设计的第六篇文章,内容依次从易到难,今天会用到react的高级API React Portals,它也是很多复杂组件必用的方法之一. 通过组件的设计过程,大家会接触到一个完成健壮的组件设计思路和方法,也能在实现组件的过程逐渐对react/vue的高级知识和技巧有更深的理解和掌握,并且在企业实际工作做游刃有余.
315 0
|
前端开发 JavaScript 容器
React Portals与Error Boundaries
在16.x版本之后React提供了2个革新性的特性——Portals和Error Boundaries。Portals彻底解决了模式对话框不在根节点出现的问题,并能很好的合并到React组件结构中来。在16.x版本React调整了异常处理的方式,结合Error Boundaries特性能够更好的捕获处理各种问题。
1657 0
|
6月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
345 0
|
6月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
72 0
|
6月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
73 0
|
6月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
71 0
|
6月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
59 0
|
6月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
116 0