Reactive UI Patterns 是一套响应式 UI 实现模式,主要用于远程函数(remote functions)驱动的界面更新。其目标是实现平滑的原地更新、防止页面跳动,并配合 .current 属性管理加载状态。
使用方式上,资料给出的 Quick Start 示例展示了典型写法:先把查询结果存入变量,例如 const data_query = get_data();,这样才可以使用 .current 属性。在保存操作中,调用 await update_data({ id, value }); 之后执行 await data_query.refresh();,即可完成原地更新。模板部分按错误、初次加载、正常数据三种情况分支:当 data_query.error 存在时显示错误提示;当 data_query.loading 为真且 data_query.current 为 undefined 时显示“Loading...” ;否则通过 {@const items = data_query.current ?? []} 取出数据并遍历渲染。
核心原则包括:将查询结果存储到变量,以启用 .current 属性访问;使用 .current 来防止页面跳动、在更新期间保持滚动位置;只在初次加载时显示加载指示器,也就是仅当 .current === undefined 时,而不是每次刷新都显示;避免使用 {#await},因为它会造成突兀的页面重载,应改用存储查询的模式。
资料还提供了参考文件:current-property.md 深入讲解 .current 属性;anti-patterns.md 列出常见错误;examples.md 给出真实实现示例。
适用场景是需要局部刷新、保持滚动位置、优化加载状态的响应式界面开发。限制方面,资料未提供该技能所依赖的具体框架、版本要求、安装命令或运行环境说明,暂未提供相关信息。