react 实现相似vue中的的功能,并解决antd-mobile切换回来时的空白

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

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

  3. 上面问题的解决方法就是使用 react-router-cache-route 这个插件之后额外引入的声明周期,而后使用 forceUpdate 进行强制更新。代码以下:
constructor (props) {
    ...
    props.cacheLifecycles.didRecover(this.componentDidRecover) 
}

componentDidRecover = () => {
  console.log('被恢复时');
  // 强制更新
  this.forceUpdate();
}
相关文章
相关标签/搜索