React Portal 如何在不同的子树中保留 Provider 的上下文？

Question

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

反过来，如果您在子树之外渲染某些内容，它就无法访问该上下文。React Portals 解决了这个问题，所以如果你想渲染子树之外的东西，你可以在同一个子树内完成它。我认为React 文档对此有所涉及：

无论子级是否是门户，诸如上下文之类的功能都完全相同，因为无论 DOM 树中的位置如何，门户仍然存在于 React 树中。

我想我并没有概念化它实际上是如何工作的。React Portal 如何能够访问 Context 而无需在同一子树中渲染？听起来在幕后，Portal 是“React Tree”的一部分？那么一定有一些奇特的“传递信息然后渲染门户逻辑”？明确我的问题

门户究竟如何工作来保留对上下文值的访问？

Answer 1

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

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

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