javascript - 通过 Web Worker 将组件克隆到新窗口

Question

我正在寻找一种方法来跨窗口/选项卡移动带有状态的反应组件，以向我们的界面提供交互式分屏显示。

目前，我有一个共享的网络工作者设置，其中 2 个窗口相互通信并在移动组件时传递数据。

我正在努力解决的是传递反应组件并让新窗口将其渲染出来。我一直在考虑一些可能性，首先renderToString()在该组件上使用并通过网络工作者将其传递到新窗口但是我不确定在客户端上加载该组件的正确实现直接地。还研究了使用 redux 存储并将此上下文保存在 web worker 中，以便重新映射状态。

理想情况下，我想要一种可以编码/解码的组件当前状态的数据表示。

非常感谢任何想法！

标签： javascriptreactjsweb-worker

Answer 1

您可能会将React 组件视为状态的表示。

因此，您必须在窗口/选项卡之间共享的是一种状态。如果您的反应应用程序处理状态更改，反应组件将同步。

如果您的堆栈中有后端，您可以将状态与所有窗口/选项卡中的后端同步。

如果您想要“实时”客户端同步，您可以使用您的共享网络工作者解决方案，并且只共享一个可序列化的状态。

如果你使用 redux，你可以使用redux-persist和自定义的“web worker”存储实现。