react-use-subject

简介

react-use-subject 是一个包含 ReplaySubject 和 useSubject 的工具库，便于在项目中进行响应式编程和状态管理。

安装

npm install react-use-subject
# 或者
yarn add react-use-subject

快速开始

导入

import { ReplaySubject, useSubject } from "react-use-subject";

API 说明

ReplaySubject

ReplaySubject 是一个用于存储和广播数据流的类，适用于需要回放历史数据的场景。

主要 API 说明：

| 方法/属性 | 说明 | | ---------------------------------------- | --------------------------------------------------------------------------------- | | constructor(bufferSize, initialValue?) | 创建 ReplaySubject 实例，bufferSize 为缓存长度，initialValue 为初始值（可选） | | static create(value) | 创建带初始值的 ReplaySubject 实例 | | subscribe(callback) | 订阅数据流，订阅时会立即回调并传递当前值 | | next(value) | 推送新数据到流中，所有订阅者会收到通知 | | getLast() | 获取当前缓存的最新值 | | getHistory() | 获取所有历史数据 |

useSubject

useSubject 是一个自定义 Hook，便于在 React 组件中使用响应式数据流。

示例

声明 store

import { ReplaySubject } from "react-use-subject";

type UserInfo = {
  name: ReplaySubject<string>;
  age: ReplaySubject<number>;
  addAge: () => void;
};

class Model {
  userInfo: UserInfo = {
    name: ReplaySubject.create("张三"),
    age: new ReplaySubject(10, 18),
    addAge: () => {
      const age = this.userInfo.age.getLast();
      this.userInfo.age.next(age + 1);
    },
  };
}

export const model = new Model();

订阅时立即回调并打印当前值

const subject = ReplaySubject.create("hello");
subject.subscribe((v) => {
  // 这里会立即收到 "hello"，并且控制台会打印当前值
  console.log("订阅回调收到:", v);
});

组件中使用

import { useSubject } from "react-use-subject";
import { model } from "./store";

export default function DataDriveUI() {
  const name = useSubject(model.userInfo.name);
  return <div>姓名: {name}</div>;
}

目录结构

index.ts
utils/
  replaySubject.ts
  useSubject.ts

License

MIT