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

Posted 2023-04-14

【中文标题】React Portals 如何在不同的子树中保存来自提供者的上下文？

【英文标题】：How do React Portals preserve Context from Providers in a different subtree?

【发布时间】：2019-12-21 08:36:06

【问题描述】：

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

反过来，如果您在子树之外渲染某些内容，它就无法访问该上下文。 React Portals 解决了这个问题，所以如果你想在子树之外渲染一些东西，你可以在同一个子树中进行。我认为React docs touch on this a little：

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

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

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

【参考方案1】：

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

这个article在这里谈了一点

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