React Portals 如何在不同的子树中保留来自提供者的上下文？
How do React Portals preserve Context from Providers in a different subtree?
Portals 解决的一个有趣且令人惊奇的 属性 是保留来自 Provider 的上下文，即使您的组件需要在其他地方呈现。如果您使用 ContextProvider 包装组件子树，则在该子树中呈现的任何组件都可以访问上下文值。
反过来，如果您在子树之外渲染某些内容，它将无法访问该上下文。 React Portals 解决了这个问题，所以如果你想在子树之外渲染一些东西，你可以在同一个子树中进行。我认为 React docs touch on this a little:
Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the React tree regardless of position in the DOM tree.
我想我没有概念化这实际上是如何工作的。 React Portal 如何能够访问 Context 而无需在同一子树中呈现？听起来像是在幕后，Portal 是 "React Tree" 的一部分？所以一定有花哨的"pass information and then render the portal logic"？明确我的问题
门户网站在保留对上下文值的访问方面到底是如何工作的？
我已经有一段时间没有收到答案了——我希望深入研究 React 的代码，但一直没有机会（希望有一天能更新我的答案），但简而言之，这如何工作在幕后，React 维护着它自己的组件树（你可能听说过这被称为虚拟 DOM）并且在其中，创建的组件仍然存在于虚拟中的 Provider 子树中DOM.
这个article这里稍微讲一下
Instead of making two calls to ReactDOM.render(), we create two portals and render both under our top-level Provider. ComponentA and ComponentB will be rendered in two different points in the DOM, but they share the same React tree, thanks to portals.
Portals 解决的一个有趣且令人惊奇的 属性 是保留来自 Provider 的上下文，即使您的组件需要在其他地方呈现。如果您使用 ContextProvider 包装组件子树，则在该子树中呈现的任何组件都可以访问上下文值。
反过来，如果您在子树之外渲染某些内容，它将无法访问该上下文。 React Portals 解决了这个问题，所以如果你想在子树之外渲染一些东西，你可以在同一个子树中进行。我认为 React docs touch on this a little:
Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the React tree regardless of position in the DOM tree.
我想我没有概念化这实际上是如何工作的。 React Portal 如何能够访问 Context 而无需在同一子树中呈现？听起来像是在幕后，Portal 是 "React Tree" 的一部分？所以一定有花哨的"pass information and then render the portal logic"？明确我的问题
门户网站在保留对上下文值的访问方面到底是如何工作的？
我已经有一段时间没有收到答案了——我希望深入研究 React 的代码，但一直没有机会（希望有一天能更新我的答案），但简而言之，这如何工作在幕后，React 维护着它自己的组件树（你可能听说过这被称为虚拟 DOM）并且在其中，创建的组件仍然存在于虚拟中的 Provider 子树中DOM.
这个article这里稍微讲一下
Instead of making two calls to ReactDOM.render(), we create two portals and render both under our top-level Provider. ComponentA and ComponentB will be rendered in two different points in the DOM, but they share the same React tree, thanks to portals.