React Portal 是 React 提供的一种特殊的组件，可以将组件渲染到任意的 DOM 节点中，而不受组件在 DOM 树中位置的限制。

在一些特定场景中，React Portal 可以非常有用，例如：

1. Modal 对话框：Modal 对话框通常需要被渲染在页面的最上层，遮挡住其他组件，防止用户误操作。但是，由于 Modal 的渲染位置与其他组件无关，因此需要使用 React Portal 将 Modal 渲染到页面的 body 元素中。

2. Tooltip 提示框：Tooltip 提示框需要根据被提示的元素的位置来确定自己的位置，并显示在被提示元素的上方或下方。但是，由于 Tooltip 需要显示在页面的最上层，因此也需要使用 React Portal 将其渲染到 body 元素中。

3. 在父组件外部渲染子组件：有时候需要在组件树之外的 DOM 元素中渲染组件，例如 Google Maps 组件等。

在上述场景中，使用 React Portal 可以很好地解决问题，并且非常方便。例如，我们可以使用如下代码将 Modal 对话框渲染到 body 元素中：

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

function Modal({ children }) {
  const [modalRoot, setModalRoot] = useState(null);

  if (!modalRoot) {
    setModalRoot(document.createElement('div'));
  }

  return modalRoot ? ReactDOM.createPortal(
    children,
    modalRoot
  ) : null;
}

function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <Modal>
        <h2>This is a modal dialog</h2>
      </Modal>
    </div>
  );
}

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

在上面的例子中，我们首先使用 useState Hook 创建了一个状态变量 modalRoot，该变量初始值为 null。然后，在 Modal 组件中，我们判断 modalRoot 是否为 null，如果是，就使用 document.createElement() 创建一个 div 元素，并将其赋值给 modalRoot 变量。最后，我们使用 ReactDOM.createPortal() 方法，将 Modal 的子组件渲染到 modalRoot 元素中。

需要注意的是，我们必须将 modalRoot 元素添加到页面中，否则 Modal 将不会显示。我们可以在组件挂载时，将 modalRoot 添加到 body 元素中，并在组件卸载时将其从 body 元素中移除。