Leanote's Blog

推荐以下两种手动保存状态的方式

1. 将需要保存状态组件的state提升至父组件中保存。
2. 使用 css visible 属性(display还是content-visibility ? )来控制需要保存状态组件的渲染，而不是使用 if/else ，避免React将其卸载。

目前市面上自动状态保存库主要从两方面下手：

1. 改变路由机制，通常基于 React-Router 二次开发。React-Router 在路由切换时默认卸载非活动组件，因此这些库通过重写 React-Router 中的部分功能或者将其拓展的方式使得在路由切换时相关组件不被直接卸载，而是缓存下来。这种实现方式决定了状态保存的粒度只能具体到SPA的页面级别。
2. 改变React组件被移除的方式。React在组件被移除时默认是被卸载的，这些库通过某些方式阻止或欺骗React使相关组件在移除时不被直接卸载，而是缓存下来。通过这种实现方式，状态保存的粒度可以精细到组件级别。
3. React官方在一些关于 strict mode 的回复中提到了其正在开发的 <Offscreen> 组件，并且预计其在 react@18.X（非18早期版本）中可能会出现，其功能与vue <keep-alive> 类似。

根据对目前市场上存在的相关解决方案的调研，这里给出以下几点建议：

• 如果项目中需要状态缓存处理的数据量较小，那最好还是按照React官方的建议，手动解决状态缓存问题。
• 如果处理数据量较大，且缓存粒度为页面级别，那么推荐使用 react-router-cache-route。
• 如果处理数据量较大，且缓存粒度为组件级别，或者你的项目框架采用了umi（无法直接触及react-router），或者干脆没有使用react-router路由，那么推荐使用 react-activation 。此外umi中使用 react-activation 可以直接使用其封装插件 umi-plugin-keep-alive。