Reactjs 在单页、仅客户端的webapp中重用react组件中的标记

React依赖于数据React校验和属性来重用标记，该属性仅在用于组件服务器端呈现的renderComponentToString中设置

仅在客户端呈现组件时，如何重用react组件标记

出身背景 我正在开发一个只有客户端的webapp。项目的目标之一是尽可能快地呈现，减少未初始化元素、JS加载/解析等造成的UI延迟

---

我希望使用localStorage缓存呈现的react组件标记，以便出于性能原因，可以尽早恢复以前的UI状态，而无需等待约200毫秒来加载和解析react。

严格来说，无法将标记字符串转换为live React组件（至少不能以性能方式）。另外，这并没有真正意义，因为您的组件可能有隐藏状态，而这些隐藏状态没有显示在最终呈现的DOM字符串上。如果尝试将字符串还原为组件，则会导致状态不一致

一件简单的事情是将数据序列化到本地存储中，然后从该数据中复制组件。但这或多或少对你有帮助

---

但是，您仍然可以在放置字符串标记时使用自己的小逻辑，然后让React通过第二次渲染来销毁它。

好吧，我不想从标记生成React组件。React支持，我希望使用此功能，但仅限于客户端。我已经有了缓存标记并在页面加载时恢复它的逻辑，但是react会破坏标记并重新创建，因为缺少数据react校验和。您仍然可以在客户端使用renderComponentToString。当您在上面呈现相同的组件时，它可以正常工作，而不会破坏标记。是的，我已经尝试过了。但是组件会被渲染两次，一次用于缓存，一次用于显示。一些我想避免的事情