React 中保存页面状态/在react中实现vue的keep-alive/React Activation

1.背景
用户访问了一个列表页，点击查进入详情页，从详情页退回列表页时，需要停留在离开列表页时的浏览位置上
在 React 中，我们通常会使用路由去管理不同的页面，而在切换页面时，路由将会卸载掉未匹配的页面组件，所以上述列表页例子中，当用户从详情页退回列表页时，会回到列表页顶部，因为列表页组件被路由卸载后重建了，状态被丢失。

2.常见的解决方式
(1)手动保存状态：配合 React 组件的 componentWillUnmount 生命周期通过dva、 redux 之类的数据流管理工具对数据进行保存，通过 componentDidMount 周期进行数据恢复。这种方法需要每次手动保存与恢复数据，并且像我们自己封装的列表组件，数据的请求和渲染都是在组件上进行的，这就导致在项目没办法保存与恢复数据。
(2)通过样式控制：列表和详情页写在同一个页面上，通过样式来控制组件的显示与隐藏。这种方法代码改动大并且体验不好。

3.自动保存状态
（1）常用轮子分析

组件
react-live-route	实现成本也比较高，需要注意对原始 功能的保存，以及多个 react-router 版本的兼容