react实现组件状态缓存

import React, { useState, useEffect } from 'react';
 
// 使用自定义钩子来缓存组件状态
function useCachedState(defaultState, cacheKey) {
  const [state, setState] = useState(() => {
    // 尝试从缓存中获取状态
    const cachedState = sessionStorage.getItem(cacheKey);
    return cachedState ? JSON.parse(cachedState) : defaultState;
  });
 
  // 组件卸载前，将状态保存到缓存中
  useEffect(() => {
    sessionStorage.setItem(cacheKey, JSON.stringify(state));
  }, [cacheKey, state]);
 
  return [state, setState];
}
 
// 使用示例
function MyComponent() {
  const [count, setCount] = useCachedState(0, 'myComponentCount');
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
 
export default MyComponent;

这个代码示例展示了如何使用自定义钩子 useCachedState 来缓存组件的状态。每次组件的状态更新时，状态都会被保存到 sessionStorage 中，而在组件挂载时，如果存在缓存的状态，它将被用作组件的初始状态。这是一个简单的缓存机制，可以被用在需要状态保存和恢复的场景中。