用途:解决多个独立构建的 React UI bundle 在同一页面运行时共享同一 React 实例的问题,并给出表单自动补全与跨标签页状态持久化的实现模式。
主要能力:1) 共享 React:在每个 bundle 的 Vite 配置中通过 rollupOptions.external 外置 react、react-dom、react-dom/client、react/jsx-runtime,并在 HTML 中用 import map 指向同一份 React(示例使用 esm.sh 的 react@19.2.4)。2) useFrecency:按使用频率与最近使用时间(指数衰减,半衰期一周)对自动补全候选排序,数据存于 localStorage,含模块级缓存;分组名通过字段键后缀正则 /_([a-z]+)$/ 提取。3) schema 驱动渲染:由服务端 schema 生成 React 表单,并支持动作触发的 schema 细化。4) Zustand store:使用 Map 集合、localStorage 同步与初始化水合,事件按 MAX_EVENTS_PER_ITEM 上限截断。
使用方式:按资料中的配置外置 React 并声明 import map;引入 useFrecency 记录与获取建议;用 Zustand 创建带持久化的 store。
限制与注意:Vite 开发服务器忽略浏览器 import map,会预打包依赖,需自定义插件或 shim,否则出现“生产正常、开发异常”;双 React 实例报错为 Invalid hook call,不直接提示原因;localStorage 每源约 5MB,超限会静默停止持久化,大数据集可考虑 IndexedDB;正则需按自身字段命名调整。资料未提供安装命令、版本要求与收费信息。