摘要：
React官方目前还没有发现类似于vue的keep-alive函数的api。互联网上有一些开源插件，所以我不敢使用它们。对于整个项目来说，使用一个奇怪的api来控制整个项目有点冒险。基于这个问题，我有一个相对优雅的解决方案：1.缓存当前的pageNo或tabNo，它不必存储在Redux中。因为react是一个单页应用程序，所以只需要添加pageNo，tabNo是在react页面的组件之外定义的。每次加载时，她只会重新加载react类，而不会重新加载外部数据。
// 问题来源 众所周知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; } }