技术咨询，各位大佬们，现在 react 开发项目，有什么类似 Vue 中的 keep-alive 方案吗？

[17681880207]

主要还是使用 Vue 项目，对 React 理解的比较肤浅。自己也在网上看了各种方案，相对而言都是比较小众，各有各的问题。看到最后，比较好的似乎是 react-activation 组件。

[zhuxc]

写个组件包一下，不展示的隐藏掉就可以了

[chenqt]

https://github.com/StructureBuilder/react-keep-alive/blob/master/README.zh-CN.md

[codehz]

可以用 experimental 里的 unstable_Activity

[yuheCai]

插眼。
我是自己用样式隐藏的方案自己搞了一个，但是总觉得不优雅

[shunia]

啊，不是自己写样式吗？ visibility 就可以了吧，还可以配合做动画。

不知道 vue 的 keep-alive 能不能自动优化被缓存的组件的重渲染，如果可以的话那确实算是一个卖点。

[17681880207]

@shunia 应该是结合路由的 keep-alive 。🥺 自己写的话，好像没什么好的思路。就是要实现管理页面标签卡的功能，打开的页面会有一个标签卡，然后切换再点击标签卡回来会显示之前的内容（比如之前填写了一半的表单）。

[17681880207]

@zhuxc @yuheCai 应该是结合路由的 keep-alive 。🥺 自己写的话，好像没什么好的思路。就是要实现管理页面标签卡的功能，打开的页面会有一个标签卡，然后切换再点击标签卡回来会显示之前的内容（比如之前填写了一半的表单）。

[vizards]

目前（截止 2024.1.10 ） react 还没有真正生产可用的 keep-alive 方案

替代选择：
1. react@experimental 中提供的 unstable_Offscreen ，要求 React 使用 experimental 版本
2. 基于 Suspense 实现的 keep-alive ，比如极简代码实现的 react-freeze ，要求 React 17+
3. 其他介入 React 渲染流程的 hack 实现，比如你已经搜到的

结合路由的方式基本都是手动劫持 Outlet 组件的渲染，使之可以不被 unmount ，转而使用一个新的属性比如 mode 控制子路由组件是否渲染

[17681880207]

@vizards 感谢大佬的指点！:)

[herozzm]

实际上 vue 的 keep-alive 不好用

[17681880207]

@herozzm 实际上 vue 的 keep-alive 好用的不得了。😗