为什么需要状态保存
在React中通常使用路由去管理不同的页面,在切换页面时,路由将会卸载掉未匹配的页面组件,所以比如从列表进入详情页面,等到退回列表页面时会回到列表页的顶部。
什么情况下需要状态保存
已填写但是未提交的表单 管理系统中可切换和关闭的标签 总而言之就是在交互过程中离开需要对状态进行保存的场景。
React为什么不支持
状态保存在vue中可以使用keep-alive进行实现,但是react认为这个功能容易造成内存泄漏,所以暂时不支持。
如何实现
1.手动保存状态:适用于数据较少的情况
在componentWillUnmount的时候将状态通过redux进行保存,然后在componentDidMount周期进行数据恢复。
2.通过路由实现:
基本思想是,将KeepAlive中的组件也就是children取出来,渲染到一个不会被卸载的组件keeper中,在使用Dom操作将keeper内的真实内容移入对应的keepalive