问题: Relay 和其他一些组件滥用内部机制来获取组件的持久标识。这实际上用于在组件暂时卸载后恢复其状态。为了这个用例,滥用 Flux 存储也很常见。基本上,由于目前还没有这个功能,所以鼓励大家在需要这个功能的时候使用 Flux 处理所有事情。
问题的目的: 讨论一个公共 API,用于使组件进入休眠状态并在组件重新挂载时恢复其状态。
用例可以分为三个场景:
- 列表项不在视图中:例如无限滚动(如“表格视图”),其中一行最终需要被回收以节省不可见树所占用的内存。
- 详细信息视图:在主-详细视图中,点击列表中的一个项目会切换详细信息视图的状态。当你再次点击原始视图时。
- 后退/前进按钮:当你导航时,你想保存状态的快照。新视图可以更改状态,当你按下返回按钮返回到之前的状态时,你想恢复子树的原始状态。
我们至少希望支持非序列化的形式。你可以想象有一个将此序列化为 JSON 或其他数据结构的 API,但那是一个潜在的后续工作,不一定是这个问题的一部分。
一个潜在的 API:
class View {
state = { stateKeys: [{}, {}, {}] }
render() {
return <ChildView key={this.state.stateKeys[this.props.index]} />;
}
}
基本上,使用对象作为键。与正常的键语义不同,子树的状态将永久保留在内存中。我们使用 WeakMap 来保持状态。如果对象永远消失,垃圾回收器将收集该子树的状态。这解决了所有三个用例。
2条答案
按热度按时间sqougxex1#
就个人而言,我仍然喜欢这种状态提升模式:
4595 (评论)
从可用性的Angular 来看,这种模式几乎完全相同(区别非常微妙),但不需要React提供任何特殊支持。
csga3l582#
我已经亲自使用过这个悬挂模式:
https://github.com/ccorcos/meteor-react-instance
它运行得相当好,但它显然应该以某种方式融入React。不过我现在更倾向于使用Redux。