react-keep-alive

https://github.com/StructureBuilder/react-keep-alive/blob/master/README.zh-CN.md

 

安裝

npm install --save react-keep-alive

 

使用

import React from 'react';
import ReactDOM from 'react-dom';
import {
  Provider,
  KeepAlive,
} from 'react-keep-alive';
import Test from './views/Test';

ReactDOM.render(
  <Provider>
    <KeepAlive name="Test">
      <Test />
    </KeepAlive>
  </Provider>,
  document.getElementById('root'),
);

KeepAlive

我們必須確保 <KeepAlive> 在 <Provider> 里面，這樣 <KeepAlive> 的子組件才能被緩存。

Props

name：name 必須存在並且需要確保當前 <Provider> 下的所有 <KeepAlive> 的 name 都是唯一的（1.2.0 新增，替換 key）。

disabled：當我們不需要緩存組件時，我們可以禁用它；禁用僅在組件從未激活狀態變為激活狀態時生效。

extra(v2.0.1+): 額外的數據可以通過 bindLifecycle 獲取。

注意：<KeepAlive> 包裹的組件內部最外層必須有一個真實的 DOM 標簽。

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 App extends React.Component {
  render() {
    return (
      <div>
        <Switch>
          <Route path="/one">
            <KeepAlive name="One">
              <One />
            </KeepAlive>
          </Route>
        </Switch>
      </div>
    );
  }
}

ReactDOM.render(
  <Router>
    <Provider>
      <App />
    </Provider>
  </Router>,
  document.getElementById('root'),
);

使用 <Provider> 的 include 屬性

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 App extends React.Component {
  render() {
    return (
      <div>
        <Switch>
          <Route path="/one">
            <KeepAlive name="One">
              <One />
            </KeepAlive>
          </Route>
        </Switch>
      </div>
    );
  }
}

ReactDOM.render(
  <Router>
    <Provider include="One">
      <App />
    </Provider>
  </Router>,
  document.getElementById('root'),
);

 

生命周期

bindLifecycle

這個高階組件包裝的組件將具有 正確的 的生命周期，並且我們添加了兩個額外的生命周期 componentDidActivate 和 componentWillUnactivate。

添加新的生命周期之后: 

componentDidActivate 將在組件剛掛載或從未激活狀態變為激活狀態時執行。雖然我們在 Updating 階段的 componentDidUpdate 之后能夠看到 componentDidActivate，但這並不意味着 componentDidActivate 總是被觸發。

同時只能觸發 componentWillUnactivate 和 componentWillUnmount 生命周期的其中之一。當需要緩存時執行 componentWillUnactivate，而 componentWillUnmount 在禁用緩存的情況下執行。

import React from 'react';
import {bindLifecycle} from 'react-keep-alive';

@bindLifecycle
class Test extends React.Component {
  render() {
    return (
      <div>
        This is Test.
      </div>
    );
  }
}

useKeepAliveEffect

useKeepAliveEffect 會在組件進入和離開時觸發；因為在保持活力時組件不會被卸載，所以如果使用的是 useEffect，那將不會達到真正的目的。

注意：useKeepAliveEffect 使用了最新的 React Hooks，所以必須確保 React 是最新版本。

import React from 'react';
import {useKeepAliveEffect} from 'react-keep-alive';

function Test() {
  useKeepAliveEffect(() => {
    console.log("mounted");
    return () => {
      console.log("unmounted");
    };
  });
  return (
    <div>
      This is Test.
    </div>
  );
}