react.js - 一个关于react状态保留的问题
问题描述
一个react相关的问题吧
是这样的，用react写的一个单页应用，想要实现一个类似app的效果。
有两个页面，一个是商品列表页，可以滚动然后加载更多的。点击单个商品可以进入到商品详情页。
现在我希望实现的效果是当我在商品列表页滚动到我想要看的商品的地方的时候，点击商品，进入到商品详情页，然后支付是什么的之后返回到商品列表页，希望商品列表页还是保持着我离开时候的状态，那个位置，（如果有选项卡什么的也是保持着），这样就能在原来的地方继续浏览，达到一种app的效果。但是当从前面进去的时候是会初始化加载数据，展现初始的状态的。
也就是说对于商品页:
从别的页面进入到商品列表页的时候展现初始状态
从商品详情页返回到商品列表页的时候，商品列表页能回到离开时的状态
我用react-native写过android的app，发现它用react-navigation做导航的时候进入新的路由的时候旧页面是还在的，返回之前的页面的时候它还是原来那样，但是第一次进去的时候它是会加载数据初始化页面的。
那么这种效果能不能在react写的单页应用有没有可能实现呢？怎么实现的呢？
我能想到的几种方法:
用
react-route4的新特性，之前听说的，还没有去研究，不太清楚怎么用，可行吗？在离开商品列表页前用
redux或者localstorage把滚动距离、tab、数据等保留下来，返回到这个页面的时候再从store或者localstorage里面拿出来。但是这样好像很麻烦......还有另外一个问题是要实现进入这个商品列表页面的时候是初始化加载最新的数据的，所以就不知道怎么判断进入到这个页面的时候是从从前面第一次进入的还是从返回的方式进入的。之前我就是这样做的，但是发现这种方法真的有点笨，有点烦，也遇到刚刚我所说的问题。不知道能不能实现像前面我所说的对路由进行保持，像
app那样，点击进入新页面的时候旧页面不要卸载，返回的时候还可以回到，但是以返回的方式离开的页面就真正的被卸载了
因为自己工作时间还不是很长，还是缺乏真正的历练，不知道你们真实的生产环境和工作环境中是怎么实现这样的效果和解决这样的问题的？最好能给一下思路和例子。
了解你的需求了，react-rounte 不能实现状态的缓存，也就是你提到的滚动的信息，状态会丢失。
推荐你使用 react-keeper
https://zhuanlan.zhihu.com/p/...
这个plugin 可以缓存一些具体的页面，详细你可以了解下API.
这个方案带来的负面效果是在跳转回来后不会触发生命周期函数（只有第一次触发），如果你有自己的逻辑，就得自己控制了。
这篇关于react.js - 一个关于react状态保留的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
