react 实现 keep-alive

在 React 中，没有内置的类似于 Vue 的 keep-alive 组件，但你可以通过使用状态管理库（如 Redux 或 MobX）或自定义组件来实现类似的功能。

下面是一个使用自定义组件实现类似 keep-alive 功能的示例：

1.创建一个 KeepAlive 组件

import React, { useEffect, useState } from 'react';

const KeepAlive = ({ children }) => {
  const [isActive, setIsActive] = useState(true);

  useEffect(() => {
    return () => {
      setIsActive(false);
    };
  }, []);

  if (!isActive) {
    return null;
  }

  return <>{children}</>;
};

export default KeepAlive;

2.在需要保持活跃状态的组件上使用 KeepAlive 组件包裹

import React from 'react';
import KeepAlive from './KeepAlive';

const MyComponent = () => {
  return (
    <KeepAlive>
      {/* 需要保持活跃状态的子组件 */}
    </KeepAlive>
  );
};

export default MyComponent;

在上述示例中，KeepAlive 组件使用 useState 来管理一个名为 isActive 的状态，初始值为 true。当 KeepAlive 组件被卸载时，通过 useEffect 的清理函数将 isActive 设置为 false，以便稍后重新渲染时可以判断是否需要显示内容。

在需要保持活跃状态的组件中，将需要保持活跃状态的子组件放置在 KeepAlive 组件中即可。