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

Question

React依赖于data-react-checksum属性来重用标记，该标记仅在renderComponentToString中设置（用于组件的服务器端呈现）。

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

背景

我正在开发一个仅限客户端的webapp。该项目的目标之一是尽可能快地渲染，减少未初始化元素的UI“滞后”，JS加载/解析等等。

我想使用localStorage缓存渲染的react-components标记，以便尽早恢复以前的UI状态（再次出于性能原因，无需等待~200ms即可加载和解析反应）。

Answer 1

严格来说，没有办法将一串标记变成一个实时的React组件（至少不是以高效的方式）。此外，它并不真正有意义，因为您的组件可能具有未在最终呈现的DOM字符串上显示的隐藏状态。如果您尝试将字符串还原为组件，则会导致状态不一致。

要做的就是将数据序列化为localStorage，然后从该数据中重现您的组件。但这或多或少会对你的情况有所帮助。

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