react 休眠状态(不一定需要序列化)

ltskdhd1  于 4个月前  发布在  React
关注(0)|答案(2)|浏览(91)

问题: Relay 和其他一些组件滥用内部机制来获取组件的持久标识。这实际上用于在组件暂时卸载后恢复其状态。为了这个用例,滥用 Flux 存储也很常见。基本上,由于目前还没有这个功能,所以鼓励大家在需要这个功能的时候使用 Flux 处理所有事情。

问题的目的: 讨论一个公共 API,用于使组件进入休眠状态并在组件重新挂载时恢复其状态。

用例可以分为三个场景:

  • 列表项不在视图中:例如无限滚动(如“表格视图”),其中一行最终需要被回收以节省不可见树所占用的内存。
  • 详细信息视图:在主-详细视图中,点击列表中的一个项目会切换详细信息视图的状态。当你再次点击原始视图时。
  • 后退/前进按钮:当你导航时,你想保存状态的快照。新视图可以更改状态,当你按下返回按钮返回到之前的状态时,你想恢复子树的原始状态。

我们至少希望支持非序列化的形式。你可以想象有一个将此序列化为 JSON 或其他数据结构的 API,但那是一个潜在的后续工作,不一定是这个问题的一部分。

一个潜在的 API:

class View {
  state = { stateKeys: [{}, {}, {}] }
  render() {
    return <ChildView key={this.state.stateKeys[this.props.index]} />;
  }
}

基本上,使用对象作为键。与正常的键语义不同,子树的状态将永久保留在内存中。我们使用 WeakMap 来保持状态。如果对象永远消失,垃圾回收器将收集该子树的状态。这解决了所有三个用例。

sqougxex

sqougxex1#

就个人而言,我仍然喜欢这种状态提升模式:

4595 (评论)

从可用性的Angular 来看,这种模式几乎完全相同(区别非常微妙),但不需要React提供任何特殊支持。

csga3l58

csga3l582#

我已经亲自使用过这个悬挂模式:
https://github.com/ccorcos/meteor-react-instance
它运行得相当好,但它显然应该以某种方式融入React。不过我现在更倾向于使用Redux。

相关问题