304-react-patterns

现代Web技术开发规范

本指南概述了使用现代Web技术（包括ReactJS、NextJS、Redux、TypeScript、JavaScript、HTML、CSS和UI框架）进行开发的最佳实践、约定和标准。

开发理念

• 编写干净、可维护和可扩展的代码
• 遵循SOLID原则
• 函数式和声明式编程模式优于命令式
• 强调类型安全和静态分析
• 实践组件驱动开发

代码实现指南

规划阶段

• 从逐步规划开始
• 实现前编写详细的伪代码
• 记录组件架构和数据流
• 考虑边缘情况和错误场景

代码风格

• 使用制表符进行缩进
• 使用单引号表示字符串（除非需要避免转义）
• 省略分号（除非需要消除歧义）
• 消除未使用的变量
• 在关键词后添加空格
• 在函数声明括号前添加空格
• 始终使用严格相等(===)而非宽松相等(==)
• 中缀运算符两侧加空格
• 逗号后添加空格
• else语句与闭合花括号保持同一行
• 多行if语句使用花括号
• 回调中始终处理错误参数
• 限制行长度在80个字符以内
• 在多行对象/数组字面量中使用尾随逗号

命名约定

一般规则

• 使用PascalCase（帕斯卡命名法）命名：
  • 组件
  • 类型定义
  • 接口
• 使用kebab-case（短横线命名法）命名：
  • 目录名（例如：components/auth-wizard）
  • 文件名（例如：user-profile.tsx）
• 使用camelCase（驼峰命名法）命名：
  • 变量
  • 函数
  • 方法
  • 钩子
  • 属性
  • Props
• 使用UPPERCASE（大写）命名：
  • 环境变量
  • 常量
  • 全局配置

特定命名模式

• 事件处理程序前缀为'handle'：handleClick, handleSubmit
• 布尔变量前缀使用动词：isLoading, hasError, canSubmit
• 自定义钩子前缀为'use'：useAuth, useForm
• 使用完整词汇而非缩写，除了以下情况：
  • err（error的缩写）
  • req（request的缩写）
  • res（response的缩写）
  • props（properties的缩写）
  • ref（reference的缩写）
• 数组命名：名词+List, 名词+s, 如：userList
• 常量使用全大写下划线分隔命名，力求语义表达完整清楚：const API_ENDPOINT = "https://a"

命名严谨性（可读性）❤️

• 代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式（除特殊含义命名：如shuidi,jingdong)
• 杜绝完全不规范的缩写，避免望文不知义

避免魔法数字

// 魔法数字
if (state === 1 || state === 2) {
  // ...
} else if (state === 3) {
  // ...
}

// 魔法数字改用常量映射
const UNPUBLISHED = 1;
const PUBLISHED = 2;
const DELETED = 3;

if (state === UNPUBLISHED || state === PUBLISHED) {
  // ...
} else if (state === DELETED) {
  // ...
}

React最佳实践

组件架构

• 使用带TypeScript接口的函数组件
• 使用function关键字定义组件
• 将可复用逻辑提取到自定义钩子中
• 实现合适的组件组合
• 策略性地使用React.memo()提高性能
• 在useEffect钩子中实现适当的清理
• 保持组件职责单一，避免组件过大 ❤️
• 函数式组件优先：React组件应优先使用函数组件，结合React Hooks管理状态 ❤️

JSX书写规范

• JSX代码中每个标签属性必须换行书写 ❤️

<Component
  prop1="value1"
  prop2="value2"
/>

• 在列表渲染中必须绑定key索引 ❤️
• 避免在JSX中定义内联函数
• 避免使用内联样式、内联事件，模板应简洁明了

React性能优化

• 使用useCallback记忆回调函数
• 为昂贵的计算实现useMemo
• 使用动态导入实现代码分割
• 在列表中正确实现key props（避免使用索引作为key）