javascript - React Portals 如何在不同的子树中保存来自提供者的上下文？

因此，Portals 解决的一个有趣且令人惊奇的属性是即使您的组件需要在其他地方呈现，也可以保留 Provider 的 Context。如果您使用 ContextProvider 包装组件子树，则在该子树中呈现的任何组件都可以访问上下文值。

反过来，如果你在子树之外渲染了一些东西，它就无法访问那个上下文。React Portals 解决了这个问题，所以如果你想在子树之外渲染一些东西，你可以在同一个子树中进行。我认为React 文档稍微涉及到了这一点：

无论孩子是否是门户，上下文等功能的工作方式完全相同，因为门户仍然存在于 React 树中，无论在 DOM 树中的位置如何。

我想我并没有概念化这实际上是如何工作的。一个 React Portal 如何可以访问上下文而不需要在同一个子树中呈现？听起来好像在幕后，Portal 是“React Tree”的一部分？所以一定有什么花哨的“传信息，然后渲染门户逻辑”？要清楚我的问题

门户在保留对上下文值的访问方面究竟是如何工作的？

标签： javascriptreactjsreact-contextreact-portal

我已经有一段时间没有收到答案了——我希望深入研究 React 的代码，但没有机会（希望有一天能更新我的答案），但简而言之，这是如何工作的，React 正在维护它自己的组件树（您可能听说过这称为虚拟 DOM），并且在其中，创建的组件仍将存在于虚拟 DOM 的 Provider 子树中。

这篇文章在这里稍微说一下

我们没有对 ReactDOM.render() 进行两次调用，而是创建了两个门户并在我们的顶级 Provider 下渲染它们。ComponentA 和 ComponentB 将在 DOM 中的两个不同点呈现，但由于门户，它们共享相同的 React 树。