React-activation使用

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

其实官方文档写的很详细了，但是因为使用的时候还是遇到一些坑和问题，所以这里记录一下。

1. 安装：npm install react-activation
2. 配置：官方文档有配置babel步骤，但是其实不配置也可以
3. 使用：最外层，一般在入口文件包裹AliveScope，在想要保留状态的组件外包裹KeepAlive
4. 手动控制缓存：
   react有两种创建组件的方式，一种是类，一种是函数
   函数手动控制缓存的方法：引入Hook useAliveController, 使用时const { drop, dropScope, clear, getCachingNodes } = useAliveController()。
   类式：引入 withAliveScope，使用时

class App extends React.Component{}
export default withAliveScope(App)

以上两种只是引入方法不同，但是使用是完全相同的，但要注意的是如果要手动控制缓存就要给每一个KeepAlive一个name属性，而且是不同的name属性。
里面的使用方法文档里很清晰了，就不赘述了

5. 自动控制缓存
   这里要注意的点是，一旦你给设置手动设置缓存之后，自动设置缓存就失效了。而且自动设置缓存类型初始化的时候就放进去了，所以后续即使你更改了true,false类型也不会有任何改变，如果需要改变缓存状态类型那么要使用第四点的手动设置缓存。

   原理

   官方文档解释为：

将 <KeepAlive /> 的 children 属性传递到 <AliveScope /> 中，通过 <Keeper /> 进行渲染<Keeper /> 完成渲染后通过 DOM 操作，将内容转移到 <KeepAlive /> 中由于 不会被卸载，故能实现缓存功能

解析：