1

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

那么是否可以创建类似 Portal 的东西，但不是在 DOM 节点上渲染，而是在内存中（DOM 外部）“渲染”它？

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

4

1 回答 1

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 团队将其描述为“实验性”，但它可以让您非常精确地控制如何处理渲染结果。

如果这是您想做的事情，您可以在react-reconciler 自述文件中阅读一些内容，查看用于其他协调程序的配置文件可能会很有用（请参阅自述文件底部附近的“主机配置”链接） )

于 2019-10-01T12:42:27.757 回答