Package will allow components to maintain their status, to avoid repeated re-rendering.
- test
React Keep Alive requires React 16.3 or later.
To use React Keep Alive with your React app:
npm install --save react-keep-alive
React Keep Alive provides <Provider>
, you must use <Provider>
to wrap the <KeepAlive>
cache to take effect.
import React from 'react';
import ReactDOM from 'react-dom';
import {
Provider,
KeepAlive,
} from 'react-keep-alive';
class Test extends React.Component {
state = {
count: 0,
};
handleClick = () => {
this.setState(({count}) => ({
count: count + 1,
}));
}
render() {
const {count} = this.state;
return (
<div>
<h1>This is {`<Test>`}</h1>
<p>Please feel free to click the button, then hide this component, and the status will be retained again.</p>
<button onClick={this.handleClick}>Click me(count: {count})</button>
</div>
);
}
}
class App extends React.Component {
state = {
hidden: false,
};
handleClick = () => {
this.setState(({hidden}) => ({
hidden: !hidden,
}));
}
render() {
const {hidden} = this.state;
return (
<div>
<div>
Clicking the button will hide the component, but the status will be preserved.
</div>
<button onClick={this.handleClick}>Click me(hidden: {hidden.toString()})</button>
<div>
{
!hidden
? (
// Must have a key, and it is unique
<KeepAlive key="Test">
<Test />
</KeepAlive>
)
: null
}
</div>
</div>
);
}
}
ReactDOM.render(
<Provider>
<App />
</Provider>,
document.getElementById('root'),
);
Since the cached components need to be stored, the <Provider>
must be rendered at the top of the application for the program to run properly.
include
: Only components that match key will be cached. It can be a string, an array of strings, or a regular expression, eg:
<Provider include="A,B">...</Provider>
// or
<Provider include={['A', 'B']}>...</Provider>
// or
<Provider include={/A|B/}>...</Provider>
exclude
: Any component that matches key will not be cached. It can be a string, an array of strings, or a regular expression.
In the example below, the component is our root-level component. This means it’s at the very top of our component hierarchy.
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-keep-alive';
import App from './App';
ReactDOM.render(
<Provider>
<App />
</Provider>,
document.getElementById('root'),
);
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
} from 'react-router-dom';
import {
Provider as MobxProvider,
} from 'mobx-react';
import {
Provider as KeepAliveProvider,
} from 'react-keep-alive';
ReactDOM.render(
<MobxProvider>
<Router>
<KeepAliveProvider>
<App />
</KeepAliveProvider>
</Router>
</MobxProvider>,
document.getElementById('root'),
);
Note: You must put in and the React Router must be sure to be the latest version. Because React Keep Alive uses the new Context, you must ensure that the Router does the same. Please use the following command to install the latest version.
npm install react-router@next react-router-dom@next
Children of <KeepAlive>
will be cached, but we have to make sure that <KeepAlive>
is inside <Provider>
.
key
: Key must exist and need to ensure that all <KeepAlive>
keys under the current <Provider>
are unique.
disabled
: When we don't need components for caching, we can disable it; the disabled configuration will only takes effect when the component's status changes from unactive to active.
onActivate
: Activation event.
onUnactivate
: Unactivation event.
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Switch,
Route,
Link,
} from 'react-router-dom';
import {
Provider,
KeepAlive,
} from 'react-keep-alive';
class One extends React.Component {
render() {
return (
<div>This is One.</div>
);
}
}
class Two extends React.Component {
render() {
return (
<div>This is Two.</div>
);
}
}
class App extends React.Component {
handleActivate = () => {
console.log('One activated');
}
handleUnactivate = () => {
console.log('One unactivated');
}
render() {
return (
<div>
<ul>
<li>
<Link to="/one">one</Link>
</li>
<li>
<Link to="/two">two</Link>
</li>
</ul>
<Switch>
<Route path="/one">
<KeepAlive
key="One"
onActivate={this.handleActivate}
onUnactivate={this.handleUnactivate}
>
<One />
</KeepAlive>
</Route>
<Route path="/two">
<KeepAlive key="Two">
<Two />
</KeepAlive>
</Route>
</Switch>
</div>
);
}
}
ReactDOM.render(
<Router>
<Provider>
<App />
</Provider>
</Router>,
document.getElementById('root'),
);
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Switch,
Route,
Link,
} from 'react-router-dom';
import {
Provider,
KeepAlive,
bindLifecycle,
} from 'react-keep-alive';
@bindLifecycle
class One extends React.Component {
componentDidMount() {
console.log('One componentDidMount');
}
componentWillUnmount() {
console.log('One componentWillUnmount');
}
render() {
return (
<div>This is One.</div>
);
}
}
class Two extends React.Component {
render() {
return (
<div>This is Two.</div>
);
}
}
class App extends React.Component {
handleActivate = () => {
console.log('One activated');
}
handleUnactivate = () => {
console.log('One unactivated');
}
render() {
return (
<div>
<ul>
<li>
<Link to="/one">one</Link>
</li>
<li>
<Link to="/two">two</Link>
</li>
</ul>
<Switch>
<Route path="/one">
<KeepAlive
key="One"
onActivate={this.handleActivate}
onUnactivate={this.handleUnactivate}
>
<One />
</KeepAlive>
</Route>
<Route path="/two">
<KeepAlive key="Two">
<Two />
</KeepAlive>
</Route>
</Switch>
</div>
);
}
}
ReactDOM.render(
<Router>
<Provider include="Two">
<App />
</Provider>
</Router>,
document.getElementById('root'),
);
Note: If you want to use the lifecycle, wrap the components in a bindLifecycle
high-level component.
Components that pass this high-level component wrap will have the correct lifecycle, and we have added two additional lifecycles, componentDidActivate
and componentWillUnactivate
.
componentDidActivate
will be executed once after the initial mount or from the unactivated state to the active state. although we see componentDidActivate
after componentDidUpdate
in the Updating
phase, this does not mean componentDidActivate
Always triggered.
At the same time, only one of the lifecycles of componentWillUnactivate
and componentWillUnmount
is triggered. componentWillUnactivate
is executed when caching is required; componentWillUnmount
is executed without caching.
import React from 'react';
import {bindLifecycle} from 'react-keep-alive';
@bindLifecycle
class Test extends React.Component {
render() {
return (
<div>
This is Test.
</div>
);
}
}
If you find a bug, please file an issue on our issue tracker on GitHub.
Changes are tracked in the CHANGELOG.md.
React Keep Alive is available under the MIT License.