React PatternsSAFE

This repository demonstrates how to use Claude Code to do real engineering work, not just writing code. 本项目是极客时间专栏 《Claude Code 工程化实战》 的官方配套示例仓库,目标就是: 👉 把 Claude Code 从“对话式编码工具”,变成 可设计、可复用、可治理的工程系统。

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: React 最佳实践
description: React 组件设计模式、Hooks 使用指南、性能优化技巧
---

# React 最佳实践

本技能包含 React 开发的最佳实践,帮助你编写高质量的 React 代码。

## 目录

当用户需要特定主题时,加载对应章节:

- **Hooks 基础** → 加载 [chapters/hooks.md](./chapters/hooks.md)
- **Context 使用** → 加载 [chapters/context.md](./chapters/context.md)
- **性能优化** → 加载 [chapters/performance.md](./chapters/performance.md)

只在用户明确需要时加载完整内容,避免浪费上下文窗口。

## 核心原则

1. **组件单一职责**:一个组件做一件事
2. **状态提升最小化**:状态放在需要它的最近公共祖先
3. **避免过早优化**:先让它工作,再让它快
4. **优先组合而非继承**:使用 children 和 render props

## 快速参考

### 自定义 Hook 命名

```javascript
// 好的命名
useUser()
useLocalStorage()
useDebounce()

// 不好的命名
fetchUser()      // 不是 use 开头
useData()        // 太模糊
```

### 组件文件结构

```
ComponentName/
├── index.ts           # 导出
├── ComponentName.tsx  # 组件实现
├── ComponentName.test.tsx
├── ComponentName.styles.ts
└── types.ts           # 类型定义
```

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (1)

Gates applied: no_behavioural_pass, no_license.