前端学习进阶之React状态保存

不打扰是莪最后的温柔 提交于 2020-03-10 03:28:57

今天接小编就给大家讲一讲React状态保存相关的知识点,一起来看看吧!

状态保存,是指再次加载页面时还原表格状态。在Vue中,我们可以非常便捷地通过标签实现状态的保存,该标签会缓存不活动的组件实例,而不是销毁它们。但是在React中并没有这个功能,前端人员又该如何实现状态保存呢?

1、手动保存状态

手动保存状态,是比较常见的解决方式,可以配合React组件的componentWillUnmount生命周期,通过redux之类的状态管理层对数据进行保存,通过componentDidMount周期进行数据恢复。

在需要保存的状态较少时,这种方式可以比较快地实现我们所需功能,但在数据量大或者情况多变时,手动保存状态就会变成一件麻烦事。为了不需要每次都关心如何对数据进行保存恢复,我们需要研究如何自动保存状态。

2、通过路由实现自动状态保存(通常使用react-router)

1)重写组件,可参考react-live-route。重写可以实现我们想要的功能,但成本也比较高,需要注意对原始功能的保存,以及多个react-router版本的兼容。

2)替换路由库为react-keeper。完全替换掉路由方案是一个风险较大的事情,需要较为慎重地考虑。

3)基于组件现有行为做拓展,可参考react-router-cache-route。如果使用component或者render属性,都无法避免路由在不匹配时被卸载掉的命运。但将children属性当作方法来使用,我们就有手动控制渲染的行为的可能。

目前的状态保存实现方式都有各自的问题,但这是十分常见的需求,因此我们一定要认真对待。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!