react缓存函数的方法

给需要缓存的函数加一层高阶组件，在高阶组件中通过ref获取到该组件的实例，在ComponentDidMount中通过ref获取到的实例，调用组件的setState方法，把缓存的上一次的state数据注入进去，在ComponentWillUnmount中通过ref获取到的实例，去获取其所有state的值，并存在缓存中。

React 的函数组件是React 组件的另一种定义方式，两种方式都可以用于定义组件，但是相比于类组件，函数组件要更简单好用些。

由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

可以看到当tab 切换的时候我有个change 事件

在子组件内部 我做了个处理

这样 每当切换的时候 就会有一个 不同的key 传下去 一对比 再次发起请求就好啦

下面进行一个优化

因为我这个内部组件是循环得到的

因此我每次循环都会有个对比 而组件内部就会有个不同的key 做比较 我循环多少次 其实组件就发送了多少个请求 这明显是不合理的

此插件可以满足缓存上一页的功能，即：返回上一页的时候，上一页的滚动条、动作状态等等和离开这个页面时的状态保持一致。

搭配 react-router 工作的、带缓存功能的路由组件，类似于 Vue 中的 keep-alive 功能。

Route 中配置的组件在路径不匹配时会被卸载（render 方法中 return null），对应的真实节点也将从 dom 树中删除，利用Route暴露的children方法，让我们手动控制渲染。

注意：作者测试使用时版本为1.4.6

缓存语句不要写在 Switch 组件当中，因为 Switch组件会卸载掉所有非匹配状态下的路由，需使用 CacheSwitch 替代 Switch。

使用 when 属性决定何时使用缓存功能，可选值为 [forward, back, always] ，默认值为 forward。

使用 className 属性给包裹组件添加自定义样式。

也可以使用 behavior 属性来自定义缓存状态下组件的隐藏方式，工作方式是根据 CacheRoute 当前的缓存状态，返回一个作用于包裹组件的 props。

使用 CacheRoute 的组件将会得到一个名为 cacheLifecycles 的属性，里面包含两个额外生命周期的注入函数 didCache 和 didRecover，分别用在组件 被缓存 和 被恢复 时

github地址

---