react-patterns
starsforks
How to install react-patterns?
huangjia2019/claude-code-engineering/react-patterns
$npx -y skills add huangjia2019/claude-code-engineering --skill react-patternsReact 组件设计模式、Hooks 使用指南、性能优化技巧
SKILL.md
| 1 | # React 最佳实践 |
| 2 | |
| 3 | 本技能包含 React 开发的最佳实践，帮助你编写高质量的 React 代码。 |
| 4 | |
| 5 | ## 目录 |
| 6 | |
| 7 | 当用户需要特定主题时，加载对应章节： |
| 8 | |
| 9 | - **Hooks 基础** → 加载 [chapters/hooks.md](./chapters/hooks.md) |
| 10 | - **Context 使用** → 加载 [chapters/context.md](./chapters/context.md) |
| 11 | - **性能优化** → 加载 [chapters/performance.md](./chapters/performance.md) |
| 12 | |
| 13 | 只在用户明确需要时加载完整内容，避免浪费上下文窗口。 |
| 14 | |
| 15 | ## 核心原则 |
| 16 | |
| 17 | 1. **组件单一职责**：一个组件做一件事 |
| 18 | 2. **状态提升最小化**：状态放在需要它的最近公共祖先 |
| 19 | 3. **避免过早优化**：先让它工作，再让它快 |
| 20 | 4. **优先组合而非继承**：使用 children 和 render props |
| 21 | |
| 22 | ## 快速参考 |
| 23 | |
| 24 | ### 自定义 Hook 命名 |
| 25 | |
| 26 | ```javascript |
| 27 | // 好的命名 |
| 28 | useUser() |
| 29 | useLocalStorage() |
| 30 | useDebounce() |
| 31 | |
| 32 | // 不好的命名 |
| 33 | fetchUser() // 不是 use 开头 |
| 34 | useData() // 太模糊 |
| 35 | ``` |
| 36 | |
| 37 | ### 组件文件结构 |
| 38 | |
| 39 | ``` |
| 40 | ComponentName/ |
| 41 | ├── index.ts # 导出 |
| 42 | ├── ComponentName.tsx # 组件实现 |
| 43 | ├── ComponentName.test.tsx |
| 44 | ├── ComponentName.styles.ts |
| 45 | └── types.ts # 类型定义 |
| 46 | ``` |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
