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

[monexus]

Keep-Alive for React DOM

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

npm install --save react-fiber-keep-alive

• 只基于 React Fiber 和 React Hooks。
• 支持原生的 class component 生命周期。
• 支持原生的 function component 的 hooks。
• 支持原生的 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

[luffy]

这里的应用场景是什么？

什么情况下需要你这个库

[sunburst112]

@luffy 多 tab 栏切换缓存上一个 tab 组件的状态 类似 vue 的 keep-alive

[sunburst112]

可以直接包裹 router6 的 outlet 实现效果吗？

[monexus]

@sunburst112 目前没用过 react-router6 ，你可以尝试一下，加几行代码而已

[monexus]

@luffy 提供整个组件树的状态在 unmount 时被保留，再次 mount 后还原。比如页面导航后退还原原来的页面状态

[weeshin]

React 18 不是说要添加这个原生功能了？