为什么React门户是一种状态？

React 门户（Portal）并不是一种状态，而是一种将子组件渲染到父组件 DOM 层次结构之外的技术。它允许你在 React 应用的任何地方渲染一个组件，即使这个位置并不是它的直接父节点。这种特性在处理模态框、提示框、全局通知等 UI 元素时非常有用，因为这些元素通常需要脱离当前的 DOM 结构来呈现。

基础概念

React 门户通过使用 ReactDOM.createPortal 方法实现。这个方法接收两个参数：要渲染的子元素和一个容器元素。容器元素通常是 DOM 中的一个已有元素，子元素会被渲染到这个容器中，而不是它的父组件中。

优势

脱离当前 DOM 层次结构：允许组件渲染在 DOM 树的任何位置，这对于模态框等 UI 元素非常有用。
避免样式冲突：由于组件被渲染到不同的位置，它可以避免与父组件的样式冲突。
更好的管理全局 UI 元素：如通知栏、提示框等，可以统一管理和维护。

类型与应用场景

模态框（Modal）：模态框通常需要覆盖整个页面，使用门户可以确保它始终在最上层。
提示框（Tooltip）：提示框通常需要跟随鼠标移动，使用门户可以将其渲染到 body 标签下，避免布局问题。
全局通知（Notification）：类似于提示框，全局通知也需要脱离当前的 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">
        <button onClick={onClose}>Close</button>
        {children}
      </div>
    </div>,
    document.body
  );
}

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

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h1>Modal Content</h1>
      </Modal>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));