在React组件卸载时保留状态可以使用React的生命周期方法来实现。以下是一个示例代码，展示了如何在组件卸载时保留状态：

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

const MyComponent = () => {
  const [count, setCount] = useState(0);

  // 在组件卸载之前保存状态
  useEffect(() => {
    return () => {
      localStorage.setItem('count', count);
    };
  }, [count]);

  // 在组件挂载时恢复状态
  useEffect(() => {
    const savedCount = localStorage.getItem('count');
    if (savedCount) {
      setCount(parseInt(savedCount));
    }
  }, []);

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
       setCount(count - 1)}>Decrement
    
  );
};

export default MyComponent;

在这个示例中，我们使用useState钩子来创建一个名为count的状态变量，并使用setCount函数来更新它。我们还使用了两个useEffect钩子。

第一个useEffect钩子在组件挂载时调用，并通过localStorage.getItem获取之前保存的count值，如果有的话，将其转换为整数并更新count状态。

第二个useEffect钩子在组件卸载之前调用，并使用localStorage.setItem将count的当前值保存在localStorage中。这样，在下次组件重新挂载时，我们可以通过localStorage.getItem获取到之前保存的count值，并使用setCount将其恢复。

这样，无论组件是否卸载，我们都能够在重新挂载时保留和恢复之前的状态。