1. 程式人生 > >react 實現類似vue中的<keep-alive>的功能,並解決antd-mobile切換回來時的空白

react 實現類似vue中的<keep-alive>的功能,並解決antd-mobile切換回來時的空白

  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();
}