react-patterns
掌握 React 开发模式和最佳实践
自信地构建生产就绪的 React 应用。学习经过验证的 hooks、状态管理和组件设计模式。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“react-patterns”。 什么时候应该使用 Context 而不是像 Zustand 这样的全局 store？
预期结果:
对组件子树内的共享状态（如 theme 或 locale）使用 Context。对需要 devtools、持久化或在许多不相关组件间访问的应用级状态使用 Zustand。Context 是内置的但可能导致重新渲染；Zustand 为频繁更新提供更好的性能。
正在使用“react-patterns”。 这个 useEffect 对于在 mount 时获取数据是必要的吗？
预期结果:
在 React 19 中，对于数据获取，优先使用服务端组件或像 React Query 这样的数据获取库，而不是 useEffect。useEffect 适用于订阅或非数据副作用。对于数据，使用自动处理缓存、去重和错误状态的库。
安全审计
安全All 6 static analyzer findings are false positives. The SKILL.md file is educational documentation about React patterns, not executable code. Pattern matches on words like 'useLocalStorage' and section headings triggered false alarms. No actual security risks detected.
质量评分
你能构建什么
React 开发者入职
帮助新团队成员快速学习你们的 React 架构模式和编码标准。
组件重构指导
获取拆分大型组件和应用适当 hook 模式的建议。
状态管理决策
根据需求确定从 useState 到全局 store 的正确状态解决方案。
试试这些提示
解释在 React 中何时应该提取自定义 hook。展示 useLocalStorage 模式并提供示例代码。
审查这个 React 组件并根据组件设计原则提出改进建议。识别是否应该将其拆分为更小的组件。
我有一个应用，包含用户认证、主题偏好和实时通知。推荐一种状态管理方法并解释原因。
解释 React 19 编译器如何影响记忆化模式。展示哪些 useMemo 和 useCallback 调用可以被移除。
最佳实践
- 在优化之前分析性能 - 首先测量实际瓶颈
- 优先组合而非继承 - 构建小型、专注的组件
- 列表渲染时使用稳定的唯一 key 而不是数组索引
避免
- 深层 prop drilling - 改用 Context 或组件组合
- 多职责的大型组件 - 拆分为更小的单元
- 对所有事情都使用 useEffect - 在适当的地方利用服务端组件