V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
17681880207
V2EX  ›  React

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

  •  
  •   17681880207 · 100 天前 · 1339 次点击
    这是一个创建于 100 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    11 条回复    2024-01-15 10:47:52 +08:00
    zhuxc
        1
    zhuxc  
       100 天前
    写个组件包一下,不展示的隐藏掉就可以了
    codehz
        3
    codehz  
       100 天前
    可以用 experimental 里的 unstable_Activity
    yuheCai
        4
    yuheCai  
       99 天前
    插眼。
    我是自己用样式隐藏的方案自己搞了一个,但是总觉得不优雅
    shunia
        5
    shunia  
       99 天前
    啊,不是自己写样式吗? visibility 就可以了吧,还可以配合做动画。

    不知道 vue 的 keep-alive 能不能自动优化被缓存的组件的重渲染,如果可以的话那确实算是一个卖点。
    17681880207
        6
    17681880207  
    OP
       99 天前
    @shunia 应该是结合路由的 keep-alive 。🥺 自己写的话,好像没什么好的思路。就是要实现管理页面标签卡的功能,打开的页面会有一个标签卡,然后切换再点击标签卡回来会显示之前的内容(比如之前填写了一半的表单)。
    17681880207
        7
    17681880207  
    OP
       99 天前
    @zhuxc @yuheCai 应该是结合路由的 keep-alive 。🥺 自己写的话,好像没什么好的思路。就是要实现管理页面标签卡的功能,打开的页面会有一个标签卡,然后切换再点击标签卡回来会显示之前的内容(比如之前填写了一半的表单)。
    vizards
        8
    vizards  
       99 天前 via iPhone
    目前(截止 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
        9
    17681880207  
    OP
       99 天前
    @vizards 感谢大佬的指点!:)
    herozzm
        10
    herozzm  
       96 天前
    实际上 vue 的 keep-alive 不好用
    17681880207
        11
    17681880207  
    OP
       94 天前
    @herozzm 实际上 vue 的 keep-alive 好用的不得了。😗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   960 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 20:50 · PVG 04:50 · LAX 13:50 · JFK 16:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.