React 中 Portal 的应用场景有哪些？

推荐答案

在 React 中，Portal 的主要应用场景包括：

1. 模态框（Modal）：将模态框渲染到 DOM 树中的任意位置，通常是在 body 标签下，以避免父组件的样式影响。
2. 工具提示（Tooltip）：将工具提示渲染到 DOM 树中的特定位置，确保其不受父组件样式或布局的限制。
3. 下拉菜单（Dropdown）：将下拉菜单渲染到 DOM 树中的特定位置，避免被父组件的 overflow: hidden 或 z-index 影响。
4. 全局通知（Toast）：将全局通知渲染到 DOM 树中的特定位置，确保其始终显示在页面的最上层。
5. 悬浮层（Overlay）：将悬浮层渲染到 DOM 树中的特定位置，确保其不受父组件布局的影响。

本题详细解读

什么是 Portal？

Portal 是 React 提供的一种将子节点渲染到 DOM 树中任意位置的能力。通过 ReactDOM.createPortal(child, container)，可以将 child 渲染到 container 指定的 DOM 节点中，而不是当前组件的 DOM 结构中。

为什么使用 Portal？

1. 避免样式冲突：某些组件（如模态框、工具提示）需要脱离父组件的 DOM 结构，以避免父组件的样式（如 overflow: hidden、z-index）影响其显示。
2. 提升性能：将某些组件渲染到特定的 DOM 节点中，可以减少不必要的重绘和回流，提升性能。
3. 更好的用户体验：确保某些组件（如全局通知、悬浮层）始终显示在页面的最上层，提供更好的用户体验。

如何使用 Portal？

// www.javascriptcn.com code example
import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    document.body
  );
}

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Modal>
        <p>This is a modal!</p>
      </Modal>
    </div>
  );
}

export default App;

在这个例子中，Modal 组件通过 ReactDOM.createPortal 将其内容渲染到 body 标签下，而不是 App 组件的 DOM 结构中。这样可以确保模态框不受 App 组件样式的影响，始终显示在页面的最上层。

注意事项

1. 事件冒泡：虽然 Portal 将子节点渲染到 DOM 树中的不同位置，但事件仍然会按照 React 的组件树结构冒泡。这意味着在 Portal 中触发的事件仍然可以在父组件中捕获。
2. 生命周期：Portal 中的组件仍然遵循 React 的生命周期方法，如 componentDidMount 和 componentWillUnmount。

通过合理使用 Portal，可以解决许多复杂的 UI 问题，提升应用的性能和用户体验。