在iOS上使用Tarojs开发时遇到popstate事件导致页面接口重复调用的问题。经排查发现，popstate事件由history.replaceState在业务底层代码中使用引起。在iOS上返回时触发popstate，而在Android上则不会。解决方案包括避免使用replaceState或在回退时重新加载页面，但由于Tarojs/router自身使用replaceState，导致问题难以解决。最后的解决办法是在replaceState后立即reload，以防止popstate事件触发。
背景：
在使用Tarojs开发的时候，发现在ios上跳转至其他页面，再返回回来会出现接口接连调用两次的情况。
排查过程：
1.由于接口调用在组件的didMount里，所以看其他的组件也是didMount调用两次，这让我感觉很诧异，componentDidMount这个生命周期应该不会调用两次的；
2.我打开了weinre查看，发现了有两个一模一样的页面组件，如下图
因为是router层级上double了，所以所有组件都会实例化两次，此时我怀疑是taro/router的问题。
我又去看了一下果园是否也是有同样的情况，结果发现在page componentDidMount里调用的tree/get等首屏数据接口调用了两次。。。
去查看一下@tarojs/router的源码，发现
history被tarojs/router改装了，history.listen监听的回调回在popstate事件触发的时候触发。
现在的问题根源确定了是由于popstate事件的触发，导致了tarojs/router认为当前页面是进行了一次前端路由跳转，所以进行了两次页面级别的渲染，导致所有的组件实例的生命周期都走了两次。那么问题来了，明明我们根本没有利用history的特性，所有的跳转都是刷新式跳转，为什么这个popstate会触发呢。
3.搞清楚popstate的触发机制
最低0.47元/天 解锁文章
扫一扫
5309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
