React如何实现状态自动保存（vue中的keep-alive）

为什么需要状态保存

在React中通常使用路由去管理不同的页面，在切换页面时，路由将会卸载掉未匹配的页面组件，所以比如从列表进入详情页面，等到退回列表页面时会回到列表页的顶部。

什么情况下需要状态保存

已填写但是未提交的表单
管理系统中可切换和关闭的标签

总而言之就是在交互过程中离开需要对状态进行保存的场景。

React为什么不支持

状态保存在vue中可以使用keep-alive进行实现，但是react认为这个功能容易造成内存泄漏，所以暂时不支持。

如何实现

1. 手动保存状态：适用于数据较少的情况
   在componentWillUnmount的时候将状态通过redux进行保存，然后在componentDidMount周期进行数据恢复。

2. 通过路由实现：
   基本思想是，将KeepAlive中的组件也就是children取出来，渲染到一个不会被卸载的组件keeper中，在使用Dom操作将keeper内的真实内容移入对应的keepalive