[项目自荐] Keep-Alive for React DOM
monexus · shenjunru · 2022-06-14 17:51:23 +08:00 · 2278 次点击这是一个创建于 894 天前的主题，其中的信息可能已经有所发展或是发生改变。
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-domv16.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
 |
1
luffy 2022-06-14 18:03:27 +08:00
这里的应用场景是什么？
什么情况下需要你这个库 |
 |
2
sunburst112 2022-06-14 18:05:49 +08:00
@luffy 多 tab 栏切换缓存上一个 tab 组件的状态 类似 vue 的 keep-alive
|
|
3
sunburst112 2022-06-14 18:07:20 +08:00
可以直接包裹 router6 的 outlet 实现效果吗？
|
 |
4
monexus OP @sunburst112 目前没用过 react-router6 ，你可以尝试一下，加几行代码而已
|
|
5
monexus OP @luffy 提供整个组件树的状态在 unmount 时被保留，再次 mount 后还原。比如页面导航后退还原原来的页面状态
|
 |
6
weeshin 2022-06-14 18:35:09 +08:00
React 18 不是说要添加这个原生功能了？
|
Select Language