ui-component-patterns

用途：在创建组件库、落地设计系统、构建需要多变的复杂组件（如 Button、Modal、Dropdown）或重构重复代码时，提供可复用的 UI 组件设计模式。

主要能力与步骤：

1. Props API 设计：命名清晰、合理默认值、用 TypeScript 定义类型，可选 Props 使用 ? 标记，支持 HTML 属性继承与事件处理器。
2. 组合模式：用小组件拼装复杂 UI，例如 Card 配合 Card.Header、Card.Body、Card.Footer 的复合组件写法。
3. Render Props / Children as Function：通过 renderItem 等函数实现灵活定制，如 Dropdown 的渲染与选中逻辑。
4. 自定义 Hook 拆分逻辑：把业务逻辑与 UI 分离，如 useModal 提供 isOpen、open、close、toggle。
5. 性能优化：使用 React.memo、useMemo、useCallback 减少不必要的重渲染。

约束：必须遵循单一职责、Props 类型定义、无障碍（aria-*、role、tabindex）；禁止超过 5 层的 props 透传、在 UI 组件中写 API 调用或复杂计算、使用内联对象或函数。输出建议采用按组件分目录的文件结构，包含组件、测试、Storybook 与样式文件。

参考资料列出 React Patterns、Compound Components、Radix UI、Chakra UI、shadcn/ui。兼容平台：Claude、ChatGPT、Gemini。last updated 2025-01-01。适用范围以 React/TypeScript 前端组件为限，其他框架与构建工具细节暂未提供。