Context数据持久化存储方案

在React应用中，Context作为状态管理工具虽然方便，但面临的一个核心问题是数据无法持久化存储。当页面刷新或组件重新挂载时，Context中的状态会丢失。本文将对比几种主流的Context数据持久化方案。

问题分析

Context本身是内存级别的状态管理，无法在浏览器刷新后保持数据。这在用户登录状态、购物车信息、用户偏好设置等场景下尤为明显。

方案对比

1. localStorage方案

const AppContext = React.createContext();

function AppProvider({ children }) {
  const [user, setUser] = useState(() => {
    const savedUser = localStorage.getItem('user');
    return savedUser ? JSON.parse(savedUser) : null;
  });

  useEffect(() => {
    localStorage.setItem('user', JSON.stringify(user));
  }, [user]);

  return (
    <AppContext.Provider value={{ user, setUser }}>
      {children}
    </AppContext.Provider>
  );
}

2. sessionStorage方案

适用于临时会话数据，页面关闭后自动清除。

3. Redux + Persist方案

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
persistStore(store);

性能优化建议

1. 使用useMemo缓存序列化数据
2. 分区存储，避免单个localStorage条目过大
3. 添加存储容量检查和错误处理

推荐方案

对于简单应用推荐localStorage方案，复杂应用建议使用Redux Persist。两者都需配合防抖和批量更新策略以提升性能。