可扩展的 React 组合模式。适用于重构布尔属性泛滥的组件、构建灵活的组件库或设计可复用 API。触发于复合组件、Render Props、Context Provider 或组件架构相关任务。包含 React 19 API 变更。
反应组成模式是一项面向实际任务的技能,主要用于构建灵活、可维护反应组件的组合模式;使用复合组件、 升力状态和。
执行完成后建议检查结果是否符合预期,并保留必要记录。从功能定位来看,该技能强调把分散的操作要求整理成清晰、可复用的处理流程,使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数,再依据技能说明逐步执行;
若输入条件不完整,应先补齐信息或采用保守配置,避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期,并对异常提示、缺失字段和边界情况进行处理;涉及批量任务时,还应保存进度,避免中断后重复操作。
构建灵活、可维护的 React 组件所采用的组合模式。通过使用复合组件(compound components)、状态提升(lifting state)以及内部组件组合等方式,避免布尔型 prop 的泛滥。这些模式在代码库规模扩大时,能同时提升人类开发者与 AI agent 的协作效率和可维护性。
在以下情况下,请参考本指南:
| 优先级 | 类别 | 影响程度 | 前缀 |
|---|---|---|---|
| 1 | 组件架构 | HIGH | architecture- |
| 2 | 状态管理 | MEDIUM | state- |
| 3 | 实现模式 | MEDIUM | patterns- |
| 4 | React 19 APIs | MEDIUM | react19- |
architecture-avoid-boolean-props — 不要添加布尔型 prop 来定制行为;应使用组合方式替代architecture-compound-components — 使用共享 Context 构建复杂组件结构state-decouple-implementation — Provider 是唯一知晓状态如何被管理的位置state-context-interface — 定义包含 state、actions 和 meta 的通用接口,以支持依赖注入state-lift-state — 将状态上提至 Provider 组件中,供兄弟组件访问patterns-explicit-variants — 创建显式的变体组件,而非依赖布尔型 prop 控制模式patterns-children-over-render-props — 使用 children 实现组合,而非 renderX 类型的 prop⚠️ 仅适用于 React 19+。 若使用 React 18 或更早版本,请跳过本节。
react19-no-forwardref — 不要使用 forwardRef;改用 use() 替代 useContext()请阅读各条规则对应的独立文件,获取详细说明与代码示例:
rules/architecture-avoid-boolean-props.md rules/state-context-interface.md
每条规则文件均包含以下内容:
如需查看所有规则展开后的完整指南,请参阅:AGENTS.md
相关专题
热门下载
相关下载
精品课程
共6课时 | 54.7万人学习
共89课时 | 134万人学习
共49课时 | 82.5万人学习
最新文章