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

时间:2014-04-23 21:13:49

标签: reactjs

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

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

背景

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

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

1 个答案:

答案 0 :(得分:0)

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

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

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