React 不依赖第三方库怎么做到页面状态的缓存？

[lin0912happy]

很多时候特别是用户从列表点击进入某一项的详情，这时用户点击返回到列表时，依旧保持上一次的一些页面状态如当前页码，查询条件，列表数据等。
Vue 中有官方的 KeepAlive 组件，而 React 中我也尝试了几个第三方库如 react-activation ，效果不是很满意，特别是必须要降为 React17 版才能用。
如果要在离开页面时将状态缓存到 Zustand ，返回时再从 Zustand 中取出回显，如果页面用到的状态很多的话也非常繁琐，想问一下哥哥们有没有什么好的解决方案或者推荐用法。
谢谢哥哥们！

[heimoshuiyu]

window.mycache ={}
你在制造原本就不存在的问题

[nulIptr]

混乱邪恶派：不用 useState ，所有状态都存在 zustand 就可以了

[90xchun]

考虑需要跨页数据的更新情况，把数据通过自定义 hooks 方法，useCache 去访问，putCache 更新数据（同步 state ），这样就不存在你说的单页应用，页面跳转后列表数据就丢了的情况，useCache 里面把数据存放到 window 上面。目前就是这样解决的

[haodaking]

URL 状态管理，可以试一下 nuqs
https://nuqs.47ng.com/

[canvascat]

不依赖第三方库=把第三方库功能实现一遍🐱‍👤

[lovessz]

楼上的 url+请求缓存是正解

[hedwi]

你搞成单页面啊 搞个变量控制 如果是列表就展示列表 如果点到详情了 就隐藏列表 显示详情

[dudubaba]

这个确实没有多优雅的方案，官方的方案也迟迟没出来，全是黑魔法实现的。

[importmeta]

好问题, 曾经写过一个国企外包项目, 里面有一个多页签系统.
网上也有类似的教程, 这个不错.
https://juejin.cn/post/7269063053878771768

[passion336699]

之前用 react-activation 做了这个效果，和 Vue 的 keep-alive 一样，页签来回切也不变化

模板： https://github.com/PassionZale/create-app/tree/main/template-react-admin

[passion336699]

npm create @whouu/app@latest project-name

选 template-react-admin 可以初始化一个空的项目，里面写了点示例，路由跳转新增页签、删页签清缓存这样