⑴ react缓存函数的方法
给需要缓存的函数加一层高阶组件，在高阶组件中通过ref获取到该组件的实例，在ComponentDidMount中通过ref获取到的实例，调用组件的setState方法，把缓存的上一次的state数据注入进去，在ComponentWillUnmount中通过ref获取到的实例，去获取其所有state的值，并存在缓存中。
React 的函数组件是React 组件的另一种定义方式，两种方式都可以用于定义组件，但是相比于类组件，函数组件要更简单好用些。
由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
⑵ react + tabs 切换有缓存不重新发起请求
可以看到当tab 切换的时候我有个change 事件
在子组件内部 我做了个处理
这样 每当切换的时候 就会有一个 不同的key 传下去 一对比 再次发起请求就好啦
下面进行一个优化
因为我这个内部组件是循环得到的
因此我每次循环都会有个对比 而组件内部就会有个不同的key 做比较 我循环多少次 其实组件就发送了多少个请求 这明显是不合理的
⑶ 在 React 中实现 keep alive
什么是 keep alive
在 Vue 中，我们可以使用 keep-alive 包裹一个动态组件，从而 缓存 不活跃的实例，而不是直接销毁他们：
这对于某些路由切换等场景非常好用，例如，如果我们需要实现一个列表页和详情页，但在用户从详情页返回列表的时候，我们不希望重新请求接口获取，也不希望重置列表的过滤、排序等条件，那这时就可以对列表页的组件用 keep-alive 包裹一下，这样，当路由切换时，Vue 会将这个组件“ 失活 ”并缓存起来，而不是直接卸载掉。
而在 React 中，其实一直以来都没有官方的 keep alive 解决方案，大部分开发者可能都会直接使用 display: none 来将 DOM 隐藏：
但这种方案其实只是在“ 视觉上 ”将元素隐藏起来了，并没有真正的移除，那有没有可能把 DOM 树真的移除掉，同时又让组件不被销毁呢？
这是 React 官方文档 上对 Portal 特性的介绍，值得注意的是，这里只是说“父组件以外的 DOM 节点”，但没有要求这个 DOM 节点是真的在页面上，还是 只是存在于内存中 。 因此，我们可以先通过 document.createElement 在内存中创建一个元素，然后再通过 React.createPoral 把 React 子节点渲染到这个元素上，这样就实现了“空渲染”。
基于这种方案，我们可以进一步封装出一个 Conditional 组件，从而实现通用性的条件渲染逻辑：
首先，我们创建了一个 targetElement ，并且通过 createPortal 将 children 渲染到 targetElement 。 然后，我们会创建一个容器 div 元素，并且通过 containerRef 拿到它的引用。 最后，当 active 为 true 时，我们会把 targetElement 手动添加到 containerRef.current 的内部，反之，则会从其内部移除掉 targetElement 。 实际使用的方式如下：
细心的读者可能会发现，目前我们的 Conditional 组件还有一点小小的瑕疵：当组件初次渲染时，不论当前的 active 是 true 还是 false ， Conditional 组件都会将 props.children 渲染。这对大型应用可能会带来非常明显的性能问题，所以，我们可以为其增加“ 懒加载 ”的特性：
不得不承认的是，基于 Portal 方案的 Conditional 组件并不能包治百病，和 Vue 的 keep-alive 相比，也存在不少缺憾：
⑷ react在浏览器缓存对象
useRecer。因为浏览器内部运用了useRecer状态管理，管理缓存状态，可以更灵活，操纵缓存路由组件，采用reacthooks全新api，渲染节流，手动解除缓存，增加了缓存的状态周期，监听函数等。
⑸ React实现数据驱动的tab页缓存
在开发后台管理页面的时候，会遇到缓存Tab页面数据的需求。在开发时也希望能够使用数组驱动的方式控制Tab页的缓存，并且使用API进一步控制tab页缓存或者其他页缓存。
之前关注的开发者新写了一个模块，正好满足了我的需求
react-activation: https://github.com/CJY0208/react-activation
原理应该是把Alive组件下的dom挂载到Provider组件的display:none的一个节点，当路由切回来时，在从provider中找之前挂在的alive dom。作者已经帮我们实现了，用就是了。
使用react-activation提供的KeepAlive组件包裹你的页面组件，控制KeepAlive的when值
作者提供了demo： 可关闭的路由 tabs 示例
但这个是API控制的，我更希望使用一个[]数据来驱动tabs和页面缓存
使用rex管理这个数据，建立了一个tabs数组，我希望tabs和页面是否被缓存，都是响应这个数组。
我写了2个action去操作这个tabs,新增,和删除
然后我希望rex中的tabs的变化，能触发我的视图更新，用React-Rex提供的connect将store中的tabs绑定到组件上。当tabs发生变化时，我的缓存组件就能响应到，从而改变keepAlive的when值，实现缓存控制
当组件已经能响应tabs的变化时，添加更多功能【关闭/关闭其他/关闭到右侧/关闭全部】，通过写不同的action操作tabs数组就可以了
⑹ react 页面缓存插件react-router-cache-route
此插件可以满足缓存上一页的功能，即：返回上一页的时候，上一页的滚动条、动作状态等等和离开这个页面时的状态保持一致。
搭配 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地址
⑺ React Native性能优化：预加载和缓存View
参考 比如我们做IM的时候，从会话列表进入聊天窗口，经常会有点卡顿感觉，因为聊天对话界面的结构相对比较复杂。如果每次进去都需要重新构建渲染，肯定无法在16ms内完成。解决方法就是准备一个聊天对话界面的样板，在app启动的时候将它预先加载。当需要渲染的时候，只需要将修改对应的值就可以，退去时不要去销毁它，直接cache下来留给下次使用。
具体在react native上怎么实现，这需要定制自己的navigator，因为react native提供的navigator没有这种功能。具体原理就是在navigator的render函数里一直保留需要预先加载和缓存的view，当不需要显示的时候将它隐藏起来。同时需要缓冲的view一定要有初始样板。
⑻ react缓存页面react-keepalive-router
https://blog.csdn.net/sinat_17775997/article/details/123211231
⑼ react hooks之useDebounce useThrottle
防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。
备注：createRef 每次渲染都会返回一个新的引用，而 useRef 每次都会返回相同的引用。
每次组件重新渲染，都会执行一遍所有的hooks，这样debounce高阶函数里面的timer就不能起到缓存的作用（每次重渲染都被置空）。timer不可靠，debounce的核心就被破坏了。使用useRef的目的就是为了解决这个问题。
useRef实现了React组件的缓存机制。
⑽ react-native 怎么解决缓存设置和局部刷新问题
首先使用reactnative编写一个简单的应用，在碰到问题的时候，肯定需要对代码进行调试。目前reactnative支持在Chrome浏览器内进行调试。需要选择Scheme->Run的选项为Debug,否则模拟器中不会出现调试选项。将应用设置为在模拟器中运行，运行后，按...