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

[项目自荐] Keep-Alive for React DOM

  •  
  •   monexus ·
    shenjunru · 2022-06-14 17:51:23 +08:00 · 1981 次点击
    这是一个创建于 653 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Keep-Alive for React DOM

    https://github.com/shenjunru/react-fiber-keep-alive

    npm install --save react-fiber-keep-alive
    
    • 只基于 React FiberReact Hooks
    • 支持原生的 class component 生命周期。
    • 支持原生的 function componenthooks
    • 支持原生的 context 变化。
    • 支持多组件同时 keep-alive
    • 支持 react-dom v16.8+ / v17 / v18 。
    • Demo: react-router v5
    import React from 'react';
    import ReactDOM from 'react-dom';
    import KeepAlive from 'react-fiber-keep-alive';
    
    const root = document.getElementById('root');
    
    ReactDOM.render((
        <KeepAlive.Provider value={root}>
            ...
            <KeepAlive name="test">
                <YourComponent />
            </KeepAlive>
            ...
        </KeepAlive.Provider>
    ), root);
    

    目前版本 0.6.2, 欢迎试用,提 bug

    6 条回复    2022-06-14 18:35:09 +08:00
    luffy
        1
    luffy  
       2022-06-14 18:03:27 +08:00
    这里的应用场景是什么?

    什么情况下需要你这个库
    sunburst112
        2
    sunburst112  
       2022-06-14 18:05:49 +08:00
    @luffy 多 tab 栏切换缓存上一个 tab 组件的状态 类似 vue 的 keep-alive
    sunburst112
        3
    sunburst112  
       2022-06-14 18:07:20 +08:00
    可以直接包裹 router6 的 outlet 实现效果吗?
    monexus
        4
    monexus  
    OP
       2022-06-14 18:10:55 +08:00 via iPhone
    @sunburst112 目前没用过 react-router6 ,你可以尝试一下,加几行代码而已
    monexus
        5
    monexus  
    OP
       2022-06-14 18:18:07 +08:00 via iPhone
    @luffy 提供整个组件树的状态在 unmount 时被保留,再次 mount 后还原。比如页面导航后退还原原来的页面状态
    weeshin
        6
    weeshin  
       2022-06-14 18:35:09 +08:00
    React 18 不是说要添加这个原生功能了?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1112 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 22:50 · PVG 06:50 · LAX 15:50 · JFK 18:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.