Javascript Node.js：如何序列化/反序列化React组件？

我想序列化一个React元素（给定props的React组件的实例）并在别处反序列化它。你为什么问？我希望能够通过标准输出从一个进程发送类，并在另一个进程中呈现它。我还希望呈现的组件是交互式的，因此仅使用

ReactDOM.renderToString（）

是不够的

我所尝试的：

• 将其序列化为字符串并使用

  eval（）

  对其进行反序列化
• 分别为

  JSON.stringify（）

  和

  JSON.parse（）

  使用自定义替换程序和恢复程序函数

MyReactComponent.toString（）

返回：

"function MyReactClass() {
    _classCallCheck(this, MyReactClass);

    _get(Object.getPrototypeOf(MyReactClass.prototype), 'constructor', this).apply(this, arguments);
}"

它不包含我的组件特有的任何方法（例如

render（）

或

constructor（）

）

---

请参见JS Bin中的示例代码：

，以回答我自己的问题：

// If I stringify this
JSON.stringify({
  type: `React.createClass({
    render: function() {
      return <span>{this.props.name}</span>
    }
  })`,
  props: {
    name: 'Jorge'
  }
})

// Then I am able to parse it and deserialize it into a React element
let {type, props} = payload
// In Node
React.createElement(vm.runInNewContext(type, {React}), props)
// Not in Node
React.createElement(eval(type), props)

//如果我将此字符串化
JSON.stringify({
类型：`React.createClass({
render:function（）{
返回{this.props.name}
}
})`,
道具：{
姓名：“豪尔赫”
}
})
//然后我能够解析它并将其反序列化为React元素
设{type，props}=payload
//在节点中
React.createElement（vm.runInNewContext（类型，{React}），props）
//不在节点中
React.createElement（评估（类型）、道具）

我到处找了找，什么也没找到

我目前正在编写自己的水合物/脱水器，它将react组件转换为参数数组，并以递归方式传递给

react.createElement（）

。我认为这是唯一可靠的方法。我可能会为它建一个小图书馆

理论上，也许可以使用

React.renderToString（）

，并传递字符串？但是你会使用

危险的LysetinerHTML

：\

另一更新：

这是图书馆：

它有局限性，不是我写过的最漂亮的代码，但它也有不错的测试覆盖率。编写起来比我想象的要困难得多，最后我牺牲了一些非常想要的功能来实现一致性。希望这些将随着时间的推移而得到改进，并且pull请求是受欢迎的

但它是有效的

---

编辑：在沿着这条路线走了一段路之后（实际上在代码中添加了大量功能，我没有添加到repo中，因为我没有添加足够的测试覆盖率），我们最终决定这是一个兔子洞的问题，应该只用于相当简单的用例，我们的用例引入了足够的复杂性，以至于它变得太过复杂，不值得添加到代码中的认知负载。我要提醒某人不要走这条路。

看一看。这个包允许您将react组件序列化为JSON字符串并返回

不确定RE renderToString是什么意思-在客户端上呈现和初始化后，它仍然是交互式的。如果您的状态在存储中（例如redux），则无需担心序列化react组件—您只需序列化存储即可。当然，组件实例中的任何状态都将丢失，但您可以编写纯组件。问题是目标位置不存在React组件类，因此我无法在目标位置调用

ReactDOM.render（）

。我正在试图弄清楚如何从目标访问React组件类，是否将其作为一个字符串从源（尚未工作）发送，将其保存到一个文件，并要求从目标访问该文件（因为两个进程将在同一台机器上运行），等等。您能否不发送整个文件，加载它并在接收端使用eval？您能提供一个特定的用例吗？在客户端之间通常不共享组件的实例，只共享在其他地方创建新实例所需的数据。我正在构建一个Atom插件，允许开发人员编写代码并可视化结果。我想允许特殊的可视化，所以可视化代码将在开发人员端编写，并在插件端呈现。所有的通信都发生在console.log->stdout，所以是字符串。我认为将viz代码序列化为字符串并反序列化（eval）它并使用它来呈现交互式可视化效果会很好。通常，人们无法将

React.createClass（）的输出进行JSON.stringify，因为循环引用（在这些家伙身上也有很多难看的内部逻辑）。如果它在这个实例中工作，那么它要么现在已经过时，要么太简单了，不会遇到任何非平凡示例所遇到的问题。它还使用eval，这是我们真正想要避免的。