react 实现类似vue中的<keep-alive>的功能，并解决antd-mobile切换回来时的空白

标签：状态   手机   ons   console   str   ...   pre   const   额外   

1. 在移动端的spa页面中，只要使用到了路由就很有必要使用到状态保存的功能，这样才能保证在页面进行切换的时候，让用户可以看到刚才滑动的地方，让用户的体验更加友好。这儿我找到了react-router-cache-route这个插件，使用方法直接参考文档。

2. 在使用了这个插件以后，结合着antd-mobile使用时。会出现轮播图空白的现象，这个现象在手机端显得忧外的明显
   

3. 上面问题的解决方法就是使用 react-router-cache-route 这个插件以后额外引入的声明周期，然后使用 forceUpdate 进行强制更新。代码如下：

constructor (props) {
    ...
    props.cacheLifecycles.didRecover(this.componentDidRecover) 
}

componentDidRecover = () => {
  console.log(‘被恢复时‘);
  // 强制更新
  this.forceUpdate();
}

react 实现类似vue中的<keep-alive>的功能，并解决antd-mobile切换回来时的空白

标签：状态   手机   ons   console   str   ...   pre   const   额外   

原文地址：https://www.cnblogs.com/usebtf/p/10176719.html