Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,2 @@
node_modules
coverage
es/**
cjs/**
80 changes: 60 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,33 +1,39 @@
<p align="center">
<a href="https://github.com/Sam618/react-keep-alive">
<img width="120" src="https://github.com/Sam618/react-keep-alive/raw/master/assets/react-logo.png">
<a href="https://github.com/kavience/react-keep-alive">
<img width="120" src="https://github.com/kavience/react-keep-alive/raw/master/assets/react-logo.png">
</a>
</p>

<h1 align="center">React Keep Alive</h1>
<div align="center">

[![npm](https://img.shields.io/npm/v/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![Travis (.org)](https://img.shields.io/travis/Sam618/react-keep-alive.svg?style=for-the-badge)](https://travis-ci.org/Sam618/react-keep-alive.svg?branch=master) [![LICENSE](https://img.shields.io/npm/l/react-keep-alive.svg?style=for-the-badge)](https://github.com/Sam618/react-keep-alive/blob/master/LICENSE.MIT) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![downloads](https://img.shields.io/npm/dm/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![typescript](https://img.shields.io/badge/language-typescript-blue.svg?style=for-the-badge)](https://www.typescriptlang.org/)
[![npm](https://img.shields.io/npm/v/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![Travis (.org)](https://img.shields.io/travis/kavience/react-keep-alive.svg?style=for-the-badge)](https://travis-ci.org/kavience/react-keep-alive.svg?branch=master) [![LICENSE](https://img.shields.io/npm/l/react-keep-alive.svg?style=for-the-badge)](https://github.com/kavience/react-keep-alive/blob/master/LICENSE.MIT) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![downloads](https://img.shields.io/npm/dm/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![typescript](https://img.shields.io/badge/language-typescript-blue.svg?style=for-the-badge)](https://www.typescriptlang.org/)

<p><a href="https://nodei.co/npm/react-keep-alive/"><img src="https://nodei.co/npm/react-keep-alive.png?downloads=true&downloadRank=true&stars=true"></a></p>

<p>A component that maintains component state and avoids repeated re-rendering.</p>

<div style="width: 100px; text-align: left;">
<div>English | <a href="https://github.com/Sam618/react-keep-alive/blob/master/README.zh-CN.md">中文</a></div>
<div><a href="https://github.com/Sam618/react-keep-alive/blob/master/ONLINE_EDITOR.md">Online Editor</a></div>
<div>English | <a href="https://github.com/kavience/react-keep-alive/blob/master/README.zh-CN.md">中文</a></div>
<div><a href="https://github.com/kavience/react-keep-alive/blob/master/ONLINE_EDITOR.md">Online Editor</a></div>
</div>
</div>

## 🙅‍♀️ Declaration

Original library is https://github.com/StructureBuilder/react-keep-alive, As the original author did not adopt my [PR](https://github.com/StructureBuilder/react-keep-alive/pull/97), so I forked this, I would like to thank the original author for this library.

## ✨ Features

- Not based on React Router, so you can use it wherever you need to cache it.
- You can easily use <KeepAlive> to wrap your components to keep them alive.
- Because it is not controlled by `display: none | block`, you can use animation.
- You will be able to use the latest React Hooks.
- Ability to manually control whether your components need to stay active.
- add `removeCache` method(`v2.5.5`).

## 📦 Installation

React Keep Alive requires React 16.3 or later, but if you use React Hooks, you must be React 16.8 or higher.

To use React Keep Alive with your React app:
Expand All @@ -36,8 +42,8 @@ To use React Keep Alive with your React app:
npm install --save react-keep-alive
```


## 🔨 Usage

React Keep Alive provides `<Provider>`, you must use `<Provider>` to wrap the `<KeepAlive>` cache to take effect.

```JavaScript
Expand All @@ -59,8 +65,8 @@ ReactDOM.render(
);
```


## 💡 Why do you need this component?

If you've used [Vue](https://vuejs.org/), you know that it has a very good component ([keep-alive](https://vuejs.org/v2/guide/components-dynamic-async.html)) that keeps the state of the component to avoid repeated re-rendering.

Sometimes, we want the list page to cache the page state after the list page enters the detail page. When the detail page returns to the list page, the list page is still the same as before the switch.
Expand All @@ -69,14 +75,16 @@ Oh, this is actually quite difficult to achieve, because the components in React

In the end, I implemented this effect through the [React.createPortal API](https://reactjs.org/docs/portals.html). `react-keep-alive` has two main components `<Provider>` and `<KeepAlive>`. The `<Provider>` is responsible for saving the component's cache and rendering the cached component outside of the application via the React.createPortal API before processing. The cached components must be placed in `<KeepAlive>`, and `<KeepAlive>` will mount the components that are cached outside the application to the location that really needs to be displayed.


## 📝 API Reference

### `Provider`

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.

#### Props

`include`: Only components that match key will be cached. It can be a string, an array of strings, or a regular expression, eg:

```JavaScript
<Provider include="A,B">...</Provider>
// or
Expand All @@ -90,19 +98,20 @@ Since the cached components need to be stored, the `<Provider>` must be rendered
`max`(`v2.5.2+`): If the maximum value is set, the value in the cache is deleted after it goes out.

#### Example

In the example below, the <App /> component is our root-level component. This means it’s at the very top of our component hierarchy.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-keep-alive';
import App from './App';
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'),
document.getElementById("root")
);
```

Expand Down Expand Up @@ -133,17 +142,43 @@ ReactDOM.render(
);
```

#### remove cache

For solve [this issue](https://github.com/StructureBuilder/react-keep-alive/issues/82), I add remove method.

```js
<KeepAliveProvider
ref={(ref) => {
this.keepAliveProviderRef = ref;
}}
max={30}
></KeepAliveProvider>
```

First you need get keepAliveProviderRef, and in correct time call it's method named removeCache like this:

```js
keepAliveProviderRef.removeCache("KeepAlive");
// or
keepAliveProviderRef.removeCache(["KeepAlive"]);
```

`removeCache` receive string or string array as params which is name of KeepAlive.

If you use `react-router`, and need use `history.push` when removeCache, you must use `history.push` first and then use removeCache.

**Note**: You must put <Provider> in <Router> 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.

```bash
npm install react-router@next react-router-dom@next
```


### `KeepAlive`

Children of `<KeepAlive>` will be cached, but we have to make sure that `<KeepAlive>` is inside `<Provider>`.

#### Props

`name`: Name must exist and need to ensure that all `<KeepAlive>` names under the current `<Provider>` are unique(1.2.0 added, Replace key).

`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.
Expand All @@ -153,6 +188,7 @@ Children of `<KeepAlive>` will be cached, but we have to make sure that `<KeepAl
**Note**: `<KeepAlive>` The innermost outer layer of the packaged component must have a real DOM tag.

#### Example

```JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
Expand Down Expand Up @@ -203,6 +239,7 @@ ReactDOM.render(
```

##### Usage with `include` props of `<Provider>`

```JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
Expand Down Expand Up @@ -254,16 +291,18 @@ ReactDOM.render(
**Note**: If you want to use the **lifecycle**, wrap the components in a `bindLifecycle` high-level component.

### `bindLifecycle`

Components that pass this high-level component wrap will have the **correct** lifecycle, and we have added two additional lifecycles, `componentDidActivate` and `componentWillUnactivate`.

Lifecycle after adding:
![Lifecycle after adding](https://github.com/Sam618/react-keep-alive/raw/master/assets/lifecycle.png)
![Lifecycle after adding](https://github.com/kavience/react-keep-alive/raw/master/assets/lifecycle.png)

`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.

#### Example

```JavaScript
import React from 'react';
import {bindLifecycle} from 'react-keep-alive';
Expand All @@ -280,13 +319,14 @@ class Test extends React.Component {
}
```


### `useKeepAliveEffect`

`useKeepAliveEffect` will fire when the component enters and leaves; because the component will not be unmounted while it is still active, so if you use `useEffect`, that will not achieve the real purpose.

**Note**: `useKeepAliveEffect` uses the latest React Hooks, so you must make sure React is the latest version.

#### Example

```JavaScript
import React from 'react';
import {useKeepAliveEffect} from 'react-keep-alive';
Expand All @@ -306,14 +346,14 @@ function Test() {
}
```


## 🐛 Issues
If you find a bug, please file an issue on [our issue tracker on GitHub](https://github.com/Sam618/react-keep-alive/issues).

If you find a bug, please file an issue on [our issue tracker on GitHub](https://github.com/kavience/react-keep-alive/issues).

## 🏁 Changelog
Changes are tracked in the [CHANGELOG.md](https://github.com/Sam618/react-keep-alive/blob/master/CHANGELOG.md).

Changes are tracked in the [CHANGELOG.md](https://github.com/kavience/react-keep-alive/blob/master/CHANGELOG.md).

## 📄 License
React Keep Alive is available under the [MIT](https://github.com/Sam618/react-keep-alive/blob/master/LICENSE) License.

React Keep Alive is available under the [MIT](https://github.com/kavience/react-keep-alive/blob/master/LICENSE) License.
Loading