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>
  );
}