關於react實現類似vue keep-alive 的cache router的功能解決方案

// 問題來源  

眾所周知react是單頁面應用，在路由發生變化的時候，她所對應的頁面或者組件會被卸載。當路由加載的時候，原頁面所有的數據都會重新加載

這在移動端的用戶體驗可能是一個重大災難！

比如列表滾動到第20頁或者tab切換第三個tab 再去滾動列表進入詳情頁，當你返回的時候你原來的瀏覽記錄被重新加載了，這個體驗會是非常差。

react官方暫時未找到類似於vue的keep-alive功能的api，網上差了一些開源的插件，有點不太敢使用，對於整個項目來講，使用一個陌生的api來控制整個項目，實在有點冒險。 基於這個問題，我這邊有個相對而言稍微優雅的解決方案如下

1 緩存當前pageNo，或者tabNo，不一定要存儲在redux當中，因為react是單頁應用，你只需要加pageNo，tabNo定義在react頁面組件之外即可，每次加載的時候，她只會重新加載react類，外部的數據不會重新加載。

2 有人會提出，將列表數據存儲在redux中，試想一下如果業務復雜，那該是多大的代碼量。

3 為此可以跟后端定義一些接口，比如我頁面加載5頁的數據，先緩存5這個頁碼，當返回重新加載的時候，可以直接全部拉取這5頁的數據，並做相應的滾動，接下來滾動邏輯再按照分頁邏輯去做。

4 此方案不是最優解，在我這實現的時候，稍微提升了用戶體驗。大家如果有意見的話，大可提出。

const pageNo = 0;
const tabNo = 0
const cacheId = null;



export default class A extends React.Componet {

    constructor(props){

    }

    pageNo = pageNo

    tabNo = tabNo;

    componetDidMount() {
        if(pageNo > 0) {
            this.getData(pageNo,()=>{
                swpier(cacheId)
            })
        }
    }


    onPageChange = (pageNo) => {
        pageNo = pageNo;
        this.pageNo = pageNo;
    }
}