Echo

中文

English

中文

English

主题

EchoManager ​

EchoManager 是一个用于管理数据订阅和通知的核心类。它提供了跨窗口数据同步和 React Hooks 集成功能。

类定义 ​

typescript
export class EchoManager {
  // 静态方法
  public static subscribe<T>(database: string, objectStore?: string, listener: (data: T[]) => void): () => void;
  public static notify<T>(database: string, objectStore?: string, data: T[]): void;
  public static use<T, Selected = T[]>(database: string, objectStore?: string, selector?: (data: T[]) => Selected): Selected;
}

方法 ​

subscribe ​

订阅数据变化。

typescript
public static subscribe<T>(
  database: string,
  objectStore?: string,
  listener: (data: T[]) => void
): () => void

参数：

  • database: 数据库名称
  • objectStore: 对象仓库名称（可选，默认为 "echo-state"）
  • listener: 数据变化时的回调函数

返回值：

  • 返回一个取消订阅的函数

示例：

typescript
const unsubscribe = EchoManager.subscribe("my-db", "my-store", (data) => {
  console.log("数据已更新:", data);
});

// 取消订阅
unsubscribe();

notify ​

通知所有监听器数据已更新。

typescript
public static notify<T>(
  database: string,
  objectStore?: string,
  data: T[]
): void

参数：

  • database: 数据库名称
  • objectStore: 对象仓库名称（可选，默认为 "echo-state"）
  • data: 要通知的新数据

示例：

typescript
EchoManager.notify("my-db", "my-store", newData);

use ​

React Hook 方法，用于在组件中订阅数据变化。

typescript
public static use<T, Selected = T[]>(
  database: string,
  objectStore?: string,
  selector?: (data: T[]) => Selected
): Selected

参数：

  • database: 数据库名称
  • objectStore: 对象仓库名称（可选，默认为 "echo-state"）
  • selector: 数据选择器函数（可选）

返回值：

  • 返回选中的数据或完整数据

示例：

typescript
function MyComponent() {
  // 获取所有数据
  const allData = EchoManager.use("my-db", "my-store");
  
  // 使用选择器获取特定数据
  const filteredData = EchoManager.use(
    "my-db",
    "my-store",
    (data) => data.filter(item => item.active)
  );
  
  return <div>{/* 渲染数据 */}</div>;
}

性能考虑 ​

EchoManager 内部使用了 Map 结构来缓存监听器和 hooks，这确保了：

  1. 高效的监听器管理
  2. 避免重复创建相同的 hooks
  3. 自动清理未使用的资源

最佳实践 ​

  1. 在组件卸载时取消订阅：
typescript
useEffect(() => {
  const unsubscribe = EchoManager.subscribe("my-db", "my-store", handleDataChange);
  return () => unsubscribe();
}, []);
  1. 使用选择器优化性能：
typescript
// 只订阅需要的数据
const activeItems = EchoManager.use(
  "my-db",
  "my-store",
  (data) => data.filter(item => item.active)
);
  1. 合理使用对象仓库：
typescript
// 根据数据类型划分不同的对象仓库
const userData = EchoManager.use("my-db", "users");
const settingsData = EchoManager.use("my-db", "settings");