React 最佳实践
本技能包含 React 开发的最佳实践,帮助你编写高质量的 React 代码。
目录
当用户需要特定主题时,加载对应章节:
- Hooks 基础 → 加载 chapters/hooks.md
- Context 使用 → 加载 chapters/context.md
- 性能优化 → 加载 chapters/performance.md
只在用户明确需要时加载完整内容,避免浪费上下文窗口。
核心原则
- 组件单一职责:一个组件做一件事
- 状态提升最小化:状态放在需要它的最近公共祖先
- 避免过早优化:先让它工作,再让它快
- 优先组合而非继承:使用 children 和 render props
快速参考
自定义 Hook 命名
// 好的命名
useUser()
useLocalStorage()
useDebounce()
// 不好的命名
fetchUser() // 不是 use 开头
useData() // 太模糊
组件文件结构
ComponentName/
├── index.ts # 导出
├── ComponentName.tsx # 组件实现
├── ComponentName.test.tsx
├── ComponentName.styles.ts
└── types.ts # 类型定义