React 内存门户

Question

我确实想在内存中创建一个 React 组件树（而不是在 DOM 中），其行为与 React Portal 具有相同的行为，也就是说，它应该使用来自父组件树的上下文。

那么是否可以创建像 Portal 这样的东西，而不是在 DOM 节点上渲染它，"render" 它在内存中（在 DOM 之外）？

请注意，我需要的是树中某些组件的组件生命周期，而可视部分将被隐藏，但在我的情况下，如果我将组件树放在 DOM 中隐藏div性能不好，然后我想测试不同的方法。

Answer 1

我想到了两种可能性：

1) 创建 DocumentFragment 的入口

当您使用 ReactDOM.createPortal 时，您可以将其指向内存中的 documentFragment 而不是页面上的元素。然后应将创建的节点附加到内存中的该片段。我不确定这是否符合您的标准，但它看起来像这样：

class Example extends Component {
  constructor (props) {
    super(props);
    this.fragment = document.createDocumentFragment();
  }

  render() {
    return ReactDOM.createPortal(
      this.children,
      this.fragment
    );

  }
}

2) 创建自定义调节器。

如果您希望数据以某种特定格式输出而不是 DOM 节点，您可以创建自定义调节器。这是一件非常重要的事情，它使用了 react-reconciler 包，react 团队将其描述为 "experimental"，但它可以让您非常精确地控制如何处理渲染结果。

如果这是您想做的事情，您可以在 react-reconciler readme 阅读一些内容，查看用于其他协调器的配置文件可能会有用（请参阅 "host config"自述文件底部附近的链接）

React 内存门户

React in-memory Portal

reactjs

react-portal