如何在React中实现keep-alive？

写在开头

• 不推荐你使用本文这个库，这个库会造成数据驱动断层（即你缓存后，切换回来，确实可以看到跟之前一样的dom，但是数据驱动此时失效了）,下周我会写另外一个可以不断层的库解析

❝

现代框架的本质其实还是Dom操作，今天看到一句话特别喜欢，不要给自己设限，到最后，大多数的技术本质是相同的。

❞

• 例如后端用到的Kafka , redis , sql事务写入 ，Nginx负载均衡算法,diff算法，GRPC,Pb 协议的序列化和反序列化，锁等等，都可以在前端被类似的大量复用逻辑，即便js和Node.js都是单线程的

❝

认真看完本文与源码，你会收获不少东西

❞

❝

框架谁优谁劣，就像Web技术的开发效率与Native开发的用户体验一样谁也不好一言而论谁高谁低，不过可以确定的是，web技术已经越来越接近Native端体验了

❞

• 作者曾经是一位跨平台桌面端开发的前端工程师，由于是即时通讯应用，项目性能要求很高。于是苦寻名医，为了达到想要的性能，最终选定了非常冷门的几种优化方案拼凑在一起

• 过程虽然非常曲折，但是市面上能用的方案都用到了，尝试过了，但是后面发现，极致的优化，并不是1+1=2，要考虑业务的场景，因为一旦优化方案多了,他们之间的技术出发点，考虑的点可能会冲突。

• 这也是前端需要架构师的原因，开发重型应用如果前端有了一位架构师，那么会少走很多弯路。

• 后端也是如此

Vue.js中的keep-alive使用：

在Vue.js中，尤大大是这样定义的：

keep-alive主要用于保留组件状态或避免重新渲染

基础使用:

<keep-alive>
  <component :is="view"></component>
</keep-alive>

大概思路：

❝

切换也是非常平滑，没有任何的闪屏（由于这里不支持gif图，可以看我的原文:https://segmentfault.com/a/1190000020413804）

❞

❝

特别提示：这里每个组件，下面还有一个1000行的列表哦～ 切换也是秒级

❞

图看完了，开始梳理源码

第一步，初次渲染缓存

import {Provider , KeepAlive} from 'react-component-keepalive';

将需要缓存渲染的组件包裹，并且给一个name属性即可

例如：