发布于 由admin

React 状态持久化中间件：针对海量前端缓存的 IndexedDB 适配器与 React 状态同步策略

欢迎来到“数据永生”讲座：如何用 IndexedDB 和 React 中间件构建坚不可摧的前端缓存系统

大家好！我是你们今天的讲师，一个在浏览器里和“数据幽灵”搏斗多年的资深老兵。

今天我们不谈 useState 的甜点，我们要谈谈它的噩梦——刷新页面后数据消失。

React 的状态管理就像是你的短期记忆。它快、灵敏，但一旦浏览器刷新，或者用户不小心关闭了标签页，你的数据就像被抹去的记忆一样，瞬间蒸发。为了解决这个问题，我们通常想到 localStorage。

但是，朋友们，localStorage 就像个只能装 5MB 纸巾的小背包。 存个配置还行，存个用户的购物车、聊天记录、甚至是一张高清头像？别逗了，它会直接报错，把你的页面冻住，导致整个 UI 阻塞。那感觉就像是你试图把大象塞进冰箱，结果冰箱门卡住了，你也出不来。

今天，我们要讲的是如何把大象塞进IndexedDB，并用 React 的中间件模式，让这些数据像不死鸟一样，永远伴随你的用户。

第一章：IndexedDB —— 浏览器里的“诺亚方舟”

如果你觉得 localStorage 是个孩子，那 IndexedDB 就是那个身披重甲、力大无穷的巨人。它是浏览器原生的 NoSQL 数据库，存储容量高达 250MB 甚至更多（取决于设备）。

但这个巨人脾气很怪。它不提供 JSON 接口，它不搞同步阻塞，它用的是异步回调，甚至直接操作二进制流。

很多开发者看到 IndexedDB 的 API 就想吐：open(), onupgradeneeded, transaction(), objectStore(), put(), get(), cursor()……这一堆回调地狱，写起来简直像是在织毛衣。

所以，我们的第一步任务，就是给这个巨人穿上一件名为“React 友好”的紧身衣。

1.1 为什么 IndexedDB 是必须的？

想象一下你的应用：

  1. 用户正在浏览长列表，滑到第 500 条。
  2. 用户刷新页面。
  3. 如果用 localStorage：列表瞬间重置到第 1 条，用户崩溃，投诉信飞来。
  4. 如果用 IndexedDB：列表瞬间恢复到第 500 条，用户以为这是魔法。

它能处理 Blob（图片、视频、音频），能建立复杂的索引，支持事务，还能处理海量数据。它是前端持久化的终极答案。

第二章：架构设计——中间件模式

在 Redux 生态里，中间件是个好东西。它拦截 Action，做点手脚，然后扔给 Reducer。我们能不能在 React 状态管理里也搞个“中间件”？

当然可以！我们不需要重写整个 Redux，也不需要依赖庞大的第三方库。我们要写一个通用的持久化中间件。

2.1 核心思路：单向数据流 + 异步持久化

我们的策略是这样的：

  1. 状态变化：React 的 State 变了。
  2. 中间件介入：中间件检测到变化。
  3. 写入 IndexedDB：中间件把新状态扔进数据库（异步，不阻塞 UI）。
  4. 读取：当页面加载时，中间件从 IndexedDB 读取初始状态。

这就像给 React 状态加了一层“保险箱”。

第三章：代码实战——打造你的 IndexedDB 适配器

别怕，代码不会太长，但必须足够健壮。我们要封装一个 IDBWrapper 类。

3.1 基础封装：把回调变成 Promise

IndexedDB 的回调地狱是主要敌人。我们得把它们 Promise 化。

// utils/db.js
/**
 * 一个简单的 IndexedDB 封装，旨在把那一堆回调地狱变成 Promise
 */
class IDBWrapper {
  constructor(dbName, storeName, version = 1) {
    this.dbName = dbName;
    this.storeName = storeName;
    this.version = version;
    this.db = null;
  }

  // 打开数据库，如果不存在则创建
  async open() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, this.version);

      request.onupgradeneeded = (event) => {
        this.db = event.target.result;
        // 创建对象存储空间，如果不存在的话
        if (!this.db.objectStoreNames.contains(this.storeName)) {
          const store = this.db.createObjectStore(this.storeName, { keyPath: 'id' });
          // 可以在这里创建索引，比如按时间戳索引
          store.createIndex('timestamp', 'timestamp', { unique: false });
        }
      };

      request.onsuccess = (event) => {
        this.db = event.target.result;
        resolve(this.db);
      };

      request.onerror = (event) => {
        console.error('Database error:', event.target.errorCode);
        reject('Database error');
      };
    });
  }

  // 通用写操作
  async put(data) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction([this.storeName], 'readwrite');
      const store = transaction.objectStore(this.storeName);
      const request = store.put(data);

      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }

  // 通用读操作
  async get(id) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction([this.storeName], 'readonly');
      const store = transaction.objectStore(this.storeName);
      const request = store.get(id);

      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }

  // 获取所有数据（用于初始化）
  async getAll() {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction([this.storeName], 'readonly');
      const store = transaction.objectStore(this.storeName);
      const request = store.getAll();

      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }

  // 清空数据（用于调试或重置）
  async clear() {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction([this.storeName], 'readwrite');
      const store = transaction.objectStore(this.storeName);
      const request = store.clear();

      request.onsuccess = () => resolve();
      request.onerror = () => reject(request.error);
    });
  }
}

3.2 进阶：处理 Blob 和复杂对象

IndexedDB 有个坑：它不支持循环引用，并且对某些特殊对象（如 Date、RegExp）的处理比较随意。如果你存一个 React 组件实例？别想了，它会报错。

所以，我们在存入 DB 之前，必须进行序列化。

// utils/db.js (续)

  // 保存状态
  async saveState(key, state) {
    const data = {
      id: key,
      state: JSON.stringify(state), // 序列化
      timestamp: Date.now()
    };
    // 如果是图片或大文件，这里需要特殊处理，直接存 Blob
    return this.put(data);
  }

  // 读取状态
  async loadState(key) {
    const item = await this.get(key);
    if (!item) return null;
    return JSON.parse(item.state); // 反序列化
  }
}

第四章：React 状态同步策略——不仅仅是保存

光保存还不够。我们怎么把 React 的状态和 IndexedDB 联系起来？这里有两种流派：“懒加载派”和“乐观更新派”。

4.1 懒加载派（初始化策略）

这是最简单的策略。应用启动时，先从 IndexedDB 读取，读取完了再渲染。

// hooks/usePersistedState.js
import { useState, useEffect } from 'react';
import { IDBWrapper } from '../utils/db';

const db = new IDBWrapper('MyReactApp', 'state_store', 1);

export const usePersistedState = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(initialValue);

  // 1. 组件挂载时，尝试从 DB 读取
  useEffect(() => {
    const load = async () => {
      try {
        const value = await db.loadState(key);
        if (value !== null) {
          setStoredValue(value);
        }
      } catch (error) {
        console.error('Failed to load state from IndexedDB', error);
      }
    };
    load();
  }, [key]);

  // 2. 状态变化时，异步写入 DB
  const setValue = (value) => {
    setStoredValue(value);
    // 这里我们使用 setTimeout 把写入操作放到微任务队列里，避免阻塞渲染
    setTimeout(() => {
      db.saveState(key, value).catch(err => {
        console.error('Failed to persist state', err);
      });
    }, 0);
  };

  return [storedValue, setValue];
};

点评：这个 Hook 看起来很完美，但有个致命缺陷——刷新页面时会有闪烁。页面加载 -> 显示空状态 -> 从 DB 读到数据 -> 重新渲染。用户体验不连贯。

4.2 乐观更新派（实战利器）

为了解决这个问题，我们需要利用 React 18 的 startTransition 或者直接在 useEffect 里做手脚。

但真正的“专家”做法是：不要在每次 setState 时都写 DB。那太慢了。我们要做一个节流 或者 批量写入。

4.2.1 批量写入中间件

假设我们用 Redux。我们写一个中间件，把 Action 扔进队列，攒够了或者攒了 1 秒，再统一写一次 DB。

// middlewares/persistenceMiddleware.js
import { IDBWrapper } from '../utils/db';

const db = new IDBWrapper('ReduxApp', 'redux_persist', 1);

const persistenceMiddleware = (store) => (next) => (action) => {
  // 1. 执行原始 Action
  const result = next(action);

  // 2. 如果是数据变更 Action，则异步持久化
  // 注意：这里只处理特定类型的 Action，避免保存 UI 动画等无关动作
  if (action.type.endsWith('_PERSIST') || ['SET_STATE', 'UPDATE_ITEM'].includes(action.type)) {
    // 使用 setTimeout 避免阻塞主线程
    setTimeout(() => {
      const state = store.getState();
      // 这里可以只存特定 slice，而不是整个 state，节省空间
      db.saveState('main_state', state).catch(console.error);
    }, 0);
  }

  return result;
};

export default persistenceMiddleware;

第五章：处理海量缓存与性能优化

到了“海量前端缓存”这个级别，简单的 put 和 get 已经不够用了。我们需要考虑以下三个问题：

  1. 内存缓存：IndexedDB 是异步的。如果用户连续操作，每次都去读硬盘（虽然是在本地，但还是有 I/O 开销），会慢。我们得在内存里也存一份。
  2. 索引优化：如果数据量达到 10 万条，getAll() 会把整个数据库拖死。我们必须用索引查询。
  3. Blob 处理：图片和视频怎么存？

5.1 双层缓存架构

class HybridStorage {
  constructor(dbName, storeName) {
    this.memoryCache = new Map(); // 内存缓存，Key-Value
    this.idbWrapper = new IDBWrapper(dbName, storeName);
    this.init();
  }

  async init() {
    // 启动时，从 IDB 加载所有数据到内存
    const allData = await this.idbWrapper.getAll();
    allData.forEach(item => {
      this.memoryCache.set(item.id, item.state);
    });
    console.log(`Loaded ${allData.length} items into memory cache.`);
  }

  async get(id) {
    // 1. 先查内存
    if (this.memoryCache.has(id)) {
      return this.memoryCache.get(id);
    }
    // 2. 内存没有，查 IDB
    const data = await this.idbWrapper.get(id);
    if (data) {
      this.memoryCache.set(id, data.state);
    }
    return data ? data.state : null;
  }

  async set(id, state) {
    // 1. 更新内存
    this.memoryCache.set(id, state);
    // 2. 异步更新 IDB
    this.idbWrapper.saveState(id, state).catch(err => {
      // 失败了怎么办？内存里删掉？还是报警？
      // 简单起见，这里不做处理，下次再重试
      console.error('Failed to sync to IDB', err);
    });
  }
}

5.2 处理 Blob（图片/视频缓存）

IndexedDB 原生支持 Blob 和 ArrayBuffer。这是 localStorage 做不到的。

假设我们要做一个图片查看器，用户浏览的图片都缓存在本地。

// utils/blobStorage.js
class BlobStorage {
  constructor(dbName, storeName) {
    this.db = new IDBWrapper(dbName, storeName, 1);
  }

  // 存图片
  async saveImage(key, blob) {
    await this.db.put({
      id: key,
      blob: blob, // 直接存 Blob 对象
      type: blob.type,
      size: blob.size
    });
  }

  // 获取图片并转成 URL
  async getImageURL(key) {
    const item = await this.db.get(key);
    if (!item) return null;

    // 将 Blob 转回 URL，供 <img> 标签使用
    return URL.createObjectURL(item.blob);
  }
}

注意：URL.createObjectURL 创建的链接如果不释放，会导致内存泄漏。所以，当你不再需要显示这张图片时，一定要调用 URL.revokeObjectURL(url)。

第六章：同步策略的进阶——冲突解决与版本控制

当用户在两台设备上登录，或者用户修改了数据然后刷新，IndexedDB 里的数据就是“事实来源”。

场景：用户在手机上把“待办事项”从“完成”改为“未完成”。手机同步到服务器。然后用户在电脑上打开，服务器拉取了最新数据。此时，电脑上的本地 IndexedDB 还是旧的“已完成”状态。

这时候，我们怎么同步？

6.1 简单的“以服务器为准”策略

如果数据量不大，或者数据不冲突（比如用户设置），直接覆盖本地 IDB 即可。

// hooks/useSyncWithServer.js
import { useEffect } from 'react';
import { IDBWrapper } from '../utils/db';

const db = new IDBWrapper('AppDB', 'sync_store', 1);

export const useSync = (state, setState, apiEndpoint) => {
  useEffect(() => {
    // 1. 本地状态改变 -> 同步到服务器
    const syncToServer = async () => {
      try {
        // await fetch(apiEndpoint, { method: 'POST', body: JSON.stringify(state) });
        console.log('Synced to server:', state);
      } catch (err) {
        console.error('Sync failed, will retry later');
      }
    };

    // 防抖，避免每次按键都发请求
    const timer = setTimeout(syncToServer, 1000);
    return () => clearTimeout(timer);
  }, [state, apiEndpoint]);

  useEffect(() => {
    // 2. 组件挂载 -> 从服务器拉取 -> 更新本地 IDB
    const pullFromServer = async () => {
      try {
        // const remoteState = await fetch(apiEndpoint).then(r => r.json());
        // await db.saveState('remote', remoteState);
        // setState(remoteState);
        console.log('Pulled from server, updated IDB');
      } catch (err) {
        console.error('Pull failed, using local IDB');
      }
    };

    pullFromServer();
  }, []);
};

6.2 复杂冲突（乐观锁）

对于更复杂的数据，比如电商购物车，我们需要 version 字段。

// 数据结构示例
{
  id: 'cart_1',
  items: [...],
  version: 10, // 乐观锁版本号
  updatedAt: 1715601234567
}

// 更新逻辑
async function updateCart(newItems) {
  const current = await db.get('cart_1');

  if (current.version !== expectedVersion) {
    // 版本不匹配！说明有别人改过。
    // 策略：重新拉取最新数据，合并（或者提示冲突）
    alert('数据已更新，请刷新');
    return;
  }

  // 版本匹配，执行更新
  const updatedState = {
    ...current,
    items: newItems,
    version: current.version + 1
  };

  await db.saveState('cart_1', updatedState);
  // 更新 UI
  setState(updatedState);
}

第七章：实战案例——构建一个“离线优先”的新闻客户端

让我们把所有东西串起来。

需求

  1. 用户浏览新闻列表。
  2. 刷新页面，列表不丢失。
  3. 用户点击“收藏”某篇文章，文章详情（HTML 内容）缓存到本地。
  4. 离线状态下，依然可以浏览收藏的文章。

代码实现

// components/NewsReader.js
import { useState, useEffect } from 'react';
import { IDBWrapper } from '../utils/db';

const db = new IDBWrapper('NewsApp', 'news_store', 1);

export const NewsReader = () => {
  const [newsList, setNewsList] = useState([]);
  const [loading, setLoading] = useState(true);

  // 1. 初始化：从 IDB 加载列表
  useEffect(() => {
    const init = async () => {
      const cachedList = await db.loadState('news_list');
      if (cachedList) {
        setNewsList(cachedList);
      }
      setLoading(false);
    };
    init();
  }, []);

  // 2. 收藏功能
  const toggleFavorite = async (newsItem) => {
    // 乐观更新：先改 UI
    const isFav = newsItem.isFavorite;
    const newNewsList = newsList.map(item => 
      item.id === newsItem.id ? { ...item, isFavorite: !isFav } : item
    );
    setNewsList(newNewsList);

    // 异步持久化到 IDB
    try {
      await db.saveState('news_list', newNewsList);

      // 如果是收藏新文章，把文章详情也存起来
      if (!isFav) {
        await db.saveState(`article_${newsItem.id}`, newsItem);
        console.log('Article cached to IndexedDB');
      } else {
        // 如果取消收藏，删除缓存
        await db.get(`article_${newsItem.id}`).then(item => {
            if(item) db.delete(`article_${newsItem.id}`);
        });
      }
    } catch (err) {
      console.error('Failed to persist', err);
      // 失败了回滚 UI
      setNewsList(newsList);
    }
  };

  // 3. 渲染
  if (loading) return <div>Loading from IndexedDB...</div>;

  return (
    <div>
      {newsList.map(item => (
        <div key={item.id} style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}>
          <h3>{item.title}</h3>
          <button onClick={() => toggleFavorite(item)}>
            {item.isFavorite ? '取消收藏' : '收藏'}
          </button>
        </div>
      ))}
    </div>
  );
};

第八章：性能调优与陷阱警示

好了，现在你有了一个看起来很棒的系统。但是，如果用户有 10 万条数据，你的 App 会卡死。这里有几个必须注意的“雷区”。

8.1 避免全量读取

getAll() 是个危险的操作。它会把整个数据库拖到内存里。

解决方案：使用 游标。

// utils/db.js (添加 Cursor 方法)
async *getAllKeys() {
  return new Promise((resolve, reject) => {
    const transaction = this.db.transaction([this.storeName], 'readonly');
    const store = transaction.objectStore(this.storeName);
    const request = store.openCursor();

    request.onsuccess = (event) => {
      const cursor = event.target.result;
      if (cursor) {
        yield cursor.key; // 生成器，每次 yield 一个 key
        cursor.continue();
      } else {
        resolve();
      }
    };
    request.onerror = () => reject(request.error);
  });
}

8.2 事务隔离级别

IndexedDB 的事务默认是“自动提交”的。如果你在一个事务里做了 100 次写入，这 100 次写入要么全成功，要么全失败。

如果你在 put 之前没有 transaction，IndexedDB 会自动开启一个事务。但要注意，不要在一个渲染循环里开启多个事务，这会导致性能灾难。

8.3 版本控制陷阱

IndexedDB 的数据库版本号一旦增加，就不能再降级。如果你在开发中改了表结构，必须修改 version 号，并删除旧的数据库（或者手动在开发者工具里删除）。

8.4 压缩与清理

IndexedDB 不会自动清理。用户卸载你的 App 时，数据不会消失。如果数据包含敏感信息（如 Token），务必在 App 卸载或退出登录时，调用 clear() 清空 IDB。

// 退出登录清理
const clearDB = async () => {
  await db.clear();
  // 重新初始化默认状态
  await db.saveState('user_session', null);
};

结语：构建“坚不可摧”的前端体验

通过今天的讲座，我们从 localStorage 的局限出发，深入到了 IndexedDB 的底层 API，设计了中间件架构，实现了乐观更新和双层缓存，甚至解决了离线同步和冲突检测的难题。

React 的状态是短暂的，但用户的体验应该是连续的。IndexedDB 不仅仅是一个存储工具，它是构建 PWA（渐进式 Web 应用）的基石，是连接“在线”与“离线”的桥梁。

不要害怕 IndexedDB 的复杂性。当你把它封装得像 localStorage 一样简单，像 useState 一样好用时，你的应用将拥有一种前所未有的安全感。

现在，拿起你的键盘，去给那些因为刷新而丢失数据的用户一个惊喜吧！记住，好的代码就像好的记忆，不仅持久，而且准确。

谢谢大家！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注