关于 compose-state-and-effects
用于组织 Compose UI 状态与副作用的编码技能,帮助为每项状态指定合适的归属,并将应用接线与可预览内容分开。
主要功能
- 01将状态交给最低必要归属者
- 02使副作用匹配生命周期与键
- 03分离屏幕接线与渲染
- 04让内容便于预览和测试
适用场景
- 01审查屏幕中的状态归属
- 02选择匹配生命周期的副作用 API
- 03使用不可变状态构建 UI 边界
- 04为预览和测试准备内容
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ chrisbanes/ skills --skill compose-state-and-effects安装后在 Claude Code 中输入/compose-state-and-effects确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/local-state.mdside-effects.mdstate-hoisting.md详细介绍
组合状态与副作用
核心原则
为每一项 UI 状态指定一个职责范围最小的所有者,然后通过生命周期与该所有者一致的副作用执行命令式工作。组合负责渲染;状态与副作用让渲染能够安全地变化。
屏幕所有权审查尚未完成,除非明确指出一个纯粹、可预览的内容组合函数:它接收不可变状态和事件回调,并与应用接线代码及由组合拥有的运行时对象分开。
流程
- 明确请求的范围和可见的行为要求。只有代码或任务证据表明存在生命周期、可测试性、业务或协调方面的需求时,才将所有权变更视为问题。在聚焦于契约或正确性的审查中,若代码并不需要某个缺失的提供者、所有者或写入方,这最多只能作为风险指出;不要建议更改所有权、默认值或 API 范围,即使是作为可选建议也不行。
- 梳理受影响屏幕或组件中的可变 UI 状态、应用状态、事件流、应用依赖项和命令式工作。
- 将每个状态值放在必要范围最小的所有者处:本地 UI 状态、提升的状态、纯 UI 状态持有者,或屏幕状态持有者。
- 对于屏幕边界,将持久数据和意图放在接线所有者中,将 Compose 运行时对象放在组合或纯 UI 状态持有者中,并通过可预览的内容组合函数进行渲染,该函数接收不可变状态和回调。阅读状态提升,了解实现方式;只命名状态和意图并不构成这个边界。此内容组合函数应能使用示例状态和回调调用;
@Preview包装器是可选的,并非状态驱动边界的必要条件。添加前,请确认模块已声明相关工具依赖;不要假定 Compose runtime 或 UI 依赖会提供这些工具。遵守任务的文件范围:除非获得授权,否则不要添加工具依赖或更改构建文件。如果需要 Preview 工具,但在当前范围内无法使用,请省略包装器并报告配置缺失。 - 选择生命周期与工作相匹配的副作用 API,并使用应触发其重启或释放的语义输入作为键。
- 对下方每项实质性关注点,阅读对应的参考资料。不要仅因主题相关就使用某篇参考资料。
- 将帧率读取、跨阶段回写和
@ReadOnlyComposable契约相关问题转交给 Compose 性能。对于该契约,要区分对快照State.value的读取与更改 composer 的操作;仅读取状态本身并不构成违规。 - 在回复屏幕所有权审查前,如果可见代码需要步骤 4 中的内容,请检查全部三个屏幕边界。
- 当每个状态值都有且仅有一个所有者、每个副作用都有合理的生命周期和键,并且 UI 无需应用依赖即可预览和测试时,即可结束。对于仅审查的任务,如果没有证据充分的问题,就报告无需更改;不要臆造产品需求。
主题路由
| 信号 | 阅读 |
|---|---|
直接声明的本地 var、remember { mutableStateOf(...) }、状态列表/映射或重置状态 | 本地状态 |
| 兄弟组件共享状态、UI 状态持有者、ViewModel/组件接线,或可预览的屏幕边界 | 状态提升 |
LaunchedEffect、DisposableEffect、SideEffect、snapshotFlow、rememberCoroutineScope、rememberUpdatedState、produceState、命令式 requestFocus、回调、事件 Flow 收集、Snackbar、导航或分析 | 副作用 |
| 焦点所有权及键盘/电视/D-pad 操作 | Compose 焦点导航 |
| 对最终 UI 契约进行测试或预览 | Compose UI 测试模式 |
评论
支持 Markdown