mcpField
C
compose-state-and-effects

compose-state-and-effects

github.com/chrisbanes开发1.1k1.2k 次安装1 天前更新
代码仓库

关于 compose-state-and-effects

用于组织 Compose UI 状态与副作用的编码技能,帮助为每项状态指定合适的归属,并将应用接线与可预览内容分开。

主要功能

  1. 01将状态交给最低必要归属者
  2. 02使副作用匹配生命周期与键
  3. 03分离屏幕接线与渲染
  4. 04让内容便于预览和测试

适用场景

  1. 01审查屏幕中的状态归属
  2. 02选择匹配生命周期的副作用 API
  3. 03使用不可变状态构建 UI 边界
  4. 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.md
side-effects.md
state-hoisting.md

详细介绍

组合状态与副作用

核心原则

为每一项 UI 状态指定一个职责范围最小的所有者,然后通过生命周期与该所有者一致的副作用执行命令式工作。组合负责渲染;状态与副作用让渲染能够安全地变化。

屏幕所有权审查尚未完成,除非明确指出一个纯粹、可预览的内容组合函数:它接收不可变状态和事件回调,并与应用接线代码及由组合拥有的运行时对象分开。

流程

  1. 明确请求的范围和可见的行为要求。只有代码或任务证据表明存在生命周期、可测试性、业务或协调方面的需求时,才将所有权变更视为问题。在聚焦于契约或正确性的审查中,若代码并不需要某个缺失的提供者、所有者或写入方,这最多只能作为风险指出;不要建议更改所有权、默认值或 API 范围,即使是作为可选建议也不行。
  2. 梳理受影响屏幕或组件中的可变 UI 状态、应用状态、事件流、应用依赖项和命令式工作。
  3. 将每个状态值放在必要范围最小的所有者处:本地 UI 状态、提升的状态、纯 UI 状态持有者,或屏幕状态持有者。
  4. 对于屏幕边界,将持久数据和意图放在接线所有者中,将 Compose 运行时对象放在组合或纯 UI 状态持有者中,并通过可预览的内容组合函数进行渲染,该函数接收不可变状态和回调。阅读状态提升,了解实现方式;只命名状态和意图并不构成这个边界。此内容组合函数应能使用示例状态和回调调用;@Preview 包装器是可选的,并非状态驱动边界的必要条件。添加前,请确认模块已声明相关工具依赖;不要假定 Compose runtime 或 UI 依赖会提供这些工具。遵守任务的文件范围:除非获得授权,否则不要添加工具依赖或更改构建文件。如果需要 Preview 工具,但在当前范围内无法使用,请省略包装器并报告配置缺失。
  5. 选择生命周期与工作相匹配的副作用 API,并使用应触发其重启或释放的语义输入作为键。
  6. 对下方每项实质性关注点,阅读对应的参考资料。不要仅因主题相关就使用某篇参考资料。
  7. 将帧率读取、跨阶段回写和 @ReadOnlyComposable 契约相关问题转交给 Compose 性能。对于该契约,要区分对快照 State.value 的读取与更改 composer 的操作;仅读取状态本身并不构成违规。
  8. 在回复屏幕所有权审查前,如果可见代码需要步骤 4 中的内容,请检查全部三个屏幕边界。
  9. 当每个状态值都有且仅有一个所有者、每个副作用都有合理的生命周期和键,并且 UI 无需应用依赖即可预览和测试时,即可结束。对于仅审查的任务,如果没有证据充分的问题,就报告无需更改;不要臆造产品需求。

主题路由

信号阅读
直接声明的本地 var、remember { mutableStateOf(...) }、状态列表/映射或重置状态本地状态
兄弟组件共享状态、UI 状态持有者、ViewModel/组件接线,或可预览的屏幕边界状态提升
LaunchedEffect、DisposableEffect、SideEffect、snapshotFlow、rememberCoroutineScope、rememberUpdatedState、produceState、命令式 requestFocus、回调、事件 Flow 收集、Snackbar、导航或分析副作用
焦点所有权及键盘/电视/D-pad 操作Compose 焦点导航
对最终 UI 契约进行测试或预览Compose UI 测试模式

评论

支持 Markdown