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();
}
相關文章
相關標籤/搜索