数据库后端前端【免费下载链接】tinybaseA reactive data store sync engine.项目地址https://gitcode.com/gh_mirrors/ti/tinybase点击查看免费下载本指南讲解如何在 React 应用中引入 TinyBase 的ui-react模块通过一个可运行的 HTML 样板在浏览器中渲染 Store 中的数据并结合CellView组件与响应式 Hooks 理解数据写入 Store、组件读取并随数据变化自动重渲染的完整链路。读完本文你将掌握ui-react的安装方式、浏览器端 importmap 配置、最小组件用法以及向 Hooks 与组件进阶的路径。前置依赖安装 ui-react 模块TinyBase 的核心包tinybase本身是一个与 UI 框架无关的响应式数据 Store见 package.json 中的描述 A reactive in-memory data store。要在 React 中构建界面需要额外安装两个模块tinybase/ui-react提供 React 组件如CellView与响应式 Hooks如useCellReact 本身及其 DOM 渲染器。从当前仓库的 package.json 可以看到TinyBase 以 peer dependency 方式支持react与react-dom版本约^19.2.8这意味着在你的应用中需要自行安装 React。仓库的模块入口 src/ui-react/index.ts 统一导出了全部组件与 Hooks包括CellView、RowView、TableView、Provider、useCell、useTable等安装后即可按需引入。最简运行样板一个完整的 HTML 文件官方文档给出的最简启动方式是直接在浏览器中运行一个 HTML 文件无需任何构建工具。样板包含三部分用script typeimportmap声明模块别名、用esm.sh加载 TSX 运行时以支持浏览器内 JSX、然后以text/jsx类型编写组件代码。html head titleMy First TinyBase App/title script typeimportmap { imports: { tinybase: https://esm.sh/tinybase, tinybase/ui-react: https://esm.sh/tinybase/ui-react, react: https://esm.sh/react, react/jsx-runtime: https://esm.sh/react/jsx-runtime, react-dom/client: https://esm.sh/react-dom/client } } /script script typemodule srchttps://esm.sh/tsx/script script typetext/jsx import {createStore} from tinybase; import {CellView} from tinybase/ui-react; import {createRoot} from react-dom/client; import React from react; const store createStore(); store.setCell(t1, r1, c1, Hello World); createRoot(document.body).render( CellView store{store} tableIdt1 rowIdr1 cellIdc1 /, ); /script /head body / /html在浏览器中打开该文件屏幕上就会出现Hello World。它经历了完整的读写链路setCell(t1, r1, c1, Hello World)将值写入 StoreCellView组件通过内部 Hooks 读取该 Cell 并渲染到 DOM。这里的关键点在于CellView不仅是一次性读取而是一个响应式组件——Store 中该 Cell 一旦变化页面会自动更新。关于版本号上述 importmap 中的后缀留空表示使用最新版本。以当前仓库为例tinybase版本为 9.6.0见 package.json仓库内也保留了对应版本的预构建产物目录 pseudo.esm.sh/tinybase9.6.0实际使用时可把替换为具体版本号如https://esm.sh/tinybase9.6.0。为什么这段代码能运行这里有一个容易困惑的点浏览器原生不支持 JSX。上述样板中的https://esm.sh/tsx脚本与text/jsx的 script 类型其作用就是在浏览器端实时转换 JSX 语法让示例无需任何打包步骤即可运行。官方文档明确提示这仅用于演示如何快速上手生产环境应预编译 JSX 与模块产出打包后的浏览器应用详见 site/guides/02_building_uis_with_react/1_getting_started_with_ui_react.md。在打包场景下你完全不需要 importmap 和text/jsx直接按模块路径导入即可import {createStore} from tinybase; import {CellView} from tinybase/ui-react;CellView 组件源码级拆解CellView是ui-react中最基础的展示组件其完整实现位于 src/ui-react/CellView.tsxexport const CellView: typeof CellViewDecl ({ tableId, rowId, cellId, store, debugIds, }: CellProps): any ( Wrap debugIds{debugIds} id{cellId} {EMPTY_STRING (useCell(tableId, rowId, cellId, store) ?? EMPTY_STRING)} /Wrap );从源码可以提炼出三个实现事实它本质上是useCellHook 的组件化封装内部直接调用useCell(tableId, rowId, cellId, store)获取单元格值因此它天然具备响应式能力——底层订阅了该 Cell 的 listener值变化时触发组件重渲染。空值安全当 Cell 不存在时useCell返回undefined组件通过?? EMPTY_STRING将其渲染为空字符串避免页面出现 undefined 文本。调试支持debugIds属性配合Wrap组件见 src/ui-react/common/Wrap.tsx可在渲染内容前拼接cellId:{...}前缀便于在测试与调试中确认渲染来源。useCell的实现位于 src/ui-react/hooks.ts其核心是useListenable工具函数通过 React 18 的useSyncExternalStoregetResult对应调用 Store 的getCell方法取当前值subscribe对应注册addCellListener两者都由 React 调度从而保证Store 变化 → 组件重渲染这一闭环。这也印证了官方文档所述数据被写入、读取 Store再由ui-react的CellView渲染出来。交互式深化Hello World (React) 示例仓库提供了可运行的完整示例 site/demos/01_hello_world/4_react.md在基础样板之上做了三处关键增强非常值得参考用Provider注入 Store不再向每个组件传store属性而是用Provider store{store}包裹整棵组件树子组件无需显式传 Store动态更新setInterval(setTime, 1000)每秒调用一次store.setCell(t1, r1, c1, new Date().toLocaleTimeString())页面上的CellView每秒自动刷新为当前时间——这正是响应式 UI 的直观演示可视化调试额外引入tinybase/ui-react-inspector的Inspector组件点击角落的 TinyBase 图标即可查看 Store 内部的数据结构。示例的核心代码如下const store createStore(); const setTime () { store.setCell(t1, r1, c1, new Date().toLocaleTimeString()); }; setTime(); createRoot(document.body).render( Provider store{store} div idapp CellView tableIdt1 rowIdr1 cellIdc1 / /div Inspector / /Provider, ); setInterval(setTime, 1000);Provider的实现细节见 src/ui-react/Provider.tsx它通过 React Context 维护 8 类对象Store、Metrics、Indexes、Relationships、Queries、Checkpoints、Persister、Synchronizer各占一个 offset支持默认实例与具名实例xxxById两种注入方式并允许嵌套 Provider 合并父级上下文。其配套的上下文读取逻辑位于 src/ui-react/context.ts其中的useThing/useStoreOrStoreById等函数决定了一个组件最终拿到哪个 Store。用测试理解组件行为仓库的单元测试可以作为组件行为的权威佐证。在 test/unit/core/ui-common/components.ts 中测试 Store 被构造为包含t1、t2两张表及v1、v2两个 Value随后组件测试断言渲染CellView后容器文本为对应单元格的值调用store.setCell(...)后文本立即更新store.delTables()后文本清空。例如节选自同一文件rendered harness.render(components.CellView, { store, tableId: t1, rowId: r1, cellId: c1, }); expect(rendered.container.textContent).toEqual(1); await harness.act(() store.setCell(t1, r1, c1, 2)); expect(rendered.container.textContent).toEqual(2);React 专属的组件测试位于 test/unit/core/ui-react/components.test.tsx它把tinybase/ui-react的全部组件CellView、TableView、ValuesView、Provider等与 HooksuseCell、useTable等统一跑了一遍共享的testComponents用例并用testing-library/react验证渲染结果与卸载行为。这组测试同时覆盖了tinybase/ui-react/with-schemas带 Schema 的变体说明ui-react与 TinyBase 的 Schema 体系也能无缝配合。完整视图组件族与下一步Hooks 与 DOM 组件CellView只是ui-react的冰山一角。src/ui-react/index.ts 导出了覆盖 Store 各层级的视图组件ValueView/ValuesView、RowView、TableView/TablesView、SortedTableView、IndexView、MetricView、CheckpointView乃至查询结果相关的ResultTableView等几乎每一个 Store 访问方法都对应一个可复用的展示组件。更进一步还有面向浏览器交互的tinybase/ui-react-dom模块如可编辑单元格 src/ui-react-dom/EditableCellView.tsx内部使用useCellState返回的[cell, setCell]二元组实现读写联动以及图表模块tinybase/ui-react-dom-charts。官方文档在Getting Started末尾将读者导向下一步使用 Hooks 深入理解响应式编程对应指南 site/guides/02_building_uis_with_react/2_using_react_hooks.md。该指南总结了ui-react中一组与 Store getter 方法一一对应的响应式 Hooks它们的共同特性是不仅取一次值还会注册 listener在底层数据变化时自动触发组件重渲染组件卸载时 listener 自动移除Hook对应的 Store 方法返回类型useValuesgetValuesValues对象useValueIds/useValuegetValueIds/getValueId 数组 / 单个 ValueuseTablesgetTablesTables对象useTableIds/useTablegetTableIds/getTableId 数组 / 单张表对象useTableCellIdsgetTableCellIds单元格 Id 数组useRowIds/useSortedRowIdsgetRowIds/getSortedRowIds行 Id 数组 / 排序行 Id 数组useRowgetRow行对象useCellIds/useCellgetCellIds/getCell单元格 Id 数组 / 单元格值例如useCell的经典写法节选自 site/guides/02_building_uis_with_react/2_using_react_hooks.mdconst store createStore().setCell(pets, fido, color, brown); const App () span{useCell(pets, fido, color, store)}/span; root.render(App /); // spanbrown/span store.setCell(pets, fido, color, walnut); // spanwalnut/span更完整的参考示例如果你的需求不止于单单元格展示官方还提供了两类进阶参考Hello World 系列含 Vanilla / React / Solid / Svelte 多框架对照见 site/demos/01_hello_world/4_react.md 与系列索引 site/demos/01_hello_world/index.mdCountries (React) 示例结合了索引Indexes与持久化Persistence演示加载国家数据、持久化收藏行、切换过滤 Slice的完整业务形态见 site/demos/02_countries/index.md。小结ui-react将 TinyBase 的响应式数据模型与 React 的渲染模型打通CellView等组件封装了底层的 listener 注册与取值逻辑让数据即 UI成为可能Provider提供了组件树级别的 Store 注入而useCell、useTable等 Hooks 则把 Store 的每一个 getter 都变成了响应式读取入口。从本文的 HTML 样板出发你可以在几分钟内跑通第一个 TinyBase React 应用在此基础上site/guides/02_building_uis_with_react/2_using_react_hooks.md 会带你系统掌握全部 Hookssite/guides/02_building_uis_with_react/3_using_react_components.md、site/guides/02_building_uis_with_react/4_using_react_dom_components.md、site/guides/02_building_uis_with_react/5_using_context.md 与 site/guides/02_building_uis_with_react/6_using_charts.md 则分别深入组件用法、DOM 交互组件、Context 模式与图表组件。赞分享数据库后端前端【免费下载链接】tinybaseA reactive data store sync engine.项目地址https://gitcode.com/gh_mirrors/ti/tinybase点击查看免费下载相关推荐使用 ui-react 构建 TinyBase 响应式 React 应用快速入门指南使用 ui react 构建 TinyBase 响应式 React 应用快速入门指南 TinyBase 是一个面向本地优先local first应用的反应数据库后端前端TinyBase ui-solid 快速上手用 Solid 构建响应式数据界面TinyBase ui solid 快速上手用 Solid 构建响应式数据界面 本文是 TinyBase 官方指南《Building UIs With Sol数据库后端前端使用 TinyBase 的 Queries 构建响应式 UIui-react / ui-solid / ui-svelte 查询视图与 Hooks 完全指南使用 TinyBase 的 Queries 构建响应式 UIui react / ui solid / ui svelte 查询视图与 Hooks 完全指南数据库后端前端上一篇如何成为mercury-agent贡献者必须掌握的8条核心原则与完整代码规范指南下一篇Mind Elixir布局算法揭秘如何让上千节点的大思维导图依然流畅创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考