面试题：React 的代码编写规范有哪些？

遵循良好的代码规范对于编写可维护、可读性强的 React 项目至关重要。这些规范涵盖了命名、结构、JSX 语法、状态管理等多个方面。以下是 React 开发中常见的代码编写规范：

---

一、文件与目录结构

1. 文件命名：
   • 组件文件使用 PascalCase（大驼峰命名法）：UserProfile.jsx, TodoList.js。
   • 非组件文件（如工具函数、样式）可以使用 camelCase（小驼峰）或 kebab-case（短横线分隔）：utils.js, api-client.js。
2. 目录结构：
   • 按功能或页面组织。

---

二、组件规范

1. 组件命名：
   • 组件名必须是 PascalCase。
   • 文件名和组件名应保持一致。
2. 组件定义：
   • 优先使用 函数组件 + Hooks，而非类组件。使用 箭头函数 或 函数声明 定义组件。
3. Props 解构：
   • 在函数参数中直接解构 props，提高可读性。

---

三、JSX 语法规范

1. 自闭合标签：
   • 所有自闭合标签必须闭合。
2. 属性命名：
   • 使用 camelCase（小驼峰）命名 JSX 属性。
3. 布尔属性：
   • 布尔属性直接写属性名或赋值 true，false 时省略。
4. JSX 中的 JavaScript：
   • {} 内的 JavaScript 表达式应简洁。避免在 {} 内写复杂逻辑，应提取到变量或函数中。
5. 条件渲染：
   • 使用 && 或 ? : 运算符，避免在 render 中使用 if。对于复杂的条件，提取为独立的变量或组件。
6. 列表渲染：
   • 使用 .map() 渲染列表。必须提供 key 属性，且 key 应是稳定、唯一、非索引的（优先使用数据的 id）。

---

四、状态与 Hooks 规范

1. useState：
   • 状态名应语义化。更新对象或数组时，保持不可变性，创建新副本。
2. useEffect：
   • 明确声明依赖数组 []。清理副作用（如事件监听器、定时器）。
3. 自定义 Hooks：
   • 以 use 开头命名。用于提取可复用的逻辑。

---

五、可访问性 (Accessibility)

1. 语义化 HTML：使用正确的 HTML 标签（<button>, <nav>, <main> 等）。
2. ARIA 属性：合理使用 aria-* 属性增强可访问性。
3. 键盘导航：确保所有交互元素可通过键盘操作。
4. alt 属性：为图片提供 alt 描述。

---

六、其他最佳实践

1. PropTypes 或 TypeScript：
   • 使用 PropTypes 或 TypeScript 对 props 进行类型检查，提高代码健壮性。
2. 避免内联样式：
   • 尽量使用 CSS Modules、Styled-components 或外部 CSS 文件，而非 style={{}}。
3. 代码分割：
   • 使用 React.lazy 和 Suspense 实现路由或组件的懒加载。
4. 性能优化：
   • 使用 React.memo 对函数组件进行浅比较优化。
   • 使用 useCallback 和 useMemo 避免不必要的重新渲染。

---

总结

遵循这些规范可以显著提升 React 项目的质量：

• 一致性：团队成员代码风格统一。
• 可维护性：代码结构清晰，易于理解和修改。
• 可读性：命名规范，逻辑清晰。
• 健壮性：类型检查，避免常见错误。
• 性能：遵循最佳实践，避免性能瓶颈。

建议团队使用 ESLint 和 Prettier 等工具自动化代码检查和格式化，确保规范落地。