难度级别：中级及以上 提问概率：60%
关于保存状态这道题，面试官会提前陈述一个场景。例如一个列表页，顶部有检索区域，用户已经做了一定的筛选，并且查询出列表数据。当用户查看到第三页的时候，点击“查看详情”按钮进入了详情页。那么这个时候，如果从详情页返回列表页，如何使筛选项和当前页码处于跳转前的状态呢？
我们知道，在没有前端路由的项目中，从详情页返回列表页，页面会刷新，导致所有筛选项被重置，查询接口重新获取数据，当前页码也会再次处于第一页；在React项目中呢，大多数项目属于单页面应用，所以会使用前端路由管理页面。具体业务组件和路由会保持对应关系，如果当前切换的路由只会匹配对应的组件，未匹配的组件都会被卸载，回到这道题中，当从详情页回到列表页的时候，因为之前列表页组件已经被卸载，即便跳转回来了也只能走重新挂载、初始化、渲染的那一套逻辑，正常情况下也是不能保存之前状态的。那么都有哪些方式可以保存列表页的状态呢？我们一起来看一下。
第一种方式是链接带参数的形式，从列表页跳转到详情页的时候，提前把筛选项和页码以参数的形式拼到详情页的链接上，到了详情页获取到这些参数，保存起来，等跳转回列表页，再把这些参数带回来。但这种方式有明显的弊端，如果需要带的参数比较多或者某个参数带有特殊字符，在整个传递过程中就会显得很麻烦。而且，如果用户在详情页点击浏览器的返回按钮，那么这些参数又很难再被带回列表页。
第二种方式，可以在列表页即将离开的时候，在componentWillUnmount钩子函数中，将筛选项和页码通过Redux进行状态管理保存，当用户从详情页跳转回列表页的时候，再取出数据，进行恢复，再次查询。但Redux毕竟是Javascript变量存储，如果用户在详情页做了刷新页面的操作，列表页中存入Redux的数据将会被清空，所以还需要配合LocalStorage这样的持久化本地存储。试想一下，一个列表页筛选项比较少的话，这一套操作下来还可以接受，但如果筛选项比较多呢，如果有多个列表页都需要这样做呢，开发和维护成本必然会非常大。
第三种方式就是实用keep-alive。使用<KeepAlive>把需要存储的列表页组件包裹起来，这样列表页组件也就成了<KeepAlive>组件的children，那么这个children就会被渲染到一个不会被React路由卸载掉的容器内。既然不会被卸载，也就避免了状态消失的问题。但其实这个方案也有一定的弊端，比如用户在详情页停留时间过长，列表页已经新增或是删除了一些数据的时候，用户返回列表页很可能看到的还是老的列表页数据，这就又需要做额外的更新操作，即便如此，这种方式也已经在很大程度上提升了开发效率，而且使后期维护成本也降低了很多。
刷题思考
其实这个问题出现的最重要原因还是因为页面在当前浏览器标签内做了跳转，如果是跳转一个新标签页的形式，也就不存在这个问题了。但更多的时候，我们无法改变产品行为，就只能通过技术手段来达到预期的效果。
在这道题中，即便求职者刚开始就明白面试官想要问keep-alive的知识点，但还是建议先把前面的几种方案描述出来，最后再重点回答keep-alive这个方案。这样可以让面试官觉得你工作经验比较丰富，思路比较开阔。
类似考点
在掌握了本小节知识点的基础上，还需要掌握以下这些问题，例如请你说一说Vue和React中的keep-alive有哪些不同点？例如请你说一说，如果使用keep-alive做了列表页的数据缓存，那么从详情页跳转回列表页的时候，如何获取最新的数据？
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
