react keep-alive

React 16.3 版本引入了一个新的特性叫做 `React.memo()`，它可以用来优化函数组件的性能。然而，React 中并没有内置的支持来缓存组件的状态。如果需要在组件被卸载后保留其状态，可以使用第三方库 `react-keeper`。

`react-keeper` 是一个用于在 React 应用中实现缓存和复用组件状态的库。它提供了一个名为 `Keeper` 的组件，可以将需要缓存的组件包裹在其中。当组件被包裹在 `Keeper` 组件中时，无论是否卸载，其状态都会得到保留。当再次渲染该组件时，可以恢复到之前的状态。

示例代码如下：

import React from 'react';
import { Keeper } from 'react-keeper';

function MyComponent() {
  const [count, setCount] = React.useState(0);

  return (
    <Keeper>
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    </Keeper>
  );
}

在上述示例中，`MyComponent` 组件被包裹在 `Keeper` 组件中。无论 `MyComponent` 组件是否被卸载，其状态都会得到保留。每次点击按钮时，`count` 的值都会增加，并在页面重新渲染时保留其值。