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

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

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

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

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

constructor (props) {
...
props.cacheLifecycles.didRecover(this.componentDidRecover)
} componentDidRecover = () => {
console.log('被恢复时');
// 强制更新
this.forceUpdate();
}