React解决白屏问题

咱们先看看react白屏是如何产生的？在生产环境下，就是build之后。首页滑动到第二屏，点击商品，跳转到商品详情页面，再从商品详情页面返回到首页就会出现白屏情况。

一切原由都是因为单页面应用的缘故，那么如何解决白屏问题呢？

解决思路：既然是首页白屏那么就要从首页开始解决问题，咱们先做一个实验，比如咱们不改写代码如何解决，返回到首页后，出现白屏，然后咱们用手触摸向下滑动，白屏就没有了，可以正常访问，知道了这个方案之后，解决白屏就简单了，只需要在返回到首页时设置一下滚动条位置就可以了，看一下代码如何实现：

在首页的生命周期钩子函数里写入：

componentDidMount(){
     setTimeout(()=>{
        document.documentElement.scrollTop=0;
        document.body.scrollTop=0;
    },300);
}



这样就可以了，细心的朋友可以看到为什么要有setTimeout呢？那是因为ios下面直接设置scrollTop不会生效，需要用setTimeout做一下延迟就行了。