cursor-rules/react.mdc at master · LessUp/cursor-rules · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
---
description: 适用于现代 Web 应用程序的 React 最佳实践和模式
globs: **/*.tsx, **/*.jsx, components/**/*
---

# React 最佳实践

## 组件结构
- 使用函数组件而非类组件
- 保持组件小而专注
- 将可重用逻辑提取到自定义钩子中
- 使用组合而非继承
- 使用 TypeScript 实现正确的 prop 类型
- 将大型组件拆分为更小、更专注的组件

## 钩子 (Hooks)
- 遵循钩子规则
- 对可重用逻辑使用自定义钩子
- 保持钩子专注和简单
- 在 useEffect 中使用适当的依赖数组
- 需要时在 useEffect 中实现清理
- 避免嵌套钩子

## 状态管理
- 对本地组件状态使用 useState
- 对复杂状态逻辑实现 useReducer
- 对共享状态使用 Context API
- 使状态尽可能靠近其使用位置
- 通过适当的状态管理避免 prop 钻取
- 仅在必要时使用状态管理库

## 性能
- 实现正确的记忆化 (useMemo, useCallback)
- 对昂贵的组件使用 React.memo
- 避免不必要的重新渲染
- 实现正确的懒加载
- 在列表中使用正确的 key prop
- 分析和优化渲染性能

## 表单
- 对表单输入使用受控组件
- 实现正确的表单验证
- 正确处理表单提交状态
- 显示适当的加载和错误状态
- 对复杂表单使用表单库
- 为表单实现正确的无障碍性

## 错误处理
- 实现错误边界 (Error Boundaries)
- 正确处理异步错误
- 显示用户友好的错误消息
- 实现正确的后备 UI
- 适当地记录错误
- 优雅地处理边界情况

## 测试
- 为组件编写单元测试
- 为复杂流程实现集成测试
- 使用 React Testing Library
- 测试用户交互
- 测试错误场景
- 实现正确的模拟数据

## 无障碍性 (Accessibility)
- 使用语义化 HTML 元素
- 实现正确的 ARIA 属性
- 确保键盘导航
- 使用屏幕阅读器进行测试
- 处理焦点管理
- 为图像提供正确的 alt 文本

## 代码组织
- 将相关组件分组
- 使用正确的文件命名约定
- 实现正确的目录结构
- 使样式靠近组件
- 使用正确的导入/导出
- 为复杂的组件逻辑编写文档