在React中，Portals 是一种技术，允许你将组件的子节点渲染到父组件DOM层次结构之外的DOM节点中。通常，React组件会按照嵌套结构渲染其子节点，但在某些情况下，我们希望将组件内容放置在DOM的其他位置，比如模态框、工具提示、弹出菜单等。React Portals正是为这种需求提供了解决方案。

为什么使用React Portals？

当我们需要将组件内容渲染在特定的DOM节点中，但这个节点不在父组件的DOM树内时，Portals提供了理想的方式。例如，当我们需要在页面的顶部渲染一个模态框，而模态框的触发按钮却在页面的底部。传统的嵌套方式可能会受到CSS的z-index、overflow属性等限制，而使用Portals可以轻松地将模态框渲染到根节点或者其他不受限制的位置。

如何使用React Portals？

使用React Portals非常简单。你只需调用 ReactDOM.createPortal(child, container) 方法，其中 child 是要渲染的React节点，container 是你希望渲染内容的DOM节点。

import ReactDOM from 'react-dom';function Modal({ children }) {return ReactDOM.createPortal(<div className="modal">{children}</div>,document.getElementById('modal-root') // 将内容渲染到 #modal-root 节点);
}

在上面的例子中，Modal 组件中的内容将被渲染到 #modal-root 这个DOM节点中，而不是嵌套在其父组件的DOM结构中。

使用场景

1. 模态框 (Modal)
2. 工具提示 (Tooltip)
3. 弹出菜单 (Dropdown Menu)

这些场景通常需要突破父组件的DOM边界，使其在页面的其他部分渲染，React Portals为此提供了一个优雅的解决方案。

注意事项

虽然Portals允许组件在视觉上脱离父组件，但事件冒泡仍然会遵循React的组件树结构。也就是说，即使组件通过Portal渲染到不同的DOM节点中，其事件仍然会向上传递到父组件。

事件冒泡示例场景

例如，有一个通过Portal渲染的模态框组件，当你在模态框内部点击一个按钮时，尽管这个模态框的DOM结构在页面的顶层（例如body下），但事件冒泡路径还是会从子组件到父组件（即原来的React组件树结构），而不会直接跳过中间的React组件

总结

React Portals 是一种强大的工具，尤其在处理UI组件时，使你能够灵活地管理DOM节点的渲染位置，而不受限于React组件树的嵌套关系。通过合理使用Portals，你可以更轻松地构建复杂的UI组件，提高应用的用户体验.
PS:但事件冒泡仍然会遵循React的组件树结构.