## 📚 技术栈背景 | Tech Stack & Context
- 列出所有的相关技术/语言
- [[public/CODE/React|React]]
- 主题：一句话总结这张卡片讲解了什么？
- 在 React 中需要命名任何东西 / 搞懂任何东西的命名代表什么
- 相关文档
- [React JS - Naming convention - DEV Community](https://dev.to/kristiyanvelkov/react-js-naming-convention-lcg)
## 🧩 相关场景 | Context
- 契机：为什么现在写它？
- 被 handle 和 on function绕晕，想一次性搞懂
- 作用：它解决了什么问题？
- 遵循规范 + 可维护性 + 一眼识别
- 应用场景：你未来会在什么地方用到它？
- 当你在创建新的组件、新写一个 hook、定义 props 或 state、写 CSS className 时都需要命名。
## 🔑 基本概念 | Key
| 类型 | 命名格式 | 示例 |
| --------- | ---------- | --------------------------- |
| component | PascalCase | `UserCard`, `TodoList` |
| File | PascalCase | `UserCard.tsx`, `UserCard/` |
| interface | PascalCase | `UserProps`, `FormValues` |
| Hook | camelCase | `useModal`, `useAuth` |
| function | camelCase | `handleClick`, `onChange` |
| props | camelCase | `onClick`, `isOpen` |
| state | camelCase | `isLoading`, `items` |
| constant | UPPER_CASE | `API_BASE_URL` |
### Component：PascalCase
PascalCase
```typescript
// ✅
function UserProfile() { }
function NavigationBar() { }
function TodoList() { }
// ❌ 错误：不要使用小写或下划线
function userProfile() { }
function navigation_bar() { }
```
### File：PascalCase
- 跟组件同名，PascalCase
- 文件名 = 组件名 = `UserCard.jsx` 或 `UserCard.tsx`
### Hook（自定义 hook）：camelCase
- camelCase，`useXxx`
- 📍 example：`useAuth`, `useFetchData`, `useModal`
### Props：camelCase
- camelCase，尽量语义明确
- 事件类用 `onXxx`
- 布尔值用 `isXxx` / `hasXxx` / `shouldXxx`
- 📍 example：`onClick`, `userId`, `isOpen`
```typescript
// ✅ 正确：使用小驼峰命名法(camelCase)
interface ButtonProps {
onClick: () => void;
isDisabled: boolean;
backgroundColor: string;
}
// ✅ 正确：布尔值props可以用is/has/should前缀
interface UserCardProps {
isActive: boolean;
hasError: boolean;
shouldUpdate: boolean;
}
// ❌ 错误：不要使用模糊的名称
interface Props {
data: any;
func: () => void;
}
```
### Event Handlers：handleXxx，在 props 里 onXxx
- camelCase
- handle 前缀：handleXxx
- 如果在 props 里：onXxx
```typescript
// ✅ 正确：使用handle前缀
const handleClick = () => { };
const handleSubmit = () => { };
const handleInputChange = () => { };
// ✅ 正确：props中使用on前缀
interface Props {
onSubmit: () => void;
onChange: (value: string) => void;
onUserSelect: (user: User) => void;
}
// ❌ 错误：不要使用模糊的名称
const click = () => { };
const submit = () => { };
```
### 状态变量 State Variables camelCase
- camelCase
- n. 尽量语义清晰
- boolean 用 `isXxx` / `hasXxx` / `shouldXxx`
```typescript
// ✅ 正确：描述性名称
const [isLoading, setIsLoading] = useState(false);
const [userList, setUserList] = useState<User[]>([]);
const [selectedItem, setSelectedItem] = useState<Item | null>(null);
// ❌ 错误：不要使用模糊的名称
const [data, setData] = useState();
const [value, setValue] = useState();
```
### 常量 Constants：UPPER_CASE
- UPPER_CASE 全大写，下划线分隔
```typescript
// ✅ 正确：全大写，下划线分隔
const MAX_RETRY_COUNT = 3;
const API_BASE_URL = 'https://api.example.com';
const DEFAULT_USER_SETTINGS = { theme: 'light' };
```
### 类型和接口 Types & Interfaces：TitleProps
- PascalCase
- 使用描述性名称，可以加Types或Props后缀
```typescript
// ✅ 正确：使用描述性名称，可以加Types或Props后缀
interface UserProps { }
type ButtonTypes = 'primary' | 'secondary';
interface AuthContextValue { }
// 组件props接口
interface UserProfileProps {
user: User;
onUpdate: (user: User) => void;
}
```