ReactJS - 门户：开启React应用新维度的钥匙

你好，有抱负的React开发者们！今天，我们将踏上一段激动人心的旅程，探索React门户（Portals）的世界。想象一下，你正在建造一座房子（你的React应用），突然你意识到你需要一个秘密通道，以便从一间房传递东西到另一间房，而不经过主走廊。React门户为你的组件做的就是这件事！

React门户是什么？

React门户提供了一种一流的方式，将子组件渲染到存在于父组件DOM层次结构之外的DOM节点中。用更简单的术语来说，就像创建了一个虫洞，允许你在DOM树的另一个位置渲染组件，尽管它仍然是你的React组件层次结构的一部分。

为什么我们需要门户？

你可能在想，“为什么我不能想在哪里渲染组件就在哪里渲染？” 好吧，在大多数情况下，你可以！但是有些场景下门户会派上用场：

1. 模态对话框
2. 工具提示
3. 悬浮菜单
4. 需要跳出其容器的窗口小部件

让我们更深入地了解门户是如何工作的，以及如何使用它们。

创建你的第一个门户

要创建门户，我们使用ReactDOM.createPortal()方法。这里有一个基本的例子：

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

function MyPortalComponent() {
return ReactDOM.createPortal(
<h1>我渲染在另一个地方！</h1>,
document.getElementById('portal-root')
);
}

在这个例子中，我们创建了一个门户，将一个<h1>元素渲染到ID为'portal-root'的DOM节点中。这个节点应该存在于你的HTML中，位于你的主React应用的根元素之外。

让我们分解一下ReactDOM.createPortal()方法：

1. 第一个参数是你想要渲染的React元素。
2. 第二个参数是你想要渲染它的DOM元素。

现实世界的例子：模态对话框

让我们创建一个更实际的例子——一个出现在应用内容上方的模态对话框。

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

function Modal({ isOpen, onClose, children }) {
if (!isOpen) return null;

return ReactDOM.createPortal(
<div className="modal-overlay">
<div className="modal-content">
{children}
<button onClick={onClose}>关闭</button>
</div>
</div>,
document.getElementById('modal-root')
);
}

function App() {
const [isModalOpen, setIsModalOpen] = useState(false);

return (
<div>
<h1>欢迎来到我的应用</h1>
<button onClick={() => setIsModalOpen(true)}>打开模态框</button>
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
<h2>这是一个模态框</h2>
<p>它渲染在主React树之外！</p>
</Modal>
</div>
);
}

在这个例子中，我们创建了一个可重用的Modal组件，它使用门户来渲染其内容。App组件使用React的useState钩子控制模态框的可见性。

让我们分解一下发生了什么：

1. Modal组件检查它是否应该打开（isOpen属性）。
2. 如果打开，它创建一个门户，将内容渲染到'modal-root'元素中。
3. 模态内容包含一个关闭按钮，触发onClose属性。
4. 在App组件中，我们使用状态来控制模态框的可见性。

事件冒泡通过门户

门户的一个迷人特性是，尽管它们可以在DOM树中的任何位置渲染内容，但事件仍然按预期冒泡通过React树。让我们看一个例子：

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

function Parent() {
const [clicks, setClicks] = useState(0);

const handleClick = () => {
setClicks(clicks + 1);
};

return (
<div onClick={handleClick}>
<h1>点击次数：{clicks}</h1>
<Portal>
<Child />
</Portal>
</div>
);
}

function Portal({ children }) {
return ReactDOM.createPortal(
children,
document.getElementById('portal-root')
);
}

function Child() {
return <button>点击我！</button>;
}

在这个例子中，点击门户内的按钮仍然会触发父组件的点击处理程序，增加点击次数。这种行为非常有用，因为它保持了预期的事件传播，无论组件实际在DOM中的位置如何。

最佳实践和注意事项

使用门户时，请记住以下几点：

1. 可访问性：确保你的门户内容对屏幕阅读器等辅助技术是可访问的。
2. 事件处理：记住，事件冒泡通过React树，而不是DOM树。
3. 样式：门户内容可能需要单独的样式考虑。
4. 清理：组件卸载时不要忘记清理你的门户。

门户方法

以下是与React门户相关的主要方法：

方法	描述
ReactDOM.createPortal(child, container)	创建一个门户。child是任何可渲染的React子元素，container是一个DOM元素。
ReactDOM.unmountComponentAtNode(container)	从DOM中移除已挂载的React组件并清理其事件处理程序和状态。

结论

React门户是一个强大的特性，它允许你在渲染时跳出传统的组件层次结构。它们特别适用于创建模态框、工具提示和其他需要视觉上“跳出”其容器的UI元素。

记住，能力越大，责任越大！明智地使用门户，并始终考虑它们对你的应用结构和可访问性的影响。

快乐编码，愿你的门户总能引领你进入React应用的新维度！

Credits: Image by storyset