Portal

默认情况下，所有的组件都是会被渲染到 React DOM 树中，但是在一些特别需求的情况下，组件就会需要脱离 DOM 树，独立位于页面的某一个部分。为了打到这个目的，React 提供了 Portal。Portal 提供了一种将子节点渲染到父节点以外的 DOM 节点的解决方案。一个最经典的例子是渲染一个全局的 Modal 对话框，这种对话框通常会被插入到 body 中来完成复用。

用来创建 Portal 的函数是React.createPortal(children, domNode, key?)。其中children代表了一个要被放置在domNode位置的 React 组件，domNode则是用来指定一个用来存放 Portal 内容的 HTML DOM 节点，通常会使用document.body。

例如可以这样来创建一个放置在document.body里的节点。

import { createPortal } from "react";

function Modal() {
  return (
    <div>
      <p>以下节点在document.body中。</p>
      {createPortal(<p>Portal节点</p>, document.body)}
    </div>
  );
}

Portal 只会改变 DOM 节点所在的位置，并不会改变节点的渲染和逻辑处理行为。而且 Portal 节点依旧可以访问 React DOM 树中父级节点提供的 Context 对象，其产生的事件也会沿着 React DOM 树进行冒泡。