RxDB 自定义响应式适配器指南：用 Angular Signals、Preact Signals 与 Vue Refs 替代 RxJS Observables-北京尧图网络

数据库NoSQL嵌入式数据库实时数据库【免费下载链接】rxdbThe local-first database that runs on every JS runtime and replicates with your existing backend - no vendor, no lock-in - https://rxdb.info/项目地址https://gitcode.com/gh_mirrors/rx/rxdb点击查看免费下载RxDB 内部基于 RxJS 提供所有随时间变化的数据流但现代前端框架各自拥有更贴合自身渲染机制的响应式原语Angular Signals、Preact Signals、Vue Refs。本文围绕 RxDB 的reactivity选项讲解如何在创建RxDatabase时注入自定义响应式工厂并通过双美元符$$以类型安全的 Signal/Ref 直接消费查询结果、文档字段与本地文档状态读完即可在三类框架中落地信号驱动的本地优先 UI。为什么需要自定义响应式适配器RxDB 内部使用 rxjs、文档字段RxDocument 的 observe等随时间变化的值都会以 rxjsObservable的形式暴露供 UI 订阅并随数据库状态变化而更新。然而在真实应用中直接用Observable驱动界面并不总是顺手Angular通常使用 signals 完成模板内的细粒度更新React生态中常见的是基于信号signal的状态库Vue模板中更自然的写法是 ref / shallowRef。如果每次都手动把Observable转换成语义相符的响应式对象再手动管理订阅与销毁代码会变得冗长且容易泄漏订阅。RxDB 的方案是在 RxDatabase 创建时传入一个自定义reactivity工厂之后 RxDB 所有可观察数据都会自动包装为你所选框架的响应式类型开箱即用。从源码看这套机制的接口定义在 src/types/plugins/reactivity.d.tsRxReactivityFactory的核心方法为fromObservableData, InitData( obs: ObservableData, initialValue: InitData, rxDatabase: RxDatabaseany, any, any, Reactivity ): ReactifiedReactivity, Data | InitData;即给定一个 RxJS Observable 与初始值返回一个响应式容器。ReactifiedReactivity, T是类型层面的映射当Reactivity满足ReactivityLambda一种高阶类型编码时返回SignalT/RefT之类的具体容器类型否则为了向后兼容原样返回传入类型见 src/types/plugins/reactivity.d.ts。添加 reactivity factory三种框架的接入方式官方提供了三个开箱即用的插件分别对应 Angular、ReactPreact Signals与 Vue框架插件导入路径响应式原语Angularrxdb/plugins/reactivity-angularAngular SignalsReactrxdb/plugins/reactivity-preact-signalsPreact SignalsVuerxdb/plugins/reactivity-vueVue Shallow RefsAngular使用 Angular SignalsAngular 场景使用 Angular Signals 作为自定义响应式对象。1. 导入import { createReactivityFactory } from rxdb/plugins/reactivity-angular; import { Injectable, inject } from angular/core;2. 在创建数据库时设置 reactivity 工厂const database await createRxDatabase({ name: mydb, storage: getRxStorageLocalstorage(), reactivity: createReactivityFactory(inject(Injector)) }); // add collections/sync etc...注意这里与 React/Vue 不同Angular 插件是一个函数需要传入当前组件环境的Injector。源码实现于 src/plugins/reactivity-angular/index.ts它调用untracked(() toSignal(observable$, { initialValue, injector }))将 RxJS Observable 转换为Signal并复用 Angular 的toSignal依赖注入体系使信号能自动接入 Angular 的变更检测上下文。3. 在 Angular 组件中使用 Signalimport { Component, inject } from angular/core; import { CommonModule } from angular/common; import { DbService } from ../db.service; Component({ selector: app-todos-list, standalone: true, imports: [CommonModule], template: ul li *ngForlet t of todosSignal(); {{ t.title }}/li /ul , }) export class TodosListComponent { private dbService inject(DbService); // RxDB query - Angular Signal readonly todosSignal this.dbService.db.todos.find().$$; }查询对象find()上的$$返回一个 Signal模板中直接以todosSignal()调用即可解包出查询结果数组。React使用 Preact SignalsReact 场景官方选择 Preact Signals它同样可以跨框架用于 React 18/19。1. 安装 Preact Signalsnpm install preact/signals-core --save2. 导入import { PreactSignalsRxReactivityFactory } from rxdb/plugins/reactivity-preact-signals;3. 设置 reactivity 工厂const database await createRxDatabase({ name: mydb, storage: getRxStorageLocalstorage(), reactivity: PreactSignalsRxReactivityFactory }); // add collections/sync etc...4. 在 React 组件中使用 Signalimport { useEffect, useState } from preact/hooks; import { getDatabase } from ./db; export function TodosList() { const [db, setDb] useState(null); useEffect(() { getDatabase().then(setDb); }, []); if (!db) return null; // RxQuery - Preact Signal const todosSignal db.todos.find().$$; return ( ul {todosSignal.value.map((doc: any) ( li key{doc.primary} {doc.title} /li ))} /ul ); }这里通过todosSignal.value读取信号当前值。实现细节与内存管理Preact 插件的实现位于 src/plugins/reactivity-preact-signals/index.ts。它首先用signal(initialValue)创建信号再订阅传入的 Observable将每次发射写入sig.value。值得注意的是它的清理机制插件用FinalizationRegistry在信号被垃圾回收时自动取消对应订阅同时保留一个兜底分支——由于 FinalizationRegistry 的回调并不可靠当订阅再次发射而信号已不再被引用时会立即removeSubscription(sub)清理从而避免僵尸订阅导致的泄漏。这一状态可通过导出的PREACT_SIGNAL_STATE记录 subscribeCount、signalBySubscription 等在调试与测试中观察。Vue使用 Vue Shallow RefsVue 场景使用 Vue Shallow Refs 作为自定义响应式对象。1. 导入import { VueRxReactivityFactory } from rxdb/plugins/reactivity-vue;2. 设置 reactivity 工厂const database await createRxDatabase({ name: mydb, storage: getRxStorageLocalstorage(), reactivity: VueRxReactivityFactory }); // add collections/sync etc...3. 在 Vue 组件中使用 Shallow Refscript setup langts import { getDatabase } from ./db; const db getDatabase(); // RxQuery to Vue shallowRef signal const todosSignal db.todos.find().$$; /script template ul li v-fort in todosSignal :keyt.primary label{{ t.title }}/label /li /ul /template模板中v-for直接遍历todosSignal即可Vue 模板的自动解包让shallowRef的使用如原生 ref 一般自然。实现细节与作用域绑定Vue 插件的实现位于 src/plugins/reactivity-vue/index.ts。它使用shallowRef(initialValue)创建浅引用并在每次 Observable 发射时执行ref.value value; triggerRef(ref);。浅引用配合手动triggerRef是为了避免深层响应式代理带来的性能开销。同时它调用onScopeDispose(() sub.unsubscribe())把订阅生命周期绑定到当前 Vue 作用域——组件卸载时自动取消订阅无需手动清理。通过 $$ 访问自定义响应式对象RxDB 对两类会变化的数据采用不同的标记约定单美元符$RxJS Observable。例如 RxCollection 的事件流RxCollection.$、文档字段RxDocument.myField$双美元符$$自定义响应式对象Signal / Ref由注入的 reactivity 工厂生成。以下是从各类 RxDB 实例上获取$$响应式对象的完整示例。RxDocument// RxDocument // get signal that represents the document field foobar const signal myRxDocument.get$$(foobar); // same as above const signal myRxDocument.foobar$$; // get signal that represents whole document over time const signal myRxDocument.$$; // get signal that represents the deleted state of the document const signal myRxDocument.deleted$$;实现机制RxDocument.$$与get$$(path)定义在 src/rx-document.ts 与 src/rx-document.ts。它们内部先从数据库取出 reactivity 工厂然后调用reactivity.fromObservable(obs, initialValue, database)——其中initialValue直接取当前文档快照this.getLatest()._data或this.getLatest().get(path)保证信号创建即持有当前值无需等待首次发射。而myRxDocument.foobar$$这种字段级 getter 并非手写在 src/rx-schema.ts 中RxDB 会根据 JSON schema 为每个字段通过Object.defineProperty(proto, key $$, ...)动态生成$$getter同段代码同时生成key $的 Observable getter 与key _的 populate getter。字段foobar的 schema 定义会自动产生foobar$$因此任何文档字段都有对应的响应式访问器。RxQuery// RxQuery // get signal that represents the query result set over time const signal collection.find().$$; // get signal that represents the query result set over time const signal collection.findOne().$$;查询结果的$$getter 位于 src/rx-query.ts它调用reactivity.fromObservable(this.$, undefined, this.collection.database)。注意查询场景传入的初始值为undefined查询结果首次计算前没有可用快照这与文档/字段的立即持有当前值行为不同——如果你需要渲染前的占位状态可自行对信号做初始化处理。find().$$与findOne().$$返回的信号值类型由查询决定数组查询结果为结果集数组单文档查询为文档或 null。RxLocalDocument// RxLocalDocument // get signal that represents the whole local document state const signal myRxLocalDocument.$$; // get signal that represents the foobar field const signal myRxLocalDocument.get$$(foobar);本地文档的$$与get$$实现在 src/plugins/local-documents/rx-local-document.ts同样委托给数据库的 reactivity 工厂。本地文档不进入主存储仅存在于内存如 UI 状态、草稿因此用信号驱动其字段变更非常适合表单与临时状态的场景。忘记配置 reactivity 会怎样如果数据库创建时没有传入reactivity工厂却访问任何$$响应式对象会抛出明确错误。数据库侧的入口是 src/rx-database.ts 的getReactivityFactory()public getReactivityFactory(): RxReactivityFactoryReactivity { if (!this.reactivity) { throw newRxError(DB14, { database: this.name }); } return this.reactivity; }对应错误码DB14的说明见 src/plugins/dev-mode/error-messages.ts为没有在数据库创建时添加自定义 reactivity 工厂原因是你想使用 reactivity 但未提供工厂解决方法是添加一个 reactivity 工厂例如 React、Vue、Angular或使用添加了该工厂的插件。因此在应用入口创建数据库的模块集中配置reactivity即可让全应用的查询、文档与本地文档统一获得 Signal/Ref 能力。底层工作流小结综合以上源码自定义响应式的完整链路是应用在createRxDatabase({ ..., reactivity })中传入插件工厂Angular 插件为createReactivityFactory(injector)React/Vue 插件为直接导出的工厂对象RxDatabase 将其保存在实例上getReactivityFactory()按需返回src/rx-database.ts业务代码访问任意$$getter文档、查询、本地文档、RxState 亦可get$$时RxDB 取出底层$Observable 与初始值交给fromObservable插件工厂内部订阅 Observable把每次发射写入 Signal/Ref并各自处理生命周期Angular 依赖toSignal的injector、Preact 依赖FinalizationRegistry兜底清理、Vue 依赖onScopeDispose。由此RxDB 的核心响应式数据库能力与框架自身的信号体系无缝衔接数据变更经事件流驱动信号更新UI 零手动订阅、零泄漏风险。若要在其他框架使用同类能力也可参照 src/types/plugins/reactivity.d.ts 的RxReactivityFactory接口自行实现适配器。赞分享数据库NoSQL嵌入式数据库实时数据库【免费下载链接】rxdbThe local-first database that runs on every JS runtime and replicates with your existing backend - no vendor, no lock-in - https://rxdb.info/项目地址https://gitcode.com/gh_mirrors/rx/rxdb点击查看免费下载相关推荐lit-labs/preact-signals 集成指南在 Lit 中通过 Preact Signals 构建响应式共享状态lit labs/preact signals 集成指南在 Lit 中通过 Preact Signals 构建响应式共享状态导读本文围绕 lit la前端UI组件不用网络也能实时翻译免费开源的Android离线翻译应用不用网络也能实时翻译免费开源的Android离线翻译应用 RTranslator 是一款完全离线的 Android 实时语音翻译应用开源、免费。它用 Op人工智能AI 应用本地部署语音NLP移动开发CPP-Crash-Course精华理解构造函数与析构函数的关键要点CPP Crash Course精华理解构造函数与析构函数的关键要点 C Crash Course是学习C编程的优秀资源其中构造函数与析构函数是面向上一篇10个顶级Go语言微信公众号推荐让你的Go学习之路事半功倍下一篇如何掌握字典树前缀匹配与字符串检索的终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

RxDB 自定义响应式适配器指南：用 Angular Signals、Preact Signals 与 Vue Refs 替代 RxJS Observables

相关推荐

xiaomusic在线搜索插件：语音点歌实战选型指南

使用 Web3.js 与 EIP-6963 构建中级 dApp：多钱包发现、账户余额查询与以太转账实战

电脑总卡？用AtlasOS的4款驱动优化工具，完整配置指南帮你把系统延迟降下来

更多资讯

Elfouhaily海浪谱详解：MATLAB实现海面电磁散射仿真统一谱模型

基于 Cloudflare Workers 的开源文件分享服务 EdgeShare 全解析

基于SpringBoot+Vue的毕业就业信息管理系统设计与实现

LLVM实站指南：从仓库结构到自定义Pass与后端优化

LibreChat自托管部署指南：多模型接入与配置实践

基于抛物方程的大气波导电波传播建模与仿真研究

今日更新

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？