Vue 中 功能在 React 中的黑客实现
官方文档是这么说的
那么什么是keep-alive呢？用来做什么呢？
首先我们要知道我们用react和vue大多数会选择单页面开发，也就是各种组件组成一个项目，每个页面其实都是一个组件，在页面切换或者触发组件的其他行为时，组件就会被卸载掉(这里不要妄想使用react的componentWillUnmount生命周期，人家是用于组件卸载前的，阻止不了组件的卸载)。那么我们如何要保存一个组件的状态，换句话说就是如何能在切换页面之后内容不变，甚至不重新请求接口呢？
vue 有自己的 keep-alive 组件可以做到
那么react呢
React-activation
其实react针对保留组件状态也有很多不同的方法，其中作者使用觉得最方便，最容易上手的是React-activation。
官方文档：https://github.com/CJY0208/react-activation/blob/HEAD/README_CN.md
其实官方文档写的很详细了，但是因为使用的时候还是遇到一些坑和问题，所以这里记录一下。
- 安装：npm install react-activation
- 配置：官方文档有配置babel步骤，但是其实不配置也可以
- 使用：最外层，一般在入口文件包裹AliveScope，在想要保留状态的组件外包裹KeepAlive
- 手动控制缓存：
react有两种创建组件的方式，一种是类，一种是函数
函数手动控制缓存的方法：引入Hook useAliveController, 使用时const { drop, dropScope, clear, getCachingNodes } = useAliveController()。
类式：引入 withAliveScope，使用时
class App extends React.Component{}
export default withAliveScope(App)
以上两种只是引入方法不同，但是使用是完全相同的，但要注意的是如果要手动控制缓存就要给每一个KeepAlive一个name属性，而且是不同的name属性。
里面的使用方法文档里很清晰了，就不赘述了
- 自动控制缓存
这里要注意的点是，一旦你给设置手动设置缓存之后，自动设置缓存就失效了。而且自动设置缓存类型初始化的时候就放进去了，所以后续即使你更改了true,false类型也不会有任何改变，如果需要改变缓存状态类型那么要使用第四点的手动设置缓存。原理
官方文档解释为：
将 <KeepAlive /> 的 children 属性传递到 <AliveScope /> 中，通过 <Keeper /> 进行渲染<Keeper /> 完成渲染后通过 DOM 操作，将内容转移到 <KeepAlive /> 中由于 不会被卸载，故能实现缓存功能
解析：
