react-component-keepalive-ts
v1.0.8
Published
cache React Components
Downloads
266
Maintainers
Readme
React Component KeepAlive
Getting Started
npm i react-component-keepalive-ts
How to use it
package export default KeepAliveProvider
withKeepAlive
Wrap keepAliveProvider
around it.
Components that need to cache state are passed in through withKeepAlive(Component)
.
This function returns the same new Component.
Now your component can be cached!
You can also export a cacheDestroy function from the props of the new component. Function accepts a cacheId to destroy the cache.
Example:
import home form "./views/Home";
import about form "./views/About";
import { withKeepAlive, KeepAliveProvider } from "react-component-keepalive-ts";
const About = withKeepAlive(about);
const Home = withKeepAlive(home);
const routers = [
{
path: "/about",
element: <About />,
},
{
path: "/home",
element: <Home />,
},
];
const Router = () => {
const element = useRoutes(routers);
return <KeepAliveProvider>{element}</KeepAliveProvider>;
};
import React from "react";
const Home = (props: any) => {
return (
<div>
<button onClick={props.cacheDestroy("about")}>重置about</button>
<button onClick={props.cacheDestroy("home")}>重置home</button>
</div>
);
};
export default Home;