reactive-ui-patterns

reactive-ui-patterns 技能为 Svelte 应用程序中的异步远程数据管理提供了一种强大的架构方法。它是为构建高性能 CRM 界面的开发人员所设计的，这些界面需要频繁地进行数据更新而不中断用户体验。通过取代传统的 {#await} 区块（通常会导致突兀的组件重载和文档布局偏移），此模式确保数据转换能够流畅地发生，同时保持滚动位置和交互状态。

此技能专为涉及状态查询的场景而设计，将数据存储在查询变量中，使 UI 能够独立于加载生命周期来响应数据集的变更。强烈建议用于仪表板、数据表格以及任何需要频繁轮询或用户触发服务器端数据重新整理的界面。

• 通过 .current 属性将数据来源与渲染生命周期分离，从而实现流畅的原位 UI 更新。

• 在执行远程函数期间保持现有的 DOM 节点，防止破坏性的页面跳动和焦点丢失。

• 实现精细的加载状态管理，区分组件首次挂载（显示加载器）与后台刷新操作（应用视觉提示，如透明度变化）。

• 通过弃用频繁触发 #await 区块重绘的模式，推动架构的最佳实践。

• 将查询对象捕获到局部变量中以使用此模式；这对于持续访问 .current 属性至关重要。

• 在显示加载指标之前，使用 .current 属性检查是否存在现有数据，以确保流畅的“stale-while-revalidate”体验。

• 通过 query.refresh() 触发手动更新，确保 UI 与后端变更保持同步，同时将视觉开销降至最低。

• 在渲染数据数组之前，务必检查 query.error 属性以处理错误状态。

• 避免硬重载组件；目标是仅更新与底层数据存储绑定的特定 DOM 片段。