关于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;
    }
}