react.js请求接口拿到的数据怎么缓存下来呢?
发布于 3 个月前 作者 liygheart 1388 次浏览 来自 问答

在组件的componentDidMount()方法里请求接口拿数据,然后setState()后渲染,然后页面就把数据渲染出来了

但如果一个页面有tabbar,类似这样 image.png 每个tabbar对应一个页面,在点击每个tabbar的时候,页面加载,切换到另一个tabbar的时候,之前那个页面就componentUnMount()了,然后再切换回来,它又要重新Mount一次,如果请求接口的操作放在页面的componentDidMount()里,那这时候就会又请求一次,这个有些不合理了,想问一下,有什么办法可以解决吗?

8 回复

保存到 AsyncStorage

react原生路由没有类似vue的keep-alive 可以考虑使用一下https://zhuanlan.zhihu.com/p/26308250 如果使用原生路由,用localstorage存一下第一次请求得到的数据,并且可以加上一个时间戳,在componentDidmount中判断控制什么时候需要刷新,什么时候不需要刷新页面(如果localstorage里面有数据,且数据没有过期等等,可以加自己的逻辑)

这是我目前能想到的方案,希望有人能提出更好的方案~

另外说句题外话,我看了几个webapp,切换tab重复刷新的也很常见,可能考虑到业务的因素,也可能是别的原因

@inevermore AsyncStorage可以用在React.js里吗?它好像是React Native里的

@Huqiuwei 放在localstorage里是个方法,感觉不是太好

也可以把三个tabbar里的数据都放在一个接口里返回,通过props向子组件传递数据,但这样适合页面简单点的,如果tabbar里再有子页面就不好了

业务的话,接口设计比较细,就是一个组件(子组件)就是一个接口,比如首页上上面轮播图(一个接口),下面推荐列表(一个接口),公告(一个接口)这样一看就一个首页就要调三次接口,所以后台又给改了,一个页面不管多少组件,都一个接口返回数据,也不知道还有其它好的方法能减少请求次数的

使用redux保存。componentWillMount时,检查state中是否已经有数据了,已有数据可以不用再请求。然后可以的话设置一个定时器,定时查询数据是否有更新。

@sylarmeng 感谢,也是一个方法

需要redux/mobx之类的解决方案, 将state从组件提升到store里面, 组件销毁后state就不会丢失了, 当再次回到这个tab页, 使用state中的数据渲染, 同时发起请求获取最新数据, 获取到后更新store中state, 这样用户不会对着loading发呆

@yinxin630 感谢,后面我试试,还没加入redux 。。

回到顶部